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!

Hey, I recently tried to run HMR on Angular and it worked fine... before upgrading Angular from 9.0.7 to 9.1.0. I suspect this is related to webpck upgrades even tough these are minor/patch changes:
webpack 4.41.2-> 4.41.6
webpak-dev-server 3.9.0->3.10.3

My symptoms are that the HMR in WDS claims to be working, browser even properly detects HMR changes. The problem is that the changes don't seem to be downloaded.

Before:

After:

I didn't manage to nail down the issue :( Any idea why this could break?

BTW, I know that the last official claim is that HMR in Angular is not supported, but @angular Team, are there any considerations about supporting HMR? Don't you use it internally? :) It's available OOB in Vue, React, Flutter etc.

I found that adding inline=true to webpack-dev-server (recommended for HMR) fixes the problem for me. In my case I've added this in a custom builder:

const {createBuilder} = require('@angular-devkit/architect');
const {executeDevServerBuilder} = require('@angular-devkit/build-angular');

const buildWithPlugins = (options, context, transforms) => {
  const transformsData = transforms || {};
  transformsData.webpackConfiguration = (webpackConfig) => {
    webpackConfig.devServer.inline = true;
    return webpackConfig;
  };

  return executeDevServerBuilder(options, context, transformsData);
};

exports.default = createBuilder(buildWithPlugins);

P.S. This may suggest that HMR entry point may have been removed in a new version of angular, but I'm not sure.

@alan-agius4

After some discussion with the rest of the CLI team, the current way to use HMR with Angular isn't really supported and requires a very specific knowledge of the magic incantations to make work. We also haven't really tested this flow in some time, so how it plays with v9 and Ivy is somewhat unknown.

We definitely want to support HMR better and that will take a good chunk of work. The best way to move forward is probably:

Understand the current state and if/how HMR works with latest Angular.
Update documentation/best practices to explain how to make it work (or clarify that it just won't).
Scope the work needed to get HMR to a good state and plan accordingly.

@alan-agius4, can you (or someone else) take a stab at the first two?

@dgp1130

I really appreciate your answer @dgp1130.

It's worth adding that deprecated HMR solution only reinstantiates the whole app module which is not true HMR. True HMR works on component level and in the best case is able to hot-swap style or template-only changes of a component while preserving its state.

I'd be really interested in following the topics you've listed.

@damienix

I also ran into the issue described by @damienix, and bisecting through my git history pointed to my upgrade from 9.0.7 to 9.1.0 as the cause of the hot reloading no longer working.

I have been using the ngxs/hmr-plugin to get hmr working with angular, and have found it to be a great boon to my productivity as the browser reloads much faster than a full refresh, even if the state is not retained.

I would really like to see an OOB hmr solution for angular in the cli.

@alan-agius4

@alan-agius4 Schematic would be awesome! 👏

@alan-agius4

@alan-agius4 That ɵresetCompiledComponents really does the trick for me, I've just tried it out.
It's not mentioned in "classical" HMR tutorials for Angular, because they are all from pre-Ivy times... actually I see this method for the very first time.
Thank you for the suggestion! Please elaborate 🙂

The ɵresetCompiledComponents will reset the mapping components and NgModules.

Failing to invoke this, will result in an error because the component will be referenced in multiple NgModules, the module instance before the change and the instance after the change.

feat(@angular-devkit/build-angular): out of the box hot module replac…

@alan-agius4

@alan-agius4 I see you closed this ticket with a PR enabling HMR out of the box. Thanks so much for this! This is exactly what I've been looking for. I would just like to ask when can we expect to see this functionality in the CLI?

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

Does it mean it will be true HMR which will e.g. keep the state like in React or Vue or we will still be loosing state even without full page reload?

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

feat(@angular-devkit/build-angular): out of the box hot module replac…

Navigation Menu

Repository navigation

HMR configuration - Live Reload still enabled #17324

19 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

HMR configuration - Live Reload still enabled #17324

Description

Activity

damienix commented on Mar 30, 2020

damienix commented on Mar 30, 2020

dgp1130 commented on Apr 2, 2020

damienix commented on Apr 2, 2020

jadengis commented on Apr 3, 2020

19 remaining items

haskelcurry commented on Sep 3, 2020

haskelcurry commented on Sep 3, 2020

alan-agius4 commented on Sep 7, 2020

jadengis commented on Sep 26, 2020

alan-agius4 commented on Sep 26, 2020

murbanowicz commented on Sep 26, 2020

angular-automatic-lock-bot commented on Oct 27, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions