Sumedh Meshram

A Personal Blog

Lazy Loading Of Modules In Angular 7

Introduction

 
Lazy Loading is the technique of loading the module or data on demand. It helps us to better the application performance and reduce the initial bundle size of our files. The initial page loads faster and we can also split the application into the logic chunks which can be loaded on demand.
 
Prerequisites
  • Basic knowledge of Angular 2+ version.
  • Basic knowledge of Routing.  

The step-by-step process

 
 
Let us now understand the steps involved in the demo application.
 
Step 1
 
Open the command prompt and write the command for creating a new Angular application. We have an option for routing the module by default.
 
ng new lazyloadingApp
 
Lazy Loading Module in Angular 7 
 
Step 2
 
The application is created successfully. Now, navigate to the application folder and open the application in VS Code.
 
 Lazy Loading Module in Angular 7
 
Step 3
 
Now, create a new routing module file using the given command. Here --flat helps to create only TypeScript file without containing our own folder. 
 
ng generate module app-routing --flat or ng g m app-routing --flat
 
Step 4
 
Now, we are creating two components - home and about - using the below command for demonstration. You can create the components with any name as you like. Here, we are using --module for auto import components to app-routing module.
 
ng g c home --module app-routing
ng g c about--module app-routing 
 
Step 5
 
Now, create one more module file for loading on demand. Let us say the name lazy and create one component file with the named employee using the below command.
 
ng g m Lazy
ng g c Lazy/employee --flat
 
Step 6
 
If the above command creates files successfully, then open the app.routing.ts file and import Routes and RouterModule from the @angular/router.
 
Add one constant for defining your routes with the path and component. Here, we used loadChildren load module on the user's demand.
 
Use RouterModule.forRoot with our routes array.
 
Now, in your app-routing.module.ts file, add the following code snippet.
 
  1. import { NgModule } from '@angular/core';  
  2. import { CommonModule } from '@angular/common';  
  3. import { HomeComponent } from './home/home.component';  
  4. import { AboutComponent } from './about/about.component';  
  5. import { Routes ,RouterModule} from '@angular/router';  
  6.   
  7. const routes :Routes =  
  8. [  
  9.   {  
  10.     path:'',component:HomeComponent  
  11.   },  
  12.   {  
  13.     path:'home',component:HomeComponent  
  14.   },  
  15.   {  
  16.     path:'about',component:AboutComponent  
  17.   },  
  18.     {  
  19.     path:'lazyloading',   loadChildren : './lazy/lazy.module#LazyModule'  
  20.   },  
  21. ]  
  22.   
  23. @NgModule({  
  24.   declarations: [HomeComponent, AboutComponent],  
  25.   imports: [  
  26.     CommonModule,  
  27.     RouterModule.forRoot(routes),  
  28.   ],  
  29.   exports: [RouterModule]  
  30. })  
  31. export class AppRoutingModule { }  
Step 7
 
Open the lazy.module.ts file and define components in routes. Then, use RouterModule.forchild with your child routes array.
 
The following code snippet can be used for lazy.module.ts file.
 
  1. import { NgModule } from '@angular/core';  
  2. import { CommonModule } from '@angular/common';  
  3.   
  4. import { Routes ,RouterModule} from '@angular/router';  
  5. import { EmployeeComponent } from './employee.component';  
  6.   
  7.   
  8. const routes :Routes =  
  9. [  
  10.   {  
  11.     path:'',component:EmployeeComponent  
  12.   }  
  13. ]  
  14. @NgModule({  
  15.   declarations: [EmployeeComponent],  
  16.   imports: [  
  17.     CommonModule,  
  18.     RouterModule.forChild(routes)  
  19.   ]  
  20. })  
  21. export class LazyModule { }  
Step 8
 
Open the app.module.ts file and here, import AppRoutingModule. Your code will look like below.
 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3.   
  4. import { AppComponent } from './app.component';  
  5.   
  6. import {AppRoutingModule} from './app-routing.module'  
  7. @NgModule({  
  8.   declarations: [  
  9.     AppComponent,  
  10.       
  11.   ],  
  12.   imports: [  
  13.     BrowserModule,  
  14.     AppRoutingModule  
  15.   ],  
  16.   providers: [],  
  17.   bootstrap: [AppComponent]  
  18. })  
  19. export class AppModule { }  

Step 9

Now, open the app.component.html file. Here, we need to define the routerLink for navigating the links and using router-outlet tag for loading the HTML templete. 
 
  1.  
  2. <div>
  3. <a routerLink="/home" >home</a>  |     
  4. <a routerLink="/about" >about</a>  |     
  5. <a routerLink="/employeelist" >employee list</a>    
  6. <router-outlet></router-outlet> 
  7. </div>
  8.    
Step 10
 
Now, run the application using the following commands to open in the Chrome browser, enter http://localhost:4200.
Open Developers tool, go to the Network tab.
Here, you can see that when you click the home or about page, they load the initial bundle files and when clicked on employee list link, the lazymodule file is loaded.
Given below is the output image. The first one is an initial load image and the second is lazy module load.  
 
ng serve 
 
Initial loading - 
 
 Lazy Loading Module in Angular 7
Lazy bundles loaded -
 
Lazy Loading Module in Angular 7 
 
 
I have attached the .rar file of this demonstration. If you want the application code, download it. Use the below command for installing node modules.
 
npm install  
  

Summary


In this article, we learned lazy loading of modules in Angular. Thank you for reading. If you have any questions/feedback, please write in the comments section.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading