Support for hot module replacement

[mattdistefano]

I see this was discussed a little in #298 but I don't see a definitive answer there - are there any plans to support this feature in the CLI?

[intellix]

Wasn't aware that it was available yet, but installed angular2-webpack-starter from AngularClass and it seems very much so: https://github.com/AngularClass/angular2-webpack-starter

Makes development much easier, as every file change triggers about 6 seconds as it fetches 300+ files. My guess is because angular-cli runs on ember-cli, that we'd have to wait for broccoli-hmr

[filipesilva]

No plans atm, but I am happy to leave the issue open and labelled for now.

[intellix]

Now we have webpack, I guess I'll link to the conversation here: #1402

[filipesilva]

@Foxandxss mentioned https://github.com/AngularClass/angular2-hmr, which seems to implement it for webpack.

[alexjoverm]

I've just searched for this feature, popped into https://github.com/AngularClass/angular2-hmr and hoped to have it available on the angular-cli tool... +1 for this feature!

[johnchristopherjones]

There's a recent article demonstrating the use of hot reloading using Webpack.

[radusuciu]

I've put up a very basic implementation of HMR working with Angular RC5 and Webpack:

https://github.com/radusuciu/webpacked-angular-with-dll

[intellix]

Played with your example radusuciu and it feels quite nice. Just got this working in angular-cli actually. Can't do a PR just now as I have to run, but going to paste the important bits:

Install the HMR stuff: npm i -D @angularclass/hmr @angularclass/hmr-loader
Create a shared/hmr.class.ts, copying this: https://github.com/radusuciu/webpacked-angular-with-dll/blob/master/src/utils/hmr.ts
Have app.module.ts import and extend it: https://github.com/radusuciu/webpacked-angular-with-dll/blob/master/src/app.module.ts#L27

node_modules/angular-cli/addon/ng2/tasks/serve-webpack.ts:

config.entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`, 'webpack/hot/dev-server');

const webpackDevServerConfiguration: IWebpackDevServerConfigurationOptions = {
  contentBase: path.resolve(this.project.root, `./${CliConfig.fromProject().defaults.sourceDir}`),
  historyApiFallback: true,
  stats: webpackDevServerOutputOptions,
  inline: true,
  hot: true // add this
};

Add this to plugins inside node_modules/angular-cli/addon/ng2/models/webpack-build-common.ts: new webpack.HotModuleReplacementPlugin(),