Almost all of you know that it’s possible in Angular to load modules asynchronously by using Lazy Loading Router feature, you just need to specify special parameter for the state – loadChildren:

[javascript]
{ path: ‘lazy’, loadChildren: ‘./lazy/lazy.module#LazyModule’ }
[/javascript]

and setup child module with RouterModule.forChild method:

[javascript]
const routes: Routes = [
{ path: ”, component: AdminComponent }
];

@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes)
],
declarations: [AdminComponent]
})
export class LazyModule { }
[/javascript]

In most cases you are doing so not to load all the modules at once make “first screen” appearing quicker. But it’s not all folks, you also could preload all your lazy modules when your application base is loaded so: you are showing first screen fast and after load other modules in background to show them immediately when it’s needed. And it’s really usy to setup: for you main RouterModule you add the property preloadingStrategy:

Continue reading →