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.

Sachila Ranawaka · Accepted Answer · 2019-09-09 06:11:00Z

5

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 }
},

answered Sep 9, 2019 at 6:11

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

distante Over a year ago

This looks good. I could probably do the same when the crisis-center module is loaded (load the children modules I mean). Do not I?

julianobrasil Over a year ago

BTW, I've never heard of a data.preload: true option. Are you sure it was working before? The more you live the more you learn. :)

Adrita Sharma · Accepted Answer · 2019-09-09 06:06:34Z

3

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

answered Sep 9, 2019 at 6:06

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related