Lazy Loading in Angular 9
Lazy loading significantly helps with application performance, namely: Response Time and Resources Consumption. Lazy loading speeds up an application load time by splitting it into multiple bundles and loading them on demand instead of loading all the components at once when a page is loaded.
Getting started
To implement lazy loading, create an Angular app with multiple components and their routes. For example, Home component, Workflow and Explain. Assuming home component as the index page, the workflow and explain components will be lazy load components and will have their own feature modules.
- In an existing Angular project, generate modules for the lazy load components:
Ex: ng g m workflow — routing
ng g m explain — routing
2. Configure the routes in workflow.routing.module.ts by inserting objects inside the routes array:
The routes: Routes array takes an object with 2 properties: path, component and canActivate in case you are using auth guard
// src/app/workflow/workflow.routing.module.ts (similarly for explain component)
…
import { WorkflowComponent } from “./workflow.component”;
import { AuthGuardService as AuthGuard } from ‘../auth/auth-guard.service’;
const routes: Routes = [
{
path: “”,
component: WorkflowComponent,
canActivate: [AuthGuard]
}
]
…
[Note: Empty path denotes default/index page]
3. Set up the Workflow Module
// workflow/workflow.module.ts
…
import { WorkflowComponent } from ‘./workflow.component’;
// import all your shared modules and directives here
import { SharedModule } from ‘../../shared/shared.module’;
@NgModule({
declarations: [WorkflowComponent],
imports: [
CommonModule,
WorkflowRoutingModule,
SharedModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class WorkflowModule { }
4. Set up the parent module: app.module.ts. [Note: remove import of lazy load components in app.module.ts and import them in loadChildren as shown below]
// src/app/app-routing.module.ts
…
import { HomeComponent } from ‘./home/home.component’;
import { Routes, RouterModule } from ‘@angular/router’;
const routes: Routes = [
{
path: “”,
component: HomeComponent
},
{
path: “explain”,
loadChildren: () => import(‘./explain/explain.module’).then(m => m.ExplainModule)
},
{
path: “workflow”,
loadChildren: () => import(‘./workflow/workflow.module’).then(m => m.WorkflowModule)
}
];
…
[Note:
- loadChildren is how we tell Angular to lazy load a module and leaving path of home component empty denotes it is the default page
- Make a shared component for all reused components (ex: Header and footer) in the project and import all reused modules from a shared module]
Testing: It can be noticed in terminal that Angular generates extra bundles …chunk.js . These are the modules configured that will be loaded on demand. Make sure that the Lazy module is only loaded after clicking the link.
Advantages of Lazy Loading:
- High performance in bootstrap time on initial load.
- Modules are grouped according to their functionality.
- Smaller code bundles to download on initial load.
- Activate/download a code module by navigating to a route.