Module Preloading In Angular

Preloading in Angular is a strategy to load required module immediately once the initial module gets loaded into browser. Preloading helps to reduce loading delay which may arise during loading individual module. Also it will not increase view render time as other module js files will be loaded once the main module get loaded into browser so it retains the advantage of lazy loading. This blog will be the continuation of my previous angular blog  Module Lazy Loading in Angular . For default preloading strategy we will use PreloadAllModules of @angular/router package.

app.module.ts

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

After importing PreloadAllModules in app module now update the existing RouterModule.forRoot with below code (For code please refer to module lazy loading blog, link specified above)

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

 This code is enough for default lazy loading. It is possible to customerise preloading, We can lazy load some modules and preload other modules . For customerisation purpose we will use  PreloadingStrategy module  of @angular/router package. Custom preloading code is as below:

app.custom.preloading.ts

import { Observable } from 'rxjs/Rx';
import { PreloadingStrategy, Route } from '@angular/router';

export class CustomPreloading implements PreloadingStrategy {
  preload(route: Route, preload: Function): Observable<any> {
    if (route.data && route.data.preload) {
      return preload();
    } else {
      return Observable.of(null);
    }
  }
}

In if condition we have passed route.data.preload , The value for this will be available through routes.

Now you have to import CustomPreloading in app module.

import { CustomPreloading } from './app.custom.preloading';

....

....

imports: [
  RouterModule.forRoot(routes,{ preloadingStrategy: CustomPreloading })
],
providers: [CustomPreloading],

In your existing route add: data: {preload: true} for preloading specific module

import { Routes } from '@angular/router';

export const routes: Routes=[
  {
    path:'',
    redirectTo:'buyer',
    pathMatch: 'full',
  },{
    path:'admin',
    loadChildren:'./admin-module/admin.module#AdminModule',
    data: {preload: true}
  },{
    path:'buyer',
    loadChildren:'./buyer-module/buyer.module#BuyerModule',
  },{
    path:'seller',
    loadChildren:'./seller-module/seller.module#SellerModule'
  }
]

Based on above code buyer module will be loaded first and after that admin module will be loaded . seller module will be loaded on demand.

Below is the GIF image shows the working of module preloading. Buyer and admin module javascript file are already loaded and when clicked on seller link, seller module javascript file is loaded into browser.