Learn About Angular Lazy Loading

Introduction

 

In this article, we are going to learn how the lazy loading module feature helps a heavy or large application. 

 

What is Lazy Loading

 

Lazy loading is a subtlety in Angular that allows loading components asynchronously when a specific route is activated.

 

It improves the speed of application load time by splitting the application into several bundles.

 

When the user navigates through the app, the bundles are loaded as required.

 

Step 1

 

Requirements for the application,

1. NodeJs
2. Angular CLI
3. Visual studios code IDE

Install the Angular CLI by using the following command. If you haven’t installed the CLI, make sure you install the node,

 

npm install -g @angular/cli

 

Step 2 - Create the Components

 

Let's create our component, load for normally,

 

ng g c Lazycomponentone

 

This will generate a folder and it will contain all of our new component files, Lazycomponentone component gets automatically imported into the app module.

 

Once the process is done, we need to add the file into app.routing.ts.

import { LazycomponentoneComponent } from './lazycomponentone/lazycomponentone.component';
const routes: Routes = [
   {path:'home',component:LazycomponentoneComponent},
];

Step 3 - Create LazyLoadmodule and Routing

 

Now we have created one new module and routing, let's use the below CLI command,

 

ng g m Lazymodule

ng g m lazymodule/lazyrouting--routing

 

Now we will create a component that will be the root component for our new lazy-loaded module,

 

ng g c lazyComponenttwo

 

Now, we need to import a new set of routs for lazy module, which will display for lazyComponenttwo,

const routes: Routes = [
   {path:'child',component:LazyComponenttwoComponent},
];

Now we can export for app routing,

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyComponenttwoComponent } from '../lazy-componenttwo/lazy-componenttwo.component';
const routes: Routes = [
   {path:'child',component:LazyComponenttwoComponent},
];
@NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
})
export class LazyRoutingModule { }

Step 4 - Import for lazymodule for appmodule

 

Now, we need to go to app-routing.module.ts file. Add another route for our new lazymodule. Specify the path to the module, followed by the name of the modules class with a hashtag.

const routes: Routes = [
   {path:'home',component:LazycomponentoneComponent},
   {path:'second',loadChildren:()=>import('./lazymodule/lazymodule.module').then(loads=>loads.LazymoduleModule)}
];

Step 5

 

After completing all the above steps, we can run the project using the below commands,

 

Command 

 

ng serve –open (OR) ng serve port –4201

 

Step 6

 

Now, the project will run successfully in a local browser.

 

Summary

 

I hope you understood this overview of Angular CLI and how to add lazy loading.

 

Any feedback or queries related to this article are most welcome.