Angular Lazy Loading

In this article, you will learn how to implement lazy loading in Angular.

Introduction

 
Angular lazy loading allows the Angular components and their content load asynchronously. Lazy loading is useful in Web applications that are loading heavy content such as images to load later while page continues to render. It creates better user experience and user don't wait for content to be render and seen.
 
In this article, we will learn how lazy loading works and implemented in an Angular application.
 
Step 1
 
Create an Angular project setup using the below commands or howevern you create your Angular app.
 
Angular Lazy loading
 
Once successfully create a sample project that project has some default application structure.
 
Step 2
 
Create parent and child modules for this project. Here I create Module1, Module2, and Module3.
 
Angular Lazy loading
 
Step 3
 
The app.module.ts is the root module of the project. Every Angular application has at least one module. app.module then initially calls app.components and app.route.modules. 
 
Angular Lazy loading 
  1. import {  
  2.     BrowserModule  
  3. } from '@angular/platform-browser';  
  4. import {  
  5.     NgModule  
  6. } from '@angular/core';  
  7. import {  
  8.     AppRoutingModule  
  9. } from './app-routing.module';  
  10. import {  
  11.     AppComponent  
  12. } from './app.component';  
  13. @NgModule({  
  14.     declarations: [  
  15.         AppComponent,  
  16.     ],  
  17.     imports: [  
  18.         BrowserModule,  
  19.         AppRoutingModule, ,  
  20.     ],  
  21.     providers: [HttpserviceService],  
  22.     bootstrap: [AppComponent]  
  23. })  
  24. export class AppModule {}  
Angular Lazy loading 
 
Step 4
 
The main app.routing.module.ts file have to mention parent and child routing path. Here have mentioned to load children method to load the childv(lazy) feature module. Here address path module3 is the lazy module.
  1. import {  
  2.     NgModule  
  3. } from '@angular/core';  
  4. import {  
  5.     CommonModule  
  6. } from '@angular/common';  
  7. import {  
  8.     Module1Component  
  9. } from './module1/module1.component';  
  10. import {  
  11.     Module2Component  
  12. } from './module2/module2.component';  
  13. import {  
  14.     Routes,  
  15.     RouterModule  
  16. } from '@angular/router';  
  17. const routes: Routes = [{  
  18.     path: '',  
  19.     redirectTo: 'Module1',  
  20.     pathMatch: 'full'  
  21. }, {  
  22.     path: 'Module1',  
  23.     component: Module1Component  
  24. }, {  
  25.     path: 'Module2',  
  26.     component: Module2Component  
  27. }, {  
  28.     path: 'Module3',  
  29.     loadChildren: './module3/module3.module#Module3Module'  
  30. }, ]  
  31. @NgModule({  
  32.     declarations: [Module1Component, Module2Component],  
  33.     imports: [  
  34.         CommonModule,  
  35.         RouterModule.forRoot(routes),  
  36.     ],  
  37.     exports: [RouterModule]  
  38. })  
  39. export class AppRoutingModule {} 
Angular Lazy loading
 
Step 5
 
app.component.ts is a root component file of our application. A component file refers to a template app.component.html.
 
App.component.html file defins the navigation.
  1. <div>  
  2.    <a routerLink="/Module1" >Menu-1</a> |  
  3.    <a routerLink="/Module2" >Menu-2</a> |  
  4.    <a routerLink="/Module3" >Menu-3</a>  
  5.    <router-outlet></router-outlet>  
  6. </div>  
Angular Lazy loading
 
Here three menu related to having unique route path that we had mentioned in the app.routing.module file.
 
Step 6
 
Here, I have set the default path in our application to “module1”. When the app will run first time, it will start with module1.
  1. const routes: Routes = [{  
  2.     path: '',  
  3.     redirectTo: 'Module1',  
  4.     pathMatch: 'full'  
  5. }, {  
  6.     path: 'Module1',  
  7.     component: Module1Component  
  8. }, {  
  9.     path: 'Module2',  
  10.     component: Module2Component  
  11. }, {  
  12.     path: 'Module3',  
  13.     loadChildren: './module3/module3.module#Module3Module'  
  14. }, ]  
Angular Lazy loading
 
Step 7
 
Every module mention writes a simple text message in the template file such as “Menu-1 works!”, ”Menu-2 works!”, and ”Menu-3 works!”.
 
Step 8
 
Create module3.module.ts like another modules that were created previously. 
  1. import {  
  2.     NgModule  
  3. } from '@angular/core';  
  4. import {  
  5.     CommonModule  
  6. } from '@angular/common';  
  7. import {  
  8.     Routes,  
  9.     RouterModule  
  10. } from '@angular/router';  
  11. import {  
  12.     Module3Component  
  13. } from './module3.component';  
  14. const routes: Routes = [{  
  15.     path: '',  
  16.     component: Module3Component  
  17. }, ]  
  18. @NgModule({  
  19.     declarations: [Module3Component],  
  20.     imports: [  
  21.         CommonModule,  
  22.         RouterModule.forChild(routes)  
  23.     ]  
  24. })  
  25. export class Module3Module {}  
Angular Lazy loading
 
Here the default routing is module3, RouterModule forChild(routes) is set. 

When I run the application, app.module and app.components will be loaded. It will open the page with menu and then lazy load other components.

The final UI looks like the following. By default, Menu-1 is loaded but when you click on Menu-2 and Menu-3, the app will lazy load the respective components.
 
Angular Lazy loading
 
Angular Lazy loading 
 
Angular Lazy loading
 
I hope this article was helpful to you.