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

Step 2

The application is created succussfully. Now, navigate to the application folder and open the application in VS Code.

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 name 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 @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.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { Routes ,RouterModule} from '@angular/router';
const routes :Routes =
[
{
path:'',component:HomeComponent
},
{
path:'home',component:HomeComponent
},
{
path:'about',component:AboutComponent
},
{
path:'lazyloading', loadChildren : './lazy/lazy.module#LazyModule'
},
]
@NgModule({
declarations: [HomeComponent, AboutComponent],
imports: [
CommonModule,
RouterModule.forRoot(routes),
],
exports: [RouterModule]
})
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.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes ,RouterModule} from '@angular/router';
import { EmployeeComponent } from './employee.component';
const routes :Routes =
[
{
path:'',component:EmployeeComponent
}
]
@NgModule({
declarations: [EmployeeComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class LazyModule { }

Step 8

Open the app.module.ts file and here, import AppRoutingModule. Your code will look like below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {AppRoutingModule} from './app-routing.module'
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
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.

<div>
<a routerLink="/home" >home</a> |
<a routerLink="/about" >about</a> |
<a routerLink="/employeelist" >employee list</a>
<router-outlet></router-outlet>
</div>

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 laod image and the second is lazy module load.

ng serve

Initial loading -

Lazy bundles loaded -

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.