P is quite an extreme approach and might not always be desirable. For instance, you don't want to preload lazy routes a user might not even have access to. Therefore, in this lesson we're going to have a look at how to define a custom preloading strategy in Angular.

custom-preloader.ts:

import { PreloadingStrategy, Route } from '@angular/router';import { Observable, of } from 'rxjs';import { Injectable } from '@angular/core';@Injectable({  providedIn: 'root'})export class CustomPreloader implements PreloadingStrategy {  preload(route: Route, load: Function): Observable
     
       {    if (route.data && route.data['preload']) {      return load();    } else {      return of(null);    }  }}
     

 

import { CustomPreloader } from './custom-preloader';@NgModule({  declarations: [AppComponent, HomeComponent],  imports: [    BrowserModule,    MatSidenavModule,    BrowserAnimationsModule,    RouterModule.forRoot(      [        {          path: '',          component: HomeComponent        },        {          path: 'nyan',          loadChildren: () =>            import('./nyan/nyan.module').then(m => m.NyanModule),          data: {            preload: true          }        },        {          path: 'about',          loadChildren: () =>            import('./about/about.module').then(m => m.AboutModule)        }      ],      {        preloadingStrategy: CustomPreloader //PreloadAllModules      }    )  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule {}