Last Updated on March 5, 2021
Table of Contents
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.
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.
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.
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 Angularjs developer having experience and expertise in Angular web development.
Expand Your Digital Horizons With Us
Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.
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.