4

I just upgraded my application to Angular ^11.0.2 and wanted to try the --hmr option on the CLI. From the CLI it looks like it is enabled though when performing a change to a page it is still completely refreshed in the browser.

When compiling the application this is mentioned

The project will still live reload when HMR is enabled, but to take full advantage of HMR additional application code which is not included by default in an Angular CLI project is required.

But the info on the webpack config is not really helping me for a Angular project. We do use @angular-builders/custom-webpack in the project but this is only used to merge some JSONs. Can someone point me in some directions where to check for specific config related to HMR?

Nicholas
  • 1,189
  • 4
  • 20
  • 40

1 Answers1

1

It looks like I had to add the following in the main.ts

declare var module: any;
if (module['hot']) {
    module['hot'].accept();
    module['hot'].dispose(() => ɵresetCompiledComponents());
}

I still get the message mentioned in my original post but at least I see a different behavior. If there are any other things to tweak please let me know :)

Nicholas
  • 1,189
  • 4
  • 20
  • 40
  • 1
    `import { enableProdMode, ɵresetCompiledComponents } from '@angular/core';` – Ravinder Payal Feb 17 '21 at 01:52
  • What is the source for this code, is there a URL you modeled it from? – ryanm Apr 29 '21 at 14:37
  • Not sure where I originally got it from but I think this could be the source URL https://gitmemory.com/issue/angular/angular-cli/17324/686472836 – Nicholas Jun 09 '21 at 09:33
  • This does not work in Angular 12. It also isn't mentioned anywhere in the angular docs... – elliottregan Oct 13 '21 at 18:22
  • Found this working nicely in angular cli 10.0.5. Although some scss files are not showing green in chrome workspace for editing directly. But yes, very cool feature and thanks for sharing. – Shashank Bhatt Dec 08 '21 at 05:59