Angular CLI HMR with Lazy-Loaded routes hot-reloads the whole thing

Question

(Confirmed an issue even with Angular 7). Let's get this fixed!

I'm using HMR as set up here: https://github.com/angular/angular-cli/wiki/stories-configure-hmr from a fresh ng new build.

If I change any component and make it lazy loaded, angular HMR will hot-reload everything, making the page sync slower.

I know this because it's by default set-up to console.log every module that is being reloaded, and when I'm using a lazy route, it logs everything. But when I change that component to non-lazy-loaded, it logs only a few small components.

Therefore, when I'm using HMR and lazy routes, my app takes a few more seconds to refresh. This is annoying.

Is there any way around this?

(Lazy loading routes is accomplished by something like this)

// Main homepage
{
  path: '',
  loadChildren: './public/home/home.module#HomeModule'
},
// ...

(just an example to show I am lazy-loading the right way)

Here's some logging to show what happens when I lazy load the home.component.ts

// Everything here is normal, great!
[HMR]  - ../../../../../src/app/public/home/home.component.html
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.component.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.module.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.routing.ts
// Everything below here is NOT normal, bad!  All this is extra.  These are my modules, yes, but all this needs to be loaded again?
log.js:23 [HMR]  - ../../../../../src/$$_lazy_route_resource lazy recursive
log.js:23 [HMR]  - ../../../core/esm5/core.js
log.js:23 [HMR]  - ../../../platform-browser-dynamic/esm5/platform-browser-dynamic.js
log.js:23 [HMR]  - ../../../common/esm5/common.js
log.js:23 [HMR]  - ../../../platform-browser/esm5/platform-browser.js
log.js:23 [HMR]  - ../../../router/esm5/router.js
log.js:23 [HMR]  - ../../../../../src/app/shared/shared.module.ts
log.js:23 [HMR]  - ../../../common/esm5/http.js
log.js:23 [HMR]  - ../../../../../src/app/features/proxy-http-interceptor/proxy-http-interceptor.ts
log.js:23 [HMR]  - ../../../../../src/app/shared/unauthorized-http-interceptor.ts
log.js:23 [HMR]  - ../../../../../src/app/features/auth/auth.service.ts
log.js:23 [HMR]  - ../../../../../src/app/features/user/user.service.ts
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/index.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwt.interceptor.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwthelper.service.js
log.js:23 [HMR]  - ../../../../@auth0/angular-jwt/src/jwtoptions.token.js
log.js:23 [HMR]  - ../../../../../src/app/shared/container.directive.ts
log.js:23 [HMR]  - ../../../flex-layout/esm5/flex-layout.es5.js
...
...
A ton more logging

Cornaceous

I am seeing this behavior also in an Angular 4.1 CLI project. It pretty much makes HMR useless. Did you ever figure this out? – Confirmation

I never figured this out but give the question a kind upvote so it hopefully gets seen a little more :) let me know if you figured this out, too – Cornaceous

I too have a similar problem with Angular 5.2. With an eager loaded module, it works as I expect, but with a minor change to a sass file of a component in a lazy loaded module, I get an avalanche of updates and state being maintained in my root app.component is lost. I hope I can fix this, otherwise HMR has no benefit. Anyone else have this / solved this? – Renin

same thing here on Angular 5.2.3, HMR is useless as it reloads the app – Enrich

I'm seeing the same behavior on Angular 6.1.9 (CLI 6.2.4). Did anyone find a solution to this? – Radioactivity

I have the same issue with angular 7 – Unknit

I can confirm this in a recently created Angular 7 project. As it is a rather small project I still benefit from HMR (it takes only a few seconds to reload instead of more time to refresh everything), but it would be nice to have an explanation about why it is not working properly. – Debor

#55355633 – Throng

github.com/PatrickJS/angular-hmr/issues/76 – Throng

Answer 1

This angular-cli wiki page is deprecated: https://github.com/angular/angular-cli/issues/14053

Angular-HMR + lazy routes is currently not supported: https://github.com/PatrickJS/angular-hmr/issues/76

For a working and non-trivial solution, have a look to https://github.com/wags1999/angular-hmr-lazy-components

Chandelier

I've previously noticed the "solution" as well, posed here: github.com/wags1999/angular-hmr-lazy-components which is a bit of a cumbersome process. And while I have attempted to implement it in a current project without success, based on the comments I believe it could work on a less complex one. However, due to the aggregate complexity of the "solution" and the overall confusion as to its implementation, I don't believe this can be awarded a "solution" to this SO question. – Cornaceous

Does not work, see here: #55355633 – Throng

Answer 2

Just as a warning to folks getting this issue. I updated angular-cli and hmr stopped working. All it showed is empty page.

Working:

"@angular-devkit/build-angular": "0.10.2",
"@angular/cli": "^7.0.3",
"@angular/compiler-cli": "^7.0.3",

Not working:

"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "~7.0.6",
"@angular/compiler-cli": "^7.1.0",

Prophecy