[Angular 8] Custom Route Preloading with ngx-quicklink and Angular

In a previous lesson we learned about implementing a custom preloading strategy. That gives you a lot of control over which route to preload and which not, whether it is based on the user's permissions or some runtime app config. In this lesson we're using ngx-quicklink, a library that drastically simplifies the custom preloading, by automatically loading all visible links on the page.

 

Install:

npm install --save ngx-quicklink

 

Load the module:

import { QuicklinkStrategy, QuicklinkModule } from 'ngx-quicklink';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule,
    MatSidenavModule,
    BrowserAnimationsModule,
    QuicklinkModule,
    RouterModule.forRoot(
      [
        {
          path: '',
          component: HomeComponent
        },
        {
          path: 'nyan',
          loadChildren: () =>
            import('./nyan/nyan.module').then(m => m.NyanModule)
        },
        {
          path: 'about',
          loadChildren: () =>
            import('./about/about.module').then(m => m.AboutModule)
        }
      ],
      {
        preloadingStrategy: QuicklinkStrategy //PreloadAllModules
      }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})