Repository navigation
TypeScript watch mode #328
Description
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);
Activity
SteveSandersonMS commentedon Sep 21, 2016
I'm afraid I don't have any idea why things aren't working based on your description. You haven't mentioned anything that's different between your app and the default Yeoman generated project (which definitely does work).
Are you able to provide repro steps? As in, starting from the Yeoman-generated project, what can I do to recreate the same stuff not working as you're experiencing?
rbasniak commentedon Sep 21, 2016
Did you create a project from scratch or are you using the templates? I had the same problem as you when I was trying to learn trying to recreate a project from a blank ASP.NET Core project.
If it's your case, open your .xproj file on a text editor and add
TypeScriptCompileBlockedon the firstPropertyGroupsection, like this:Hope that helps...
mmkal commentedon Sep 22, 2016
Thanks for the replies - @rbasniak , that didn't seem to do the trick for me.
I'm trying doing a comparison of my project to a newly-generated one (which does with HMR on TypeScript changes), but it might take a little while. There are quite a few differences since I created mine last week! Will post again if I figure out what's wrong.
SteveSandersonMS commentedon Sep 22, 2016
OK thanks for the update. If your investigations lead you to think there's an issue, please reopen with details!