When user navigates to the lazy loadable section of the application then the router has to fetch the required module from the server which can take time. In this case Preloading is a very helpful concept, in this router downloads or preloads the lazy loadable module asynchronously in background.
This speed up the load time of angular applications.
Preloading can be done in 4 steps;
1. Initial Load where all the necessary components load to bootstrap the application.
2. Bootstrap where application initializes with required modules.
3. Preloading, in this router, preloads modules in background while app is running and user interacts with the application.
4. Now once the preloading is done user clicks on lazy loadable module where navigation is instant and fast.
To enable preload, we can pass a preloading strategy into forRoot. Angular provides two inbuilt strategies –
- NoPreloading — This is default behavior i.e. no module will be preloaded.
- PreloadAllModules — All modules will be preloaded as fast as possible.
In PreloadAllModules, we can start by adding a data object to the route’s config:
import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadingStrategy } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { RegisterComponent } from './register/register.component';
import { CustomPreloadingStrategy } from './register/custom-preloading-strategy';
const routes: Routes = [{
path: "",
redirectTo: "/login",
pathMatch: 'full'
},
{
path: 'login',
component: LoginComponent
},
{
path: 'home',
component: HomeComponent
},
{
path: 'register',
loadChildren: "./register/register.module#RegisterModule",
data:{preload:true}
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy : CustomPreloadingStrategy } )],
exports: [RouterModule],
providers: [CustomPreloadingStrategy]
})
export class AppRoutingModule { }
this data object has two boolean properties:
· preload — To preload module or not
· delay — To preload module with some delay
Now we will create CustomPreloadingStrategy class, in which there is a preload method which takes two parameters: a route and the function that actually does the preloading. In it we check if the preload property is set to true. And if it is true then we will call the load function.
import { Observable, of, observable } from 'rxjs';
import { PreloadingStrategy, Route } from '@angular/router';
import { Injectable } from '@angular/core';
@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
console.log('preload called');
return load();
} else {
console.log('no preload');
return of(null);
}
}
}
The first parameter is the active Route. We use this to extract the information about the route, which is being loaded.
The second parameter is Observable function, which we need to return if we want to preload this module. We can return Observable of null, if we do not want to preload the module.
Finally, we need to enable the strategy by passing it to the provider and to RouterModule.forRoot.
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy : CustomPreloadingStrategy } )],
exports: [RouterModule],
providers: [CustomPreloadingStrategy]
})
export class AppRoutingModule { }
