HMR configuration - Live Reload still enabled

Hi all,

i’ve just tried to setup HMR for my angular 9 application- which is working fine for changes within my SCSS files (… stylesheets are updated without page reload).

But it doesn’t work out for markup/component files - changes there still trigger a reload of the whole page.

I assume, that I’ve done sth. wrong, but I could not figure out what (due to this message during startup):

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.js.org/guides/hot-module-replacement
for information on working with HMR for Webpack.
To disable this warning use "hmrWarning: false" under "serve" options in "angular.json".

My configuration is done accordingly to the ‘official’ but deprecated docs: https://github.com/angular/angular-cli/wiki/stories-configure-hmr

angular.json:

[...]
          "configurations": {
            "hmr": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.hmr.ts"
              }]
            },
            "production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }],
[...]

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "PortfolioManagerWebClient:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "PortfolioManagerWebClient:build:production"
            },
            "hmr": {
              "hmr": true,
              "browserTarget": "PortfolioManagerWebClient:build:hmr"
            }
          }
        },

package.json:

"hmr": "ng serve --configuration=hmr",

and env. file (src\environments\environment.hmr.ts)

export const environment = {
	production: false,
	hmr: true,
[...]

I couldn’t figure out, that there is sth. obvious wrong. Could you advise me there? Thanks in advance!

Issue Analytics

State:
Created 3 years ago
Reactions:13
Comments:28

Top GitHub Comments

7reactions

alan-agius4commented, Sep 26, 2020

This will be available in v11.0.0-next.4, which will should be released on NPM next Wednesday.

When it’s released you can test it by updating your application to use the pre-release version using the below command

ng update @angular/cli -—next

7reactions

alan-agius4commented, Sep 3, 2020

The documentation in https://github.com/angular/angular-cli/wiki is for Angular CLI version 1 - 6 and hence the reason why that documentation is deprecated and no longer maintained. We’ll be removing this documentation in the coming weeks because it’s no longer relevant in many cases.

At the time we created the new documentation, we felt that it’s best not to provide documentation for 3rd party solutions.

That being said, maybe we can offer a simple documentation on how to use HMR for most usecases or a schematic for some basic use cases when https://github.com/angular/angular/pull/37474 API is public. Where eventually users will be able to enhance if they use state management libraries.

I also think that in many cases the below should suffice: (Un-tested)

import { enableProdMode, ɵresetCompiledComponents } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

if (environment.production) {
  enableProdMode();
}

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

platformBrowserDynamic().bootstrapModule(AppModule);