TypeScript watch mode #1368

New Issue

fergalmoran · 2025-08-09T17:19:53Z

fergalmoran commented

2025-08-09 17:19:53 +00:00

Originally created by @mmkal on 9/21/2016

TypeScript watch mode compilation doesn't seem to be working for me. Hot module reloading is - changes to .html or .scss files are triggering an update in the browser. But modifying typescript files doesn't seem to regenerate any javascript, so there are no UI updates.

I can get the typescript to compile a change to a .cs file, then triggering a Visual Studio build, which makes me suspect webpack has nothing to do with it at all, and the compilation is just some VS built-in magic. I am also able to get HMR working with TypeScript by running tsc -w -p . in the project directory, in a separate window, but that's not an ideal workflow. And it's not actually clear to me why HMR is even working in this case, since I don't have an explicit .js loader.

If it helps, this is my webpack.config.js - it's pretty much the default one for an angular spa, with an additional sass loader:

var path = require('path');
var webpack = require('webpack');
var merge = require('extendify')({ isDeep: true, arrays: 'concat' });
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('styles.css');
var devConfig = require('./webpack.config.dev');
var prodConfig = require('./webpack.config.prod');
var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development';

module.exports = merge({
    resolve: {
        extensions: [ '', '.js', '.ts' ]
    },
    module: {
        loaders: [
            { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader' },
            { test: /\.html$/, loader: 'raw-loader' },
            { test: /\.css/, loader: extractCSS.extract(['css']) },
            { test: /\.scss/, loader: "style!css!sass" }
        ]
    },
    entry: {
        main: ['./ClientApp/boot-client.ts']
    },
    output: {
        path: path.join(__dirname, 'wwwroot', 'dist'),
        filename: '[name].js',
        publicPath: '/dist/'
    },
    plugins: [
        extractCSS,
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        })
    ]
}, isDevelopment ? devConfig : prodConfig);

*Originally created by @mmkal on 9/21/2016* TypeScript watch mode compilation doesn't seem to be working for me. Hot module reloading is - changes to .html or .scss files are triggering an update in the browser. But modifying typescript files doesn't seem to regenerate any javascript, so there are no UI updates. I can get the typescript to compile a change to a .cs file, then triggering a Visual Studio build, which makes me suspect webpack has nothing to do with it at all, and the compilation is just some VS built-in magic. I am also able to get HMR working with TypeScript by running `tsc -w -p .` in the project directory, in a separate window, but that's not an ideal workflow. And it's not actually clear to me why HMR is even working in this case, since I don't have an explicit .js loader. If it helps, this is my webpack.config.js - it's pretty much the default one for an angular spa, with an additional sass loader: ``` javascript var path = require('path'); var webpack = require('webpack'); var merge = require('extendify')({ isDeep: true, arrays: 'concat' }); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var extractCSS = new ExtractTextPlugin('styles.css'); var devConfig = require('./webpack.config.dev'); var prodConfig = require('./webpack.config.prod'); var isDevelopment = process.env.ASPNETCORE_ENVIRONMENT === 'Development'; module.exports = merge({ resolve: { extensions: [ '', '.js', '.ts' ] }, module: { loaders: [ { test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader' }, { test: /\.html$/, loader: 'raw-loader' }, { test: /\.css/, loader: extractCSS.extract(['css']) }, { test: /\.scss/, loader: "style!css!sass" } ] }, entry: { main: ['./ClientApp/boot-client.ts'] }, output: { path: path.join(__dirname, 'wwwroot', 'dist'), filename: '[name].js', publicPath: '/dist/' }, plugins: [ extractCSS, new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ] }, isDevelopment ? devConfig : prodConfig); ```

fergalmoran closed this issue

2025-08-09 17:19:53 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1368