Web Analytics
  • Culture
      Back
      Agile Mindset

      Agile is not a principal or a method, but it’s an integral part of being Agile that is guided by principles, defined by values and manifested through various practices.

      Bacancy Values

      You add value to your customer when you deliver a product or service that has been designed specifically to solve their problem.

      Bacancy Culture

      Core Team will work as Scrum Team where Team will have quarterly goal to make sure that we run financial, administrative and project management prospective.

  • What we do
      Back
      Product Engineering

      Seize the opportunity to make your product stand out. We enable our clients

      AI & ML

      We automate businesses and optimize processes by deploying smart AI and...

      Blockchain

      Get a full spectrum of blockchain development services from us to bring scalability...

      IOT

      Improve Business Productivity and Efficiency using our high-end IOT professional services...

      Digital Transformation

      We truly become a part of your business by helping you think through the...

  • Who we work with
      Back
      Real Estate

      We can help you uncover the hidden revenue opportunities to showcase your...

      Finance & Insurance

      In the emerging technological environment, we are offering reliable banking and financial...

      Oil & Gas

      Reshape your energy landscape and gain better control by harnessing the best...

      Healthcare

      Utilizing advanced technologies to provide best software, web & mobile development services...

      Travel & Transport

      Manage your logistics and transportation business at the ease of your fingertips...

      Startups

      We can help you to build your MVP with advanced technologies....

  • About Us
      Back
      About

      Agile, A Process Delivering Values & Successful Products

      Blog

      Abstract Technology News Driven by Sources

      Career

      If you are passionate about your career, have creative flair and good craft skills, we want you!

  • Technology
      Back

      Front-End

      AngularJS ReactJS Vue.JS JavaScript Backbone.JS Ember.JS MEAN MERN

      Back-End

      Ruby on Rails Node.JS Golang Laravel PHP Python .NET Yii

      Mobile

      Android iOS React Native Flutter Ionic Kotlin

      CMS & CRM

      Spree Magento Wordpress Drupal Umbraco Woocommerce Salesforce Microsoft Dynamics 365<
      Explore All
  • Talk to Us
Talk to Us
Close
    MENU
  • Culture
    • Agile Mindset
    • Bacancy Values
    • Bacancy Culture
  • What we do
    • Product Engineering
    • AI & ML
    • Blockchain
    • IOT
    • Digital Transformation
  • Who we work with
    • Real Estate
    • Finance & Insurance
    • Oil & Gas
    • Healthcare
    • Travel & Transport
    • Startups
  • About Us
    • About
    • Blog
    • Career
  • Technology
      Front-End
    • AngularJS
    • ReactJS
    • Vue.JS
    • JavaScript
    • Backbone.JS
    • Ember.JS
    • MEAN
    • MERN
    • Back-End
    • Ruby on Rails
    • Node.JS
    • Golang
    • Laravel
    • PHP
    • Python
    • .NET
    • Yii
    • Mobile
    • Android
    • iOS
    • React Native
    • Flutter
    • Ionic
    • Kotlin
    • CMS & CRM
    • Spree
    • Magento
    • Wordpress
    • Drupal
    • Umbraco
    • Woocommerce
    • Salesforce
    • Microsoft Dynamics 365
    • Explore All
  • Contact Us
  • CLOSE
lazy loading in angular

Step by Step Guide on Lazy Loading in Angular 11

Archita Nayak
Archita Nayak Technical Writer
March 5, 2021 4 min read

Last Updated on March 10, 2021

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

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

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.

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.

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

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)-

https://www.bacancytechnology.com/blog/wp-content/uploads/2021/03/video.mp4

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 –

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

Archita Nayak
Archita Nayak View all post
Writer. Developer. Dreamer. Believer. Achiever. My curiosity leads me to learn various technologies, and my love for writing helps me to impart my knowledge for the same. When I am not exploring technologies, I am mostly reading and writing poetry and fictional stories.

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.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !



0 Comments on "Step by Step Guide on Lazy Loading in Angular 11"

Leave a Reply Cancel

Related articles
Angular Routing
AngularJS
Angular 11 Routing Example: How to Implement Basic Angular Routing and Nested Routing With Params
March 1, 2021 by: Archita Nayak
Angular Best Practices
AngularJS
Top 7 Angular Best Practices to Organize Your Angular App
February 5, 2021 by: Archita Nayak
New Angular 11
AngularJS
What’s New in Angular 11? (Highlights of Angular 11 Features)
December 7, 2020 by: Riken Solanki

Top 1% IT Talent

Bacancy Technology is an exclusive hub of top dedicated software developers, UI/UX designers, QA experts, and product managers with an incredibly rare and hidden talents you will ever come across. We let you access the top 1% IT talent from independent software developers to the fully managed teams.

Time Zone Aligned

Timezone is never a constraint when you are working with Bacancy Technology. We follow one very simple principle – our developers and your time zone. Hire dedicated software developers from us and make collaboration in a faraway to work according to your time zone, deadline, and milestone.

Experienced Team

Whether you are looking for skilled developers in emerging technologies or looking for an extended arms to augment your existing team, we can lend a helping hand in both situations. We are a full-stack software development company with 300+ skilled and experienced software developers whom you can hire at your convenience to address the ongoing business challenges

Let us help you build a modern digital business to overcome traditional culture and succeed in the age of digital transformation.

  • USA
  • Canada
  • Australia
  • India
  • UAE
  • Sweden

USA

Bacancy Technology LLC

Florida

4995 NW 72nd Ave, Suite 307 Miami, FL 33166

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Canada

Bacancy Technology Inc

Toronto

71 Dawes Road, Brampton, On L6X 5N9, Toronto

Phone

+1 416 907 6738

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Australia

Bacancy Technology

South Australia

351A Hampstead Rd, Northfield SA 5085

Phone

(02) 8005 8222

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

India

Bacancy Technology Pvt Ltd

Ahmedabad

1207-1210, Time Square, Thaltej-Shilaj Road, Ahmedabad

Pune

2nd Floor, Marisoft-1, Marigold IT Park, Pune

Phone

079- 40037674

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

UAE

Bacancy Technology

Dubai

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

Sweden

Bacancy Technology

Hagersten

Junkergatan 4, 126 53 Hagersten

Phone

+1 347 441 4161

Email

[email protected]

We guarantee 100% security of your information. We will not share the details you provide above with anyone. Your email won't be used for spamming.

How Can We Help?

  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solution
  • Contact Us
DMCA.com Protection Status
Request A Free Consultation