(Confirmed an issue even with Angular 7).  Let&#39;s get this fixed!  

I&#39;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&#39;s by default set-up to `console.log` every module that is being reloaded, and when I&#39;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&#39;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: &#39;&#39;,
      loadChildren: &#39;./public/home/home.module#HomeModule&#39;
    },
    // ...
    
(just an example to show I am lazy-loading the right way)


Here&#39;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

 

All Hot Module-Replacement Solutions on Gang of Coders

Total of 1 Hot Module-Replacement Solutions

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