DEV Community

loading...

A Complete Guidance on Lazy Loading in Angular 11

Bacancy Technology
A Leader in Agile and Lean Software Development
・2 min read

Introduction

A couple of days back, we already share an article about Angular routing in Angular v11. In that article, we share step-by-step guidance for Basic Angular Routing and Nested Routing with params with Github repository.

Here, I would like to suggest you read that article before learning about Lazy loading in Angular, which helps you revise the fundamentals.

I hope you read that article and get all the precise information. So, let’s be enthusiastic about implementing and learning Angular Lazy Loading!

What is Lazy Loading in Angular?

If you ever work on any front-end frameworks in your professional journey, you unquestionably come across the term lazy loading. The idea behind it is similar irrespective of various frameworks.

Lazy loading - it’s the technique that allows you to load javascript components only when routes are active or hit. If you ever use Lazy loading, you will realize that it increases your application’s speed and performance.

Why we need Lazy Loading?

When you develop any web application, we only want to load those routes UI is being displayed. Don’t be confused; let’s understand with an example, If I am on any website’s home, I would not like it if the website suddenly loads different pages.

Alt Text

If you have websites with few pages, you might not take Lazy loading seriously. Still, Lazy loading will be more accurate and perform well in quite large websites. For that purpose, I would rather lazily load the components.

Now let's understand the steps to apply Lazy Loading to your web application one by one.

  • Create a module and separate routing file
  • Create a component
  • Adding Link to Header
  • Lazy Loading with loadChildren
  • Setting up the route

You might have successfully implemented lazy loading, but verifying the implementation is a must needed. We at bacancy technology share an article on Angular routes lazy loading, which will help you understand everything in good depth with example. I will suggest you read our article and get insight into full knowledge about Angular routes lazy loading.

Discussion (0)

Forem Open with the Forem app