Categories
Angular

Angular PreloadingStrategy

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);
        }
      }
}