Lazy Routes reload whole App

[topaxi]

When I have configured lazy routes in my App, triggering a change hot-reloads the whole App.

Haven't found a way to fix this, but I have found someone with the same problem on Stackoverflow: https://stackoverflow.com/questions/48236160/angular-cli-hmr-with-lazy-loaded-routes-hot-reloads-the-whole-thing

[maxencefrenette]

Just confirming that I'm getting the same issue, which makes hmr completely pointless as all my business features are lazy-loaded.

[ronsc]

same issue

[adzza24]

I am using lazy loading and did manage to get this working. I thought it would not but seems ok after a bit of fiddling. I pretty much followed the guide here: https://theinfogrid.com/tech/developers/angular/enabling-hot-module-replacement-angular-6/

Its quite slow though (not sure if it will be faster than normal live-reload or not yet...), and although it does do the replace without a full reload, it does not persist my model.

[wags1999]

@adzza24, was there any additional steps you had to complete? I followed the same guide, and the whole app still reloads when I make changes to a lazy-loaded module.

[adzza24]

@wags1999 Check if your entire app is reloading - for me, just the lazy route I was on seemed to reload but the app itself was still running. Any data in the route was lost, but app-wide settings were saved. This also caused issues for me with Modals being detected as open globally, when they had been closed in the local route.

I stopped using it in the end because it proved slower than waiting for the app to reload! All in all, I think there is a solid reason that the guys at Angular did not include hot reloading by default! Maybe in a future release they will build in between support for it, but right now its a hack and for large apps its not really a viable solution.

That said, I will post my code here:

~/src/hmr.ts

import { NgModuleRef, ApplicationRef } from '@angular/core';

import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => (ngModule = mod));
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.destroy();
    makeVisible();
  });
};

~/src/main.ts

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

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

import { hmrBootstrap } from './hmr';

import 'hammerjs';

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.production) {
  enableProdMode();
}
if (environment.hmr) {
  if (module['hot']) {
    console.log('HMR enabled');
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR was requested but is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
}
else {
  bootstrap()
    .catch(err => console.log(err));
}

~/src/tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["node"]
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

~/src/environments/environment.hmr.ts

export const environment: Environment = {
  production: false,
  hmr: true,
};

~/angular.json

{
  ...
  "projects": {
    "myApp": {
      ...
      "architect": {
        "build": { ... },
          "configurations": {
            "production": { ... },
            "hmr": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.hmr.ts"
                }
              ]
            }
          }
        },
      }
    },
  },
}

npm script

ng serve --configuration hmr --live-reload true

[topaxi]

I think each lazy loaded module should be a "hot reloading" module aswell. The readme only shows how to do hot reloading on the root module with bootstrap though.

[nguyenbathanh]

I am facing the same issue, this makes it useless.

[JurajMlich]

Not sure what I did different, but it seems to work without a problem for me. I have written a guide how to set it properly, so you might want to check it out - https://medium.com/@jurajmlich/angular-7-hot-reload-ngrx-4b0368c5bf22

[wags1999]

@JurajMlich, the link you provided shows a "Suspended" message. Can you provide a new link?

[JurajMlich]

@wags1999 that's weird... anyway, I made a copy for you:
https://gist.github.com/JurajMlich/f51dd079c5e71c4a8db532b9dfde0ab8

Hope it helps! :)

[wags1999]

I've come up with a solution for using Angular HMR with lazy-loaded components, where each component's module gets lazy-reloaded - without reloading the entire route. It's saved our development team tons of time already, as our Angular solution is fairly large. The time from making a change in source code to the app being usable again on a developer workstation has gone from 18 seconds to 6 seconds.

I hope others can benefit from this solution, so I've setup an example app here:
https://github.com/wags1999/angular-hmr-lazy-components

[twadzinski]

I've come up with a solution for using Angular HMR with lazy-loaded components, where each component's module gets lazy-reloaded - without reloading the entire route. It's saved our development team tons of time already, as our Angular solution is fairly large. The time from making a change in source code to the app being usable again on a developer workstation has gone from 18 seconds to 6 seconds.

I hope others can benefit from this solution, so I've setup an example app here:
https://github.com/wags1999/angular-hmr-lazy-components

Thanks for this! The example code shows how to make it work with a component constructed manually (this.dynamicComponentSvc.createComponent()). Any idea how to make it work if Router is used (which constructs the components internally)? I'm trying to make it work by manually adding the new routes component to the openComponents object, but now sure what to do for outlet. I want to somehow maybe point that to the router outlet...

[haskelcurry]

@wags1999 Thanks for your solution, looks promising!! But I have the same question as @twadzinski . How to make it work with regular router? How exactly did you integrate this solution in your existing large project?

[wags1999]

@twadzinski, @mtuzinskiy, I just updated https://github.com/wags1999/angular-hmr-lazy-components with an example of reloading lazy-loaded routes. It's actually much simpler than reloading dynamically/manually created components - no need to use the dynamicComponentService at all. Check out the new method added in the hmr-module-helper - it essentially just resets the router (so the cached moduleFactoryLoader is released) and then re-navigates to the route. I hope it helps!

[haskelcurry]

@wags1999 First of all, thank you!
I hoped that your solution would possibly help me with the issue that I have -- HMR destroys the state i.e. clears the inputs etc each time -- but unfortunately it didn't help 🙁 The issue is: I have a simple login component. I fill in the inputs with some values. Then I slightly change something in the code (e.g. SCSS or HTML of the component). HMR reloads the component, but the inputs get cleared! To me it ruins the whole idea of HMR, making it equivalent to auto-reload.
I found out that without lazy loading the module, it's not the case: the input values persist.
I hoped that maybe your approach would fix that for lazy loaded modules, too... But it didn't.
I guess I just need to bear with the fact that HMR just works bad with Angular (in most cases).
Anyway, let me thank you again for your great supportive spirit!