Lazy Loading - Angular (Tutorial #29)

Lazy Loading is one of the most important part of angular . Lazy Loading is a technique to load your components and module lazily so that your application's speed can be improve. By default angular loads modules and component using eagerly loading , it means as soon as your application loads it loads all its data, so with this approach your application bundle size increases a lot and due to big bundle size application performance decreases. So Lazy Loading helps us to download the files lazily(some point later)when user actually request it.
Angular implement lazy loading with the help of Featured module. We have already learnt about feature module in our previous video. Please learn about featured module here :
• Featured Module - Angu...
In this video we have also used one google chrome extension Augury
To learn in-dept of angular recommend this book: amzn.to/3f1nf9q
Augury is the most used Developer Tool extension for debugging and profiling Angular applications inside the Google Chrome and Mozilla Firefox browsers.
You can learn more about Augury here:
augury.rangle.io/
We have used Routing in this video. If you have find doubt in Routing. Please watch this video:
• Routing - Angular (Tut...
Subscribe to my channel : / nishasingla
Watch complete playlist here: • Introduction- Angular ...
Follow us on:
Facebook: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0
Website :
Instagram: / passion4code
For more such interesting videos, please subscribe to our channel and stay connected.
If you face any problem in lazy loading then leave a comment below and let me know. I'll be happy to assist you.

[@RZ009]

Amazing explanation !!! You are just awesome. This really helps me. Thank you soo much.

[@NishaSingla]

Glad to help you 👍🏻👍🏻

[@vaishalipawle9833]

Really it's nice and simple to understand. It's request to make more videos on angular.

[@satishsubhashish]

Your Angular videos is really Awesome. I am an experienced Angular ...Still to know more things...i liked all your videos

[@akbees235]

Your angular playlist has been very helpful

[@NishaSingla]

Glad to know it helped you...

[@myvue4587]

Madam awesome video, your way of explanation and concept is a drug to me which I have addicted. Keep on posting, God bless you

[@NishaSingla]

Glad to know it helped 🙏

[@saurabhsrivastava5929]

Oh man... Amazing explanation.. Thank you sooooo much 🥰

[@sivanagarajuchalla8910]

Tqu madam. I am getting more clarity from your videos.

[@NishaSingla]

Keep learning 😀😀

[@vardhamanpatil37]

thank you @nisha singla. practical oriented class of angular

[@NishaSingla]

Thank you 😊

[@Prashant-q9y]

Its just awesome, I wish many more success come to your way. Its look like you're giving the best to share your knowledge.

[@NishaSingla]

Thanks a ton :)

[@rohitbalaji8466]

I have watched your tutorials..Very Crystal Clear Explanation Nisha..

[@NishaSingla]

Thanks much 🙏🙏

[@rohitbalaji8466]

@@NishaSingla ☺☺

[@systemmanager186]

Very nice and clear explanation on this topic

[@NishaSingla]

Thank you 😊

[@deepakmitawa8106]

Very well explained 👍

[@SoftwareMahima2024]

Thank you so much easily understanding

[@NishaSingla]

😀😀

[@prachikhare7759]

Very nice explanation, thanks Nisha

[@NishaSingla]

Thank you so much

[@sohailamjad8755]

Hi nisha ..i just want to say you all angular lecture is mindblowing ..so you please make a video on ngrx ..that would be very helpful

[@abdulaziz7013]

Amazing!!, very simple madam.

[@NishaSingla]

Thanks for watching 🙏

[@gururajmoger8649]

Thanks..it could b greatful if you do some projects by using all these concepts .. reusable ui components👍👌

[@entertainmentofficial3671]

Thanks for one of the best tutorial

[@shravan_731_]

Thanks for the video it helped a lot👍🏼

[@entertainmentofficial3671]

while creating component getting below errors
PS D:\Study\Medical> ng g c page-notfound -is -it
Error: Unknown argument: i

[@ramyasreemanthena2556]

Hii mam I loved your way of explainsion..... before I could do ntg ...now am able to build website..
Please I request you to do vidoe about Shopping cart....how to create dynamically of adding and removing to cart...
Please mam
Thanks in advance

[@NishaSingla]

Glad to know it helped 🤞🏻🤞🏻

[@alokgargalok]

Great explation...

[@Muralikrishna11501]

Great explaination Nisha

[@NishaSingla]

Thank you

[@Muralikrishna11501]

@@NishaSingla Im planning to move to angular from java. Your videos are helping a lot .
Can u share all this code to us plz

[@dileepc.p5313]

Hi Nisha could you please make video on package and package.lock json , bit confusion on it , your explanation makes lifetime remembering the concepts.

[@pramodwayal4207]

Nice tutorial

[@vijendramewada4118]

thankyou for good explain

[@NishaSingla]

Glad it was helpful!

[@snehasingla]

Nice 👍👍👍

[@NishaSingla]

Thank you 😊

[@prakashgiri6820]

Too good..

[@mohammedasif4588]

@Nisha Singla Need your help in Lazy loading implementation i tried like attached but getting some error may be minor mistake please can you help me or any one can help me if they know

[@arunca8636]

very short clear explanation

[@NishaSingla]

Glad you think so!

[@yaronhabot9237]

Many thanks for very clear video.
In Angular 12 I tried { path: 'settings', loadChildren: ./settings/settings.module#SettingsModule'}, but got a runtime error Cannot find module './settings/settings.module'
Resolved it like this:
import {SettingsModule} from './settings/settings.module';
export function getSettingsModule() { return SettingsModule; }
const routes: Routes = [
{ path: 'settings', loadChildren: getSettingsModule},
];

[@NishaSingla]

Hey thanks for sharing your observations.. Its helpful for all 😀👍🏻

[@yuvaraj14598]

1, How to connect Back-end Api in angular .
2, host the angular project.
Post this 2 video madam

[@shivaramkrishna6583]

how we will get augury in the browser developer tools after downloading from chrome extension ..can any one help me please..am able to get up to light house.

[@lifeisbeautiful230]

Hi, I have gone through your Angular tutorial. I want to ask you regarding jwt authentication in Angular. Please provide some information on how to implement Angular + JWT ?

[@sivaprabha9745]

I have a confusion.. why did u include route in .module file for child, why didnt u make routing file for module ? Also for loadChildren why didnt u use .import and then ? Please reply

[@NishaSingla]

Ok , so it was just a single child route so I kept it in module file only … you can keep it separate in route file too … (its just to save time for demo purpose)
And second if you will simply import then its not lazy loading, it would be like other imports … to load module on demand it should load using loadChildren only

[@jagrutiSinkar-nj3it]

hello please share the web API
integration tutorial

[@Awarapuneri]

Does angular lazy loading use to load module lazily or it is used to load particular component from module lazily ?

[@karthikraj2688]

I am getting error
TypeError:load children is not a function
Please tell me how to solve

[@vaibhavsarode2426]

Thank u

[@NishaSingla]

You’re welcome 👍🏻

[@vaibhavsarode2426]

@@NishaSingla Osm Explaination by u , thank u for the video again

[@vaibhavsarode2426]

@@NishaSingla if u have time upload more videos of angular

[@vaibhavsarode2426]

@@NishaSingla osm Expalination

[@NishaSingla]

Thank you 🙏

[@AjayKumar-ud7xm]

Hi, you're videos are really helpful, I have tried to install augury on my chrome, I am getting a 404 error, saying requested url was not found. Can you please help me with this?

[@NishaSingla]

Not sure about exact issue . Can u try once from this url
augury.rangle.io

[@tapsp5845]

​@@NishaSingla it's showing 404 error can u give any solution mam plz

[@NikhilGupta-dq3vm]

Mam, on which version you currently showing demo

[@NishaSingla]

7.3.10

[@TechnicalNikhil808]

Cool

[@NishaSingla]

Thank you

[@TechnicalNikhil808]

Please send me notes

[@willyblord794]

what about RoleGuard

[@hydrogoalpicker1542]

Madam... I need angular and ng material training on online basis... Wil u give me training?

[@kirthiramakrishna393]

Augury is not working for chrome, can you provide better alternatives please..

[@NishaSingla]

I am using it in chrome itself , what issue u r facing?

[@AshishGupta_Tech]

How can i start with Angular. Please suggest

[@NishaSingla]

Hey you can watch my complete playlist on angular , i have explained step by step
Hopefully it will help you 🙏

[@akashsuna5160]

How do I lazy load json data on scroll

[@monikasingla1339]

👍

[@NishaSingla]

Thank you 😊

[@rsaravanan5227]

Augury is working now???

[@shubhrojyotisengupta7051]

showing 404 error

[@TechnicalNikhil808]

Plz send the notes