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.
  1. import { LazycomponentoneComponent } from './lazycomponentone/lazycomponentone.component';  
  2. const routes: Routes = [  
  3.    {path:'home',component:LazycomponentoneComponent},  
  4. ];  
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,
  1. const routes: Routes = [  
  2.    {path:'child',component:LazyComponenttwoComponent},  
  3. ];  
Now we can export for app routing,
  1. import { NgModule } from '@angular/core';  
  2. import { Routes, RouterModule } from '@angular/router';  
  3. import { LazyComponenttwoComponent } from '../lazy-componenttwo/lazy-componenttwo.component';  
  4. const routes: Routes = [  
  5.    {path:'child',component:LazyComponenttwoComponent},  
  6. ];  
  7. @NgModule({  
  8.    imports: [RouterModule.forChild(routes)],  
  9.    exports: [RouterModule]  
  10. })  
  11. 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.
  1. const routes: Routes = [  
  2.    {path:'home',component:LazycomponentoneComponent},  
  3.    {path:'second',loadChildren:()=>import('./lazymodule/lazymodule.module').then(loads=>loads.LazymoduleModule)}  
  4. ];  
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.

Recommended Ebook

Angular 7 - For Beginners

Download Now!
Similar Articles