Using Preloading Strategy for User Experience

Preloading Strategy is a technique used for loading required modules right after the initial component is loaded.

In the case of Lazy Loading, the required module is only loaded when a specific route is activated which will take some time to load the module. Preloading Strategy removes the problem of lazy loading by loading the required module right after initial modules(AppModule..) are loaded.

Let's suppose we have a module EmailModule which needs to be loaded right after the AppComponent is loaded. Let's see how this can be achieved in Angular from scratch.

step 1: create a new project

ng new preloading-strategy --routing

- -routing: This creates a separate file named preloading-strategy-routing.module.ts to store the NgModule's routes. The file includes an empty Routes object that you can fill with routes to different components and NgModules

step 2: create a EmailModule

ng g m email --routing

step 3: create EmailList & EmailModule Component

ng g c email-list --module=email ng g c email-detail --module=email

--module
This tells the angular app to attach the component to the Email Module.EmailList Component and EmailDetail Component is added to the declartions array of the EmailModule.

step 4: create a path to the email module

under app-routing.module.ts

const routes: Routes =
  [{
    path: 'email',
    loadChildren: './email/email.module#EmailModule'
  }];

step 5: create a module which implements PreLoadingStrategy

create a file custom-preload.module.ts under app folder

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

export class CustomPreload implements PreloadingStrategy {  

preload(route: Route, load: Function): Observable<any>{         
return route.data && route.data.preload ? load() : of(null);    

} }

This tells angular to load the data whose route.data.preload is true after Main Component are loaded

step 6: add customPreload in the app-routing.module.ts under NgModule

@NgModule({
  imports:[
    RouterModule.forRoot(routes,
      { preloadingStrategy: CustomPreload})
  ],
  exports:[
    RouterModule
  ]
})

we added {preloadingStrategy: CustomPreload}

step 7: add preload: true in the routes Array  under app-routing.module.ts

const routes: Routes =
  [{
    path: 'email',
    loadChildren: './email/email.module#EmailModule',
    data: { preload: true }
  }];

We added preload:true under data object
Note: We added preload: true since in the customPreload Module we check for route.data.preload.

step 8:start your project using ng serve command

In the network tab click on JS tab ,

You can see right after main.js is loaded EmailModule is loaded automatically.

Conclusion:
In situations where we know, the user is going to a certain module after the page is loading. Preloading is an effective technique for faster page loading and better user experience.

Link to the project : https://github.com/rohitsthaa/preloading-strategy