It is possible to pre load a lazy loaded module in Angular 8?

Question

I know that when a app has a lot of parts and components it is good to separate them into lazy loaded modules so the user does see the app home page fast.

The thing is I have notice that the navigation to an lazy loaded module's component shows some lag between the user interaction (click in the button/menu) and when the component is show (compared with a non lazy loaded component).

Is there a way to pre load a lazy loaded module manually? so lets say the user sees the home screen and if nothing is done in 3 seconds then load some of my critical app modules in the background.

Answer 1

You can use the preload strategy just for one module by setting the data: { preload: true } instead of all the modules using PreloadAllModules .

{
  path: 'crisis-center',
  loadChildren: () => import('./crisis-center/crisis-center.module').then(mod => mod.CrisisCenterModule),
  data: { preload: true }
},

Answer 2

Yes you can use preloadingStrategy

You have to add it like this:

RouterModule.forRoot(appRoutes, {preloadingStrategy : PreloadAllModules } )

Example:

import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const appRoutes: Routes = [
  { path: 'employees', loadChildren: './employee/employee.module#EmployeeModule' },
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, {preloadingStrategy : PreloadAllModules } )],
  exports: [ RouterModule ]
})
export class AppRoutingModule { } 

This is a good Article