Lazy loading module (on-demand loading)

```
ng g module <module name> --route <lazy route path> --module <parent module name>
ng g m about --route about --module app

```

const routes: Routes = [
 {path: 'home', component: HomeComponent},
 {path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule)},
 {path: 'content', component: ContentComponent},
];

This lazy load method will lead to high latency when navigating across pages.

We can use 'Bundle Preloading' to pre-load the module. (More detail in next point)

ngx-quicklink:

• Detects when the router links is visible in the viewport
• Wait until the browser is idle
• Prefetches the lazy modules

npm i ngx-quicklink --save

app.module.ts

import { QuicklinkModule } from 'ngx-quicklink

@NgModule({
  ...
  imports: [
    QuicklinkModule,
    ...
  ],
  ...
})
export class AppModule {
}

app-routing.module.ts

...
import { QuicklinkStrategy } from 'ngx-quicklink';

...

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

ng add @angular/fire // install firebase tool

This project was generated with Angular CLI version 9.1.10.

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.