Step by Step Guide on Lazy Loading in Angular 11

A Complete
Tutorial on
Lazy Loading
in Angular v11
www.bacancytechnology.com

Table of Index
1. Introduction
2. What is Lazy Loading in Angular?
3. Why we need Lazy Loading in Angular?
4. Angular lazy loading example: Steps to
implement Lazy Loading
5. Watch it being lazily load
6. How to verify Lazy Loading in Angular?
7. Conclusion

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 Lazy Loading in Angular, I
would suggest you to go through that for
revising the fundamentals.
So, let’s be enthusiastic about implementing
and learning Angular Lazy Loading!

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.

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.

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
named lazy-loading. The purpose of
independent routing is to handle all the
components associated with angular lazy-
loading module.
ng g m lazy-loading --routing
Create a module and
separate routing file

Create a component named lazy-demo within
the lazy-loading module
ng g c lazy-demo
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>
Create a component
Adding Link to Header

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)
},
Lazy Loading with
loadChildren

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

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 { }

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)-
Video URL:
https://www.bacancytechnology.com/blog/w
p-content/uploads/2021/03/video.mp4?_=1
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 –

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.
Conclusion

Thank You
www.bacancytechnology.com

Step by Step Guide on Lazy Loading in Angular 11

More Related Content

What's hot

Similar to Step by Step Guide on Lazy Loading in Angular 11

More from Katy Slemon

Recently uploaded

In this document

Step by Step Guide on Lazy Loading in Angular 11