Webpack 1.x Hot Module Replacement Modules not updating

Question

I'm trying to integrate Angular 2 with HMR in Visual Studio 2015. I have 2 projects with the same file contents and same directory structure and both uses HMR with Angular 2. But the HMR for each project looks for different to update the bundle. i.e. For App1, it looks for Typescript files (And JS are not generated for them in VS) like:

Having Module A depends upon B, and B Upon C. If C is updated, the whole bundle gets updated that works good.

But in App2, it looks for 1 Typescript file main.ts and 2 Javascript files, like:

If C is updated, the module don't get updated, unless I explicitly modify C's Javascript file (Generated by VS on build)!

How do I tell Webpack HMR to look for these Typescript files and update the bundle if I changed any of them.

My webpack.config.js are same for both projects like:

var path = require('path');
var webpack = require('webpack');

module.exports = {
resolve: { extensions: [ '', '.js', '.ts' ] },
entry: { 'main-client': './ClientApp/main.ts' },
output: {
    filename: '[name].js',
    path: path.join(__dirname, './wwwroot/dist'),
    publicPath: '/dist/'
},
module: {
    loaders: [
        { test: /\.ts$/, include: /ClientApp/, loader: 'ts' },
        { test: /\.html$/, loader: 'raw' }
    ]
}
 };

score 0 · Answer 1 · answered Apr 04 '17 at 11:14

I had the same problem and fixed it by enabling HMR in main.ts.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

// Enables Hot Module Replacement.
declare var module: any;
if (module.hot) {
   module.hot.accept();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Webpack 1.x Hot Module Replacement Modules not updating

1 Answers1