Angular-cli: Documentation on HMR?

[Krishna-teja]

Is there documentation available on how we can enable HMR in apps created using angular-cli? Also, could it be automatically pre-configured when creating a new project using angular-cli?

[beeman]

Hi @Krishna-teja, I've written a tutorial on how to enable it in a new Angular app generated by angular-cli. You can find it here: https://medium.com/@beeman/tutorial-enable-hrm-in-angular-cli-apps-1b0d13b80130

[hansl]

What @beeman said.

[johnhamm]

@beeman I am getting a message from angular-cli while following your tutorial or using your repository (using angular-cli 1.0.0-beta.25.5):

To disable this warning use "ng set --global warnings.nodeDeprecation=false".NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
The project will still live reload when HMR is enabled,
but to take advantage of HMR additional application code is required
(not included in an Angular CLI project by default).
See https://webpack.github.io/docs/hot-module-replacement.html
for information on working with HMR for Webpack.

I visited that URL and I'm not sure what additional code I need to get HMR working. Is this documented anywhere?

[ikushlianski]

Have the same issue. Any suggestions?

[skorunka]

Same issue, could you guys please provide some thought on this? I think HMR works as expected, so this warning is just a warning :)

[beeman]

This is the official guide on how to enable HMR in Angular CLI.
https://github.com/angular/angular-cli/wiki/stories-configure-hmr

The warning is indeed just a warning and can be disabled by running the command mentioned:

ng set --global warnings.nodeDeprecation=false

[skorunka]

Is there any reason why this warning is displayed?

[skorunka]

command to disable warning(angular-cli 1.6.3) ng set warnings.hmrWarning=false

[jamra]

This is not just a warning to me. It's actually live reloading. If you look at the warning, it states that "The project will still live reload when HMR is enabled,"

[eikishi01]

Hi @beeman, I followed your tutorial to enable HMR in Angular 5 and it worked like a charm , now, I upgraded to Angular 6 and with a few tweaks it's "working", I get the ng serve up and running how ever every time I do a change I get this error:

[HMR] Cannot apply update. Need to do a full reload!
Error: Aborted because [FILE HERE] is not accepted

And I does a full reload, can you update the tutorial for Angular 6?, I can't figure it out on why it doesn't work on Angular 6

Thanks a lot.

[beeman]

Hey @eikishi01 - I will have a look at it later this week. Personally I have stopped using HMR quite some time ago, it was not stable enough and the native reload if the CLI became faster too.

However, I will check to see if I can rewrite the tutorial for v6 and let you know!

[eikishi01]

@beeman Thanks, I heard the same thing before configuring the HMR, I just wanted to not full reload the page on CSS changes for example and native reload always does it for everything, unless there is something I messed.

[nongrata081]

Any updates on HMR for ng v6?

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