app-routing.module.ts import { PreloadAllModules } from '@angular/router'; @NgModule({ imports: [ RouterModule.forRoot(routes, { useHash: false, onSameUrlNavigation: 'reload', preloadingStrategy: PreloadAllModules }) ], exports: [RouterModule] }) .
Custom Preloading Strategy
app-routing.module.ts import {CustomPreloadingStrategy} from './customPreloadingStrategy'; import { PreloadAllModules } from '@angular/router'; @NgModule({ imports: [ RouterModule.forRoot(routes, { useHash: false, onSameUrlNavigation: 'reload', preloadingStrategy: CustomPreloadingStrategy }) ], exports: [RouterModule] }) /////////////////////////////////////// { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule), data: { preload: true, delay:10000 } app.module.ts import {CustomPreloadingStrategy} from './customPreloadingStrategy'; @NgModule({ declarations: [ AppComponent ], imports: [ ], providers: [CustomPreloadingStrategy], bootstrap: [AppComponent] }) customPreloadingStrategy.ts -- service import {Injectable} from '@angular/core'; import { PreloadingStrategy, Route } from '@angular/router'; import { Observable, of, timer } from 'rxjs'; import { flatMap } from 'rxjs/operators'; @Injectable() export class CustomPreloadingStrategy implements PreloadingStrategy { preload(route: Route, loadMe: () => Observable<any>): Observable<any> { if (route.data && route.data['preload']) { var delay:number=route.data['delay'] console.log('preload called on '+route.path+' delay is '+delay); return timer(delay).pipe( flatMap( _ => { console.log("Loading now "+ route.path); return loadMe() ; })); } else { console.log('no preload for the path '+ route.path); return of(null); } } }