Lazy loading in Angular with example

Introduction:

On this article we are going to see about lazy loading idea in Angular with an instance in your understanding.

Lazy loading:

As an alternative of loading all of the modules and parts in an software it permits solely chosen module and parts to load thus decreasing the loading time. Lazy loading characteristic hundreds parts, modules, and different recordsdata of Angular software solely when required. This idea is utilized in advanced and bigger purposes. Lazy loading idea makes an software very quick and makes use of much less reminiscence.

Allow us to see one instance on this lazy loading,

Eg:

We’ll begin by creating a brand new Angular software for straightforward understanding,

Step-1 : Open a command immediate or terminal. Create a brand new undertaking,

> ng new LazyDemo
Enter fullscreen mode

Exit fullscreen mode


make sure that to permit routing when creating new undertaking or you may merely use the command : > ng new LazyDemo — routing

> cd LazyDemo
Enter fullscreen mode

Exit fullscreen mode

Step-2 : Create 3 parts or any numbers of your alternative only for demo goal I’m creating 3 parts,

> ng generate part Number1
  ng generate part Number2
  ng generate part Number3
Enter fullscreen mode

Exit fullscreen mode

create 3 components

Step-3 : Create respective module recordsdata in every of the part folders,

> Number1.module.ts
  Number2.module.ts
  Number3.module.ts
Enter fullscreen mode

Exit fullscreen mode

Now our file/folder construction will appear like this,
Folder structure
Step-4 : Create a respective router module file in every part folder,

> Number1-routing.module.ts
  Number2-routing.module.ts
  Number3-routing.module.ts
Enter fullscreen mode

Exit fullscreen mode

Number1-routing.module.ts
Step-5 : Import the Router Module in the primary software module app.module.ts,

import { AppRoutingModule } from './app-routing.module';
imports: [
  BrowserModule,
  AppRoutingModule
],
Enter fullscreen mode

Exit fullscreen mode

Since now we have enabled routing at starting will probably be already imported in app.module.ts, In case you neglect to use routing at starting you may add this, in any other case you may skip this step.

Step-6 : Add the code in their very own routing modules, Add following code in Number1-routing.module.ts,

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number1Component } from "./number1.part";
const routes: Routes = [
    { path:"", component: Number1Component }
];
@NgModule({
    exports: [RouterModule],
    imports:[RouterModule.forChild(routes)]
})
export class Number1RouterModule{}
Enter fullscreen mode

Exit fullscreen mode

Right here as an alternative of forRoot we known as forChild as these are little one modules which might be known as in app’s principal routing module.
Image description
Equally add the codes in Number2-routing.module.ts and Number3-routing.module.ts.

In Number2-routing.module.ts add the next codes,

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number2Component } from "./number2.part";
const routes: Routes = [
    { path:"", component: Number2Component }
];
@NgModule({
    exports: [RouterModule],
    imports:[RouterModule.forChild(routes)]
})
export class Number2RouterModule{}
Enter fullscreen mode

Exit fullscreen mode

In Number3-routing.module.ts add the next codes,

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { Number3Component } from "./number3.part";
const routes: Routes = [
    { path:"", component: Number3Component }
];
@NgModule({
    exports: [RouterModule],
    imports:[RouterModule.forChild(routes)]
})
export class Number3RouterModule{}
Enter fullscreen mode

Exit fullscreen mode

In Number1.module.ts add following code,

import { NgModule } from "@angular/core";
import { Number1RouterModule } from "./Number1-routing.module";
import { Number1Component } from "./number1.part";
@NgModule({
    declarations:[Number1Component],
    imports:[Number1RouterModule],
    suppliers: []
})
export class Number1Module{
}
Enter fullscreen mode

Exit fullscreen mode

number1.module.ts
Equally add identical within the different two recordsdata Number2.module.ts and Number3.module.ts,

In Number2.module.ts add the next code,

import { NgModule } from "@angular/core";
import { Number2RouterModule } from "./Number2-routing.module";
import { Number2Component } from "./number2.part";
@NgModule({
    declarations:[Number2Component],
    imports:[Number2RouterModule],
    suppliers: []
})
export class Number1Module{
}
Enter fullscreen mode

Exit fullscreen mode

In Number3.module.ts add the next code,

import { NgModule } from "@angular/core";
import { Number3RouterModule } from "./Number3-routing.module";
import { Number3Component } from "./number3.part";
@NgModule({
    declarations:[Number3Component],
    imports:[Number3RouterModule],
    suppliers: []
})
export class Number3Module{
}
Enter fullscreen mode

Exit fullscreen mode

Step-7 : Outline Routes utilizing loadChildred attribute in app’s principal routing module. In principal app-routing.module.ts add the next code,

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
  {
    path: 'number1',
    loadChildren: () => import('../app/number1/Number1.module').then(x => x.Number1Module)
 },
 {
  path: 'number2',
  loadChildren: () => import('../app/number2/Number2.module').then(x => x.Number2Module)
},
{
  path: 'number3',
  loadChildren: () => import('../app/number3/Number3.module').then(x => x.Number3Module)
},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  suppliers:[]
})
export class AppRoutingModule { }
Enter fullscreen mode

Exit fullscreen mode

On your reference, https://stackoverflow.com/a/70354559/16487734
app-routing-module
We’ll outline little one modules in loadChildren attribute defining imports and every impartial module’s identify and its path.

Step-8 : Add routing hyperlinks to Route HTML web page, In app.part.html add the next,

<!--The content material under is simply a placeholder and may be changed.-->
<div type="text-align:heart">
  <h2>
    {{ title }}
  </h2>
  <button><a [routerLink]="['/number1']" routerLinkActive="router-link-active" >Quantity One</a></button><span></span>
  <button><a [routerLink]="['/number2']" routerLinkActive="router-link-active" >Quantity Two</a></button><span></span>
  <button><a [routerLink]="['/number3']" routerLinkActive="router-link-active" >Quantity Three</a></button>
</div>
<router-outlet></router-outlet>
Enter fullscreen mode

Exit fullscreen mode

Now run the appliance utilizing ng serve

Output:
Image description
You’ll be able to verify the working of this lazy loading by inspecting, To take action, press Ctrl+shift+I. Now underneath Networks tab you may see the parts are usually not loaded initially.
output
Now in case you click on on to Primary part button, that part alone will get loaded,
component one

For those who click on on Quantity two part buttton, that part will get loaded,
component two
Abstract:

It really reduces the reminiscence occupied by loading solely the required sources and it’s utilized in massive purposes. Parts are loaded after we click on on the hyperlink, they aren’t loaded on software initialization or app begin. I hope this text can be useful for you with instance and easy definitions.

                      **Thanks! 😎**
Enter fullscreen mode

Exit fullscreen mode

Add a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Join us on Social Media

Facebook Twitter Youtube