Angular-cli: 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: https://github.com/angular/angular-cli/pull/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(),

[paralin]

Are there any updates to this?

[intellix]

@paralin yeah it was merged and now available in beta 22. There's an example of how to implement it in your project on this: https://github.com/angular/angular-cli/pull/3330

[paralin]

@intellix sweet! Can we close this then?

[intellix]

Yeah I think so. I dunno who can. I guess there's some work to be done for the documentation still.

[pauldraper]

To anyone looking for this, I recommend taking a look at https://github.com/wags1999/angular-hmr-lazy-components

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}