Menu
I'm trying to implement Lazy loading into my Angular 8 application but when I use the syntax provided in the official doc, my module gets loaded eagerly.
When I use the syntax that comes with angular 8:
const routes: Routes = [{
path: 'lazy',
// The new import() syntax
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
}];
I get no error but I don't get a new chunk when I build the app, and when navigationg to the module route, nothing appears in the Network tab of chrome. (Although I can navigate to the module just fine)
But if I rewrite it to:
const routes: Routes = [{
path: 'lazy',
// The following string syntax for loadChildren is deprecated
loadChildren: './lazy/lazy.module#LazyModule'
}];
(which is the old syntax) it works fine.
The module in question is definitely not imported anywhere else, the difference in result comes only from changing the syntax.
I'd like to know if there is something I'm missing there. I'm thinking maybe it's my Angular that isn't correctly set up to version 8 (or some other package)
So here's what I have with a ng version:
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.800.4
@angular-devkit/build-angular 0.800.4
@angular-devkit/build-optimizer 0.800.4
@angular-devkit/build-webpack 0.800.4
@angular-devkit/core 8.0.4
@angular-devkit/schematics 8.0.4
@angular/cdk 8.0.0
@angular/cli 8.0.4
@angular/material 8.0.0
@ngtools/webpack 8.0.4
@schematics/angular 8.0.4
@schematics/update 0.800.4
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0
I did try to create a new sample project and managed to get it to work there, but from what I can see, both projects have the same version of everything.
Any idea what could cause the new syntax not to work?
351
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.ItemsModule) } ];
If you want to check how lazy loading works and how lazy loading routing flow, then Augury is the best tool we have. Click on ctrl+F12 to enable the debugger and click on the Augury tab. Click on the router tree. Here, it will show the route flow of our modules.
If you're not sure if lazy loading is working correctly, you can open the Chrome DevTools and check that the images are not loaded until the scroll.
What is Lazy Loading? Lazy loading is the process of loading components, modules, or other assets of a website as they're required. Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well.
After a lot of digging between trying to provide a minimal reproducible example, trying to update all my packages or reinstalling them, and simply digging through all my files and try to find what was wrong, I managed to fix the issue.
I essentially re-upgraded my app to angular 8 as if I was using angular 7 (even tho I was supposedly already using angular 8) using the commands ng update @angular/cli --from 7 --to 8 --migrate-only
ng update @angular/core --from 7 --to 8 --migrate-only as mentionned in this thread
This updated all the old syntax of lazy loading to the new one automatically and on building/serving I could finally see all the chunks for each module
Given that it was fixed with these commands, I believe the issue was with packages/dependencies somewhere.
163
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
