Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules 

You are a super amazing guy. I am enjoying the ride.

After wasting 1 whole day. Found this useful video. Thanks a ton man. My angular version is 11 and this worked for me.

Such a great video! Your explanation was very clear and extremely helpful, exactly what I was looking for. Thank you so much, I'm definitely saving your channel to check it out later.

I had used older versions of angular where lazy loading was different ,thank you for such good explanation of same for newer versions.

Why this video is so downrated, He is really working hard and giving us proper knowledge from basic to advanced

100th comment, thank you for your efforts, wishing you 100% success in your life.

Crystal 🔮 clear explanation, thank you!

very great explanation

Thank you sir! This is exactly what i needed.

very good tutorial

kindly reduce advertising popup coming in between.

Other loading strategy can you explain eager, pre loading ... Also, I have checked module file, it contains all the code we have written for components, but this components will be only gets loaded to screen when accessed.. can you explain, how internally all these works. Also, what is differential loading introduced after Angular 8/9.

Wonderfull explanation, You are great Teacher they way you explain any topic that is super and easy understandable👌

i have no regrets having gone thru ur tutorials, i didn't know there was something called lazy loading.. thanks a million,, just clarify something for me.. do u recommend that we create our project components using the lazy loading technique? (I want to covert a whole water utility billing system from vbnet(desktop system) to django+angular due to the virus people r working from home).?

Hi sir ,very nice understanding 👍👍

Thank you so so much for this tutorial, it's very detailed.💯💥

Can you provide an example where you can lazy load a module that exports a component so it can be used by other components outside of the module. When I implement lazy loading, I'm getting error message that the component that the module is exporting is not recognized by Angular. Thx in advance!

HI, but in 15:00 we are not getting products and product-view and product-edit unless we enter int he url right, so it is also lazy loading?????

Thank you for all your efforts. Learned a lot. But i need one clarification. Is this command(what you have used to generate a orders module ) is only to generate lazy module ? If i just want to create a module with out any lazy loading concept means then what is the command for that in Angular 9 ? Thanks in advance.

can you explain how forroot and forchild works ?

Thanks, this is nice explained video. I have one question . How do we do lazy loading packages with shared module? For e.g. I have below modules 1. Main App Module 2. Home Module : which is package 3. Account Module : another package. 4. Settings Module : another package I understood that module 2,3,4 can be loaded lazily using loadchildren But now all the packages have one common package for eg. CommonShared package. How can we load this commonShared package with Main App module and not? having separate copy in other 3 packages

Hats off for the tut .... you have make it very easy to understand ... Thanks a lot ....... can u share the notes file in link ? please

Good explanation and example 🤘

Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules - By Default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary - For large apps with lots of routes, consider lazy loading - a design pattern that loads NgModules are needed - Lazy loading helps keep initail bundle sizes smaller, which in turn helps decrease load times - New with Angular8, loadChildren expects a function that uses the dynamic import syntax to import your lazy loaded module only when it's needed - with lazy loaded modules in angular, it's easy to have features loaded only when the user navigates to their routes for the first time - How to implement lazy loading - 1. create a feature module , child routes - 2. loadChildren: config in the app routing - Syntax - ng generate module --route --module app.module - It will generate a lazy loaded feature module , you can verify in console (F12), network tab - when we navigate to orders module then only orders module will be loaded (lazy loaded feature) - you can add your own routes in OrdersRoutingModule (routes array) - orders-routing.module.ts { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) }

So helpful thank you.

Thanks..well explained

Hi I have question. In my application currently lazy loading is not implemented, so i want to application. Please help me with ur guidance, how can I route bit confused. My Application hirerachy App -home - 20+components inside home -login -Layout -Common For now routing in on app component. So i want to add routing of that 20 components inside home component. So my query was do in hve remove the components declaration from appmodule. Ts and declare in homemodules. Ts

For dividing the modules, suppose we have a main page and some nav bar with (about, FAQs etc) how should one go with this approach ?

I am trying same code (ng generate module orders --route orders --module app.module) not working for me It showing (cannot read property 'Initializer' of undefined)? Plz help if possible

how to put an existing component in lazy loading ?

Great explanation sir. I've one doubt, Can't we apply Lazy loading concept on components only on modules only we can apply? And to apply lazy loading concept only with the help of router module or on button click also can we apply lazy load to some particular component? Please, clarify my doubts on this in ASAP before going further advanced concepts sir. Once again so much thankful to you for your clear explanations. :)

Excellent

create lazy loading for products only not for its childrens how you'll do that.

hello sir ,what is the function of this command --module app.module

I am trying to figure out the use-case of Lazy loading. For example amongst the two routes: { path: 'search', component: SearchComponent}, { path: 'orders', loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule) }, if we provide localhost:4200/search in the URL it is only loading the search module, similarly which ever module you want to load just give the route for it in the URL provided you have configured the route. in the second line of code when we give URL as localhost:4200/orders then Order module is loaded. what difference does it makes?

thanks for Lazy Loading

Please send all notes

Hi Sir, I'm not getting the component name's in network tab. Can you help me with that how can I see the name of component.

Do i need to import lazy module in app.module in import section?

Is there any way to convert modules I already made into lazy modules? Do I have to delete them all and make them as lazy modules again through CLI?

sir in the NETWORK section ''orders'' module is behaving like a component it's showing like localhost:4200/orders

ng generate module customers --route customer --module app.module is not supporting in Angular Version 10 Its creating CLI errors "Cannot read property 'properties' of undefined" Please provide the solution for it...

first module wok second module not work

Sir please share notes

please share the notes text file.

10:13

Everything is fine but u write a lot