Menu
(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
402
To lazy load Angular modules, use loadChildren (instead of component ) in your AppRoutingModule routes configuration as follows. content_copy const routes: Routes = [ { path: 'items', loadChildren: () => import('./items/items. module'). then(m => m.
This means that a lot of unnecessary libraries or modules might be loaded as well. For a small application this would be okay. But as the application grows the load time will increase if everything is loaded at once. Lazy loading allows Angular to load components and modules as and when they're needed.
Why do we need Lazy Loading in Angular 4? Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles.
To lazy load the component, we will use the import() method inside an async/await function. The above function first clears the container; otherwise, on every click of the button, the new instance of GreetComponent would be added in the container.
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
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
