Running ng server with --hmr still causes page to reload on changes

Question

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?

Answer 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 :)