Pre Loading lazy Loaded Modules in Angular

Angular provides Eager loading, Lazy loading, and Preloading. Eager Loading loads the everything on initializing which is not a good strategy for large applications as it might be slow down your application. However, in Lazy loading, each module loads on-demand or onClick. so if you switched to another module then again module loads and in case of a heavy module, it might be delayed. so to overcome this issue pre-loading is introduced.

'@angular/router' provides the packages for Preloading that should be imported in AppRoutingModule.

To configure preloading, angular provides a preloadingStrategy property which is used with RouterModules.forRoot in routing.

@ngModule({
imports:[
RouterModule.forRoot(routes,{ preloadingStrategy: PreloadAllModules })
], 
})

NoPreloading — no modules are preloaded, (default behavior)

PreloadAllModules — all the modules are preloaded as soon as possible

A good strategy to load quickly just what is required and load some of the other modules with a small delay. We might know that after the initial load most of the users will go for a specific module, then after everything is loaded we can preload that feature module where we think users might go, or also we can preload all the other modules if we don’t have that many.

Preloading loads the feature modules asynchronously. AppModule will be loaded initially whereas other modules loaded asynchronously. Once we configure PreloadAllModules strategy, then after eager loading modules, Angular searches for the modules applicable for preloading, we will take care that these feature modules are not imported in any other module.

You can also create custom preloading strategy. for this, we need to create a service by implementing Angular Preloading Strategy property in routing modules. to select a module for custom preloading we need to use data property in routing configuration. data can be configured as date { preload: true} for selective feature modules preloading.

[
{
path: 'moduleA',
loadChildren: './moduleA.module',
data: {preload: true}
},
{
path: 'moduleB',
loadChildren: './moduleB.module'
}
]

export class PreloadSelectedModulesList implements PreloadingStrategy {
preload(route: Route, load: Function): Observable<any&gt; {
return route.data && route.data.preload ? load() : of(null);
}
}

The preload method takes two params: first is route and second is the function that actually does the preloading. In this function, we check if the preload property is set to true and if it is, we Call the load function.

So basically,

Preloading is useful to load those features which are in high probability to be visited by a user just after loading the application to provide the consistency or maintain the performance of an application. It can be used for a specific feature or all feature or none. NoPreloading is the default for preloading.