Support for hot module replacement

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?

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

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

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

@Foxandxss

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

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!

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

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

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

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(),

Are there any updates to this?

@paralin

@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: #3330

@intellix

@intellix sweet! Can we close this then?

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

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

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.}

Navigation Menu

Repository navigation

Support for hot module replacement #893

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support for hot module replacement #893

Description

Activity

intellix commented on May 25, 2016

filipesilva commented on May 25, 2016

intellix commented on Jul 27, 2016

filipesilva commented on Jul 27, 2016

alexjoverm commented on Jul 27, 2016

johnchristopherjones commented on Aug 10, 2016

radusuciu commented on Aug 30, 2016

intellix commented on Sep 2, 2016

paralin commented on Dec 4, 2016

intellix commented on Dec 4, 2016

paralin commented on Dec 4, 2016

intellix commented on Dec 4, 2016

pauldraper commented on Jul 10, 2019

angular-automatic-lock-bot commented on Sep 9, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions