Introduction

We have already discussed Angular routing in Angular v11 in the Implement Angular Routing. 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 in Angular?

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.

Angular Lazy Loading

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.

Looking for skilled professionals to develop secure, scalable, and reliable front-end Applications?
Connect with us to hire Angularjs developer to develop a dynamic, user-friendly application exceeding your expectations.

Angular lazy loading 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.

Copy Text
ng g m lazy-loading --routing

Create a component

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

Copy Text
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

Copy Text
< 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

Copy Text
{
   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

Copy Text
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.

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-

Copy Text
npm run build

And you’ll notice something like this –

verify Lazy loading in Angular

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 –

Another way to verify angular lazy loading

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 Angularjs developer having experience and expertise in Angular web development.

Hire Angular Developer to Upscale Your Product

Book A 30 min call

Get In Touch

[email protected]

Your Success Is Guaranteed !

We accelerate the release of digital product and guaranteed their success

We Use Slack, Jira & GitHub for Accurate Deployment and Effective Communication.

How Can We Help You?