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