Step by Step Guide on Lazy Loading in Angular 11
0 likes159 views
This document provides a tutorial on implementing lazy loading in Angular. It explains that lazy loading loads components only when their routes are activated, improving performance. It then demonstrates how to set up lazy loading through creating a module, routing file, component, and using the loadChildren property. Verification of lazy loading is shown through separate bundles being generated for lazy loaded modules.
![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](https://image.slidesharecdn.com/acompletetutorialonlazyloadinginangularv111-210315083142/85/Step-by-Step-Guide-on-Lazy-Loading-in-Angular-11-11-320.jpg)
![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 { }](https://image.slidesharecdn.com/acompletetutorialonlazyloadinginangularv111-210315083142/85/Step-by-Step-Guide-on-Lazy-Loading-in-Angular-11-14-320.jpg)
Step by Step Guide on Lazy Loading in Angular 11
- 1. A Complete Tutorial on Lazy Loading in Angular v11 www.bacancytechnology.com
- 2. 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
- 3. Introduction
- 4. 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!
- 5. What is Lazy Loading in Angular?
- 6. 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.
- 8. 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.
- 10. 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
- 11. 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
- 12. 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
- 13. It’s time to set up the route in lazy-loading- routing.module.ts. lazy-loading-routing.module.ts Setting up the route
- 14. 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 { }
- 15. Watch it being lazily load
- 16. 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.
- 17. How to verify Lazy loading in Angular?
- 18. 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 –
- 19. 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 –
- 21. 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