Step By Step Guide To Implement Lazy Loading In An Angular Project

Introduction

 
In this article, you will learn the step-by-step guide to implement Lazy Loading in an Angular Project.
 
Please follow the below steps,
 
Step 1
 
Create a new Angular project,
 
ng new angular-lazy-loading
 
Step 2
 
Create a module and separate routing file named lazy-loading. The purpose of independent routing is to handle all the components associated with angular lazy-loading module.
 
ng g m lazy-loading –routing
 
Step by step guide to implement Lazy Loading in an Angular Project
 
Step 3
 
Create a component named lazy-demo within the lazy-loading module,
 
ng g c lazy-demo
 
Step by step guide to implement Lazy Loading in an Angular Project
 
Step 4
 
Adding a link in the header on whose route we will implement lazy loading.
 
app.component.html
  1. <li class="nav-item">  
  2.    <a class="nav-link" [routerLink]="['/lazy-loading']">  
  3.       Lazy Loading  
  4.    </a>  
  5. </li>   
Step 5
 
Lazy load the component, which will be displayed on the route – /lazy-loading Make necessary changes in app-routing.module.ts. Here we will load the module lazily using loadChildren
 
app-routing.module.ts
  1. {  
  2.    path: 'lazy-loading',  
  3.    loadChildren: () => import('./lazy-loading/lazy-loading.module')  
  4.    .then(m => m.LazyLoadingModule)  
  5. },   
Step 6
 
Set up the route in lazy-loading-routing.module.ts.
 
lazy-loading-routing.module.ts
  1. import { NgModule } from '@angular/core';  
  2. import { RouterModule, Routes } from '@angular/router';  
  3. import { LazyDemoComponent } from './lazy-demo/lazy-demo.component';  
  4. const routes: Routes = [  
  5.  { path: '', component: LazyDemoComponent }  
  6. ];  
  7.  @NgModule({  
  8.     imports: [RouterModule.forChild(routes)],  
  9.     exports: [RouterModule]  
  10. })  
  11. export class LazyLoadingRoutingModule { }  
If the above import option gives error, try like this,
  1. import { LazyDemoComponent } from"E:/Pranam/Git Repository Projects/Angular-Lazy-Loading-Example/src/app/lazy-demo/lazy-demo.component";   
It’s time to run our application.
 
Go to the terminal and execute the “ng serve” command.
 
Step by step guide to implement Lazy Loading in an Angular Project
 
Now go to the browser https://localhost:4200
 
Step by step guide to implement Lazy Loading in an Angular Project
 
Step by step guide to implement Lazy Loading in an Angular Project
 
You will observe that main.js is being served on refreshing the browser. And the Lazy Loading module is loaded only on hitting the route /lazy-loading.
 
Step by step guide to implement Lazy Loading in an Angular Project
 
Step by step guide to implement Lazy Loading in an Angular Project
 

How to verify Lazy loading in Angular?

 
Verify lazy loading in Angular
 
Run the following command to generate build,
 
npm run build
 
And you’ll notice something like this,
 
Step by step guide to implement Lazy Loading in an Angular Project
 
The above image verifies that a separate chunk is generated for the lazy loading module.
 
Another way to verify is to open the dist folder of your project. There you will notice a separate file for the module which uses Lazy Loading.
 
Step by step guide to implement Lazy Loading in an Angular Project
 

Conclusion

 
Advantages
  • Minimizes start-up time of the application.
  • The application consumes less memory because of on-demand loading.
  • Unnecessary request to the server is avoided.
Disadvantages
  • Firstly, the extra lines of code, to be added to the existing ones, to implement lazy load makes the code a bit complicated.
  • Additional code when integrating with JavaScript
  • User experience may be affected. For example, backtracking may not be possible if the page structure is not optimal.
Tips
  • If possible, do not lazy load routes that are most frequently visited by your users.
  • Keep your chunk sizes as small as possible (Only import what you need and keep shared modules as compact as possible).
  • Use router states to show a loader or animation when a lazy loaded route is being fetched so they do not think your application lags. You can even handle cases when fetching the lazy-loaded route fails e.g. Show a toast notification and redirect to a previously loaded route.
Code Repository