PreloadingStrategy

[web-dave]

• Generate a preload-delayed class
• Import PreloadingStrategyand Route
• Provide it in your AppMocule
• Implement PreloadingStrategy, preload()
• add some data to your routes
• set preloadingStrategy in routingModule

[web-dave]

generate

  ng g class shared/preload-delayed

[web-dave]

app.module.ts

  providers: [PreloadDelayed],

[web-dave]

preloadDelayed.class.ts

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

export class PreloadDelayed implements PreloadingStrategy {


  preload(route: Route, fn: () => Observable<any>): Observable<any> {

    if (route.data !== undefined) {
      if (route.data.preload) {
        return of(true).pipe(delay(3000),
        flatMap(() => fn()));
      }

    } else {
        return fn();
    }
  }

}

[web-dave]

app-routing.module.ts

   {
    path: 'books',
    loadChildren: () => import('./books/books.module').then(m => m.BooksModule),
    data: {
      preload: true
    }
  }

[web-dave]

app-routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(routes, {preloadingStrategy: PreloadDelayed})],
  exports: [RouterModule]
})
export class AppRoutingModule { }