Lazy Loading in Angular

---

In the previous blog, we have seen Loading module strategies in angular 11. Which we can use to increase user interaction. So in this blog let’s get in-depth information about Angular 11’s feature Lazy Loading. If you are a beginner in angular then you have lots of questions in your mind: what is lazy loading? Why are we using this lazy loading? How can we implement it in our application? All the questions are covered in this blog.

What is Lazy Loading?

Lazy loading is an optimization technique for a website or web application. Instead of loading the entire web page ( module ) and presenting it as a one-time bulk loading, the main concept of Lazy loading only helps to load the required section ( Module ) and delays the rest, unless it is required by the user.

For Example, 

In the above example, you can see the size of the entire Angular Application is 5MB. Suppose it takes 1 second for each 1MB of the page to be loaded. Therefore if the Eager strategy is used, then the user will have to wait for 5 seconds to load the application. In this scenario, a lazy loading concept is introduced to load the required Module and delays the rest, unless it is required by the user. 

Advantages of Lazy Loading

• Avoidable or Unnecessary code execution is avoided.
• Maximizing the use of time and space resources makes it a cost-effective approach from the point of view of the user.
• Lazy loading reduces time consumption and memory usage thereby optimizing content delivery. As only friction ( module ) of the web page, which is required, is loaded first thus, the time taken to load that module is less and the loading of the rest of the section ( other modules ) is delayed which saves the storage.

Disadvantages of Lazy Loading

• The extra lines of code, to be added to the existing ones, to implement the lazy loading is quite complicated.

How to Implement Lazy Loading in our Application?

To implement lazy loading in your application you need to add some prerequisites which are given below : 

prerequisites 

• Node version 12.0+ is added to the system
• Visual code 
• Angular CLI version 11

Steps for Implementing Lazy loading

Step – 1: Install the latest version of Angular CLI

npm install -g @angular/cli

Step – 2: Install a new angular application

 ng new lazy-loading-example

Step – 3: Navigate into the project root

cd lazy-loading-example

Step – 4: Generate angular module of employee and some components inside employee module

ng generate module employee
    ng g c employee/sign-in
    ng g c employee/employee-details

Step -5: Lazy load using loadchildren property 

In this step, we are using the loadChildren property and it is used instead of components in appRoutingModule.

    import { NgModule } from '@angular/core';
         import { Routes, RouterModule } from '@angular/router';
         const routes: Routes = [
          { 
            path: 'employee', 
            loadChildren: () => import(`./employee/employee.module`).then(
              module => module.BlogModule
               )
          },
         ];
    @NgModule({
              imports: [RouterModule.forRoot(routes)],
              exports: [RouterModule]
    })
    export class AppRoutingModule { }
    

Step -6: setup for the routes

In this step, we are creating one separate employee routing, which will handle the lazy-loading for the component which is associated with it.

ng g m employee/employee --routing

After that, import the components that need to be lazy-loaded for the employee module & pass them in the route array using this we can do separate lazy loading components.Added code inside this employee/employee-routing.module.ts file which is created.

    import { NgModule } from '@angular/core';
        import { Routes, RouterModule } from '@angular/router';
        import { SigninComponent } from '../signin/signin.component';
        import { EmployeeDetailsComponent } from
        '../employee-details/employee-details.component';                                   
        const routes: Routes = [
          { path: '', component: SigninComponent },
          { path: 'employee-details', component: EmployeeDetailsComponent }  
        ];
        @NgModule({
          imports: [RouterModule.forChild(routes)],
          exports: [RouterModule]
        })
    export class EmployeeRoutingModule { }

We defined the routes for employee details and signin components and it is inserted in EmployeeRoutingModule.

Our next step is to import the employee routing module and component in employee.module.ts file. then after injecting the components inside the declaration section.

 import { NgModule } from '@angular/core';
        import { CommonModule } from '@angular/common';
         import { EmployeeRoutingModule } from 
        './employee/employee-routing.module';
         import { SigninComponent } from './signin/signin.component';
        import { EmployeeDetailsComponent } from 
        './employee-details/employee-details.component';
         @NgModule({
          imports: [
            CommonModule,
            EmployeeRoutingModule
          ],
          declarations: [SigninComponent, EmployeeDetailsComponent]
        })
         export class EmployeeModule { }

Conclusion

Lazy loading is a powerful technique in Angular development that significantly enhances the performance and user experience of web applications. By dynamically loading modules, components, and resources only when needed, lazy loading optimizes the initial loading time and reduces the overall bundle size.