Step by Step Guide on Lazy Loading in Angular 11

Introduction

We have already discussed Angular routing in Angular v11 in the previous blog. In which I have provided a step-by-step guide for Basic Angular Routing and Nested Routing with params with Github repository. Before learning about how to implement Lazy Loading in Angular, I would suggest you to go through that for revising the fundamentals. So, it will be easier for you to understand the angular 11 lazy loading and its implementation.

So, let’s be enthusiastic about implementing and learning lazy loading angular 11!

What is Lazy Loading in Angular?

In case you have worked with any front-end frameworks, then you might have heard the term Lazy Loading. The idea behind it is similar irrespective of various frameworks.

Lazy loading is a technique that permits you to load the javascript components only when their respective routes are active or being hit. It increases the performance and speed of the application by splitting the app into various bundles. As per the user navigation, bundles are being loaded as required.

Why we need Lazy Loading?

Sometimes we want to load only those routes whose UI is being displayed. For example, if I’m on the Home page right now, I would not prefer to load the Marvel Movies page and DC Movies page.

You might not understand the advantage of lazy loading in the website having few pages. Still, this technique will create a more significant difference in performance when the application is quite large. For that purpose, I would rather lazily load the components.

Lazy Loading in angular 11 example: Steps to implement Lazy Loading

Here’s the Github repository where you can find the source code.

Create a module and separate routing file

Create a module and separate routing file named lazy-loading. The purpose of independent routing is to handle all the components associated with angular 11 lazy loading modules.

ng g m lazy-loading --routing

Create a component

Create a component named lazy-demo within the lazy-loading module

ng g c lazy-demo

Adding Link to Header

We will be adding a link in the header on whose route we will implement lazy loading.

app.component.html

< li class="nav-item" >
  < a class="nav-link" [ routerLink ]="[ '/lazy-loading' ]" >
     	Lazy Loading
   < /a >
< /li >

Lazy Loading with loadChildren

Now, we will lazily load the component, which will be displayed on the route – /lazy-loading

Make necessary changes in app-routing.module.ts.
Here we will load the module lazily using loadChildren

app-routing.module.ts

{
   path: 'lazy-loading',
   loadChildren: () =>     import('./lazy-loading/lazy-loading.module')
     .then(m => m.LazyLoadingModule)
},

Setting up the route

It’s time to set up the route in lazy-loading-routing.module.ts.

lazy-loading-routing.module.ts

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

Watch it being lazily load

Thus, we have seen the steps for implementing Lazy loading in Angular. After following the instructions, you’ll see something similar to this (excluding CSS and text)-

You will observe that main.js is being served on refreshing the browser. And the Lazy Loading module is loaded only on hitting the route /lazy-loading.

How to verify Lazy loading in Angular?

The video mentioned above is proof that Lazy loading is working fine. But here are other ways to verify the implemented lazy loading in Angular.

Run the following command to generate build-

npm run build

And you’ll notice something like this –

The above image verifies that a separate chunk is generated for the lazy loading module.

Another way to verify is to open the dist folder of your project. There you will notice a separate file for the module which uses Lazy Loading. Below is the reference image –

Conclusion

So, this was about implementing Lazy loading in Angular from scratch. Many developers choose ngx-loadable for implementing lazy loading in an existing Angular application. If you don’t have an idea regarding it, you can visit this blog- Implement Lazy loading in Angular Web app using ngx-loadable.

Despite providing solutions, it is challenging to follow steps when dealing with large-scale applications or decrease production build size by benefiting from Lazy Loading. At such times, it’s beneficial to take help from experts. If you are looking for a helping hand, contact Bacancy Technology and hire Angular developer having experience and expertise in Angular web development.