Speed up your Angular Application using Lazy Loaded Module

0

How to render Angular application faster using Lazy Loaded Module?

Lazy Loaded Module is a feature of Angular 10 in which your features would be loaded when you navigate for first time. This feature decreases the application bundle transmitted over the user’s browser.

But lazy loading already provided by Angular 8? ?

Yes, the idea of lazy loading already given in Angular 8. But It is now more specific with browser’s API in Angular 10.

Generally, Angular ngModules are eagerly loaded. Whenever the application will load then all the ngModules would be loaded immediately. In the initial phase of project, you will not feel the effect of this traditional behavior. But with the time, when your application would be large and loaded with more features.

Then, you will obviously feel the page load take much as we expected with application. At that situation, lazy loading comes handy for you. It helps to load only required ngModules instead of all.

Speed up your Angular Application using Lazy Loaded Module
How to render Angular application faster using Lazy Loaded Module

I also write an article to fetch large data in Angular application. This article helps you to optimize your angular application in three optimized ways.

Okay, So How can I implement this? ?‍♂️

Before move to code, I want to light up on a concept named Dynamic Import.

According to v8.dev

Dynamic import () introduces a new function-like form of import that unlocks new capabilities compared to static import.

Since import () returns a promise, it’s possible to use async/await instead of the then-based callback style.

The dynamic import API is a promise based standard browser API. It gives us access to the module, from where the module’s class can be called.

Well, now let’s move to the implementation part: ?

Firstly, create an Angular project (I don’t think that I have to tell how to create Angular project using CLI. If you don’t know then sorry please google it.)

Now create a feature module of your functionality.

For this scenario I am creating an admin module. 


After that add children components of feature module.

Now add wings to your component by using loadChildren.

loadChildren is a property of routes’ path to specify the module that needs to be lazy loaded when it’s first navigated to. Update src/app/app-routing.module.ts with below code.


Dynamic import syntax is used with loadChildren for lazy load or can say load at demand.

Now configure routes in features module

As we created two component of admin module above, we have to configuring that routes with our feature’s module. So, now we have to create admin/admin-routing.module.ts file with following code:

What we did in above code?

We create route module for our admin module in which add routes for login and dashboard component. We need to feed the routes to the Angular Router using the forChild() method instead of the forRoot() module.

Now register your AdminRoutingModule in your AdminModule

Add admin routing module in src/app/admin/admin.module.ts as given in following code:


That’s it!!!

Today you learn the use of loadChildren property, dynamic import and lazy loaded module. And if you think it’s made a good understanding of this feature modules. Then please share with your friends.

 

0
Summary
Speed up your Angular Application using Lazy Loaded Module
Article Name
Speed up your Angular Application using Lazy Loaded Module
Description
Lazy Loaded Module is a feature of Angular 10 which decreases the application bundle transmitted over the user's browser.
Author
Publisher Name
Das JS
Publisher Logo