Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules

[@amanuellebassi7294]

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

[@ARCTutorials]

Thank you so much 🙏

[@laytonrowan9172]

i guess im randomly asking but does anyone know a tool to log back into an instagram account? I somehow lost the login password. I appreciate any help you can offer me.

[@donovanavi8608]

@Layton Rowan Instablaster ;)

[@laytonrowan9172]

@Donovan Avi thanks so much for your reply. I got to the site on google and im trying it out atm. Seems to take a while so I will get back to you later with my results.

[@laytonrowan9172]

@Donovan Avi it worked and I actually got access to my account again. I'm so happy:D Thank you so much, you saved my ass :D

[@saikumarmogilla450]

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?????

[@ARCTutorials]

Yes Sai. You are right. That's because its lazy loading module

[@saikumarmogilla450]

@@ARCTutorialsbut here we didn't generate feature module ri8 without generating feature module also, lazy loading is installed, plz tell me how sir

[@irivalkaai4414]

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.

[@ARCTutorials]

Thank you so much Irina. I have just started Angular 10 series in detail. Pls do check it out. Also if you have any doubts or queries, i am right here to help! Happy learning

[@thanushr6710]

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

[@ARCTutorials]

Glad it helped! I am sure you will like the Angular 10 series where I am covering all topics in detail as well the MEAN stack application. Check the below links kzbin.info/www/bejne/fJiXpKOIa8iXeLM kzbin.info/www/bejne/iHvGaqp6ZZd3g7c

[@darshans9589]

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 ?

[@kiranpawar2463]

very great explanation

[@ARCTutorials]

Glad it was helpful!

[@pushkardeshmukh1987]

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

[@ARCTutorials]

Glad it helped

[@chammu6936]

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.

[@ARCTutorials]

Thank you priya!! Happy learning

[@ARCTutorials]

Hi Priya. Can u pls check my latest tutorial Angular CRUD tutorial #5 i have showed both ways of normal module and module with lazy loading. Ur doubts will be cleared

[@adithya751]

Crystal 🔮 clear explanation, thank you!

[@ARCTutorials]

Glad it was helpful!

[@gururaj7250]

very good tutorial

[@ARCTutorials]

Thank you so much buddy for your support!

[@jacksm8709]

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).?

[@ARCTutorials]

You're very welcome! Yes Its best practice to use Lazy Loading design pattern in our applications.

[@jacksm8709]

@@ARCTutorials thanks for that, in case one wishes to ask questions/or be assisted how can they get in touch with you directly?

[@SrikanthVinnamala]

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

[@sreenuksr]

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) }

[@ARCTutorials]

Thanks Srini for capturing the notes. Regards Sridhar

[@amanuellebassi7294]

Thanks a lot Sreeni for taking your time and editing the notes.

[@sreenuksr]

@@amanuellebassi7294 welcome!

[@vaibhavsharmaiiitu9319]

If you have the complete notes can you share with me

[@mihaivalentin6306]

Thank you sir! This is exactly what i needed.

[@ARCTutorials]

Great Mihai. You are most welcome!!

[@jagabandhujena9476]

Hi sir ,very nice understanding 👍👍

[@SS-yv9iu]

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

[@ARCTutorials]

Only the main module which is lazy loaded if its not already imported.

[@SS-yv9iu]

@@ARCTutorials thank you

[@meenalyengul5372]

kindly reduce advertising popup coming in between.

[@ARCTutorials]

Hi Meenal. Sure I will try to reduce advertising in between videos!

[@nehalparmar144]

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.

[@aishwaryabhuskat6812]

Good explanation and example 🤘

[@ARCTutorials]

Hi Aishwarya. Glad you liked it. I also have an complete CRUD tutorial on Angular, which makes use of Lazy Loading. It will be surely interesting for you, please do check it out. kzbin.info/www/bejne/f2bMYnqlo9GZfK8

[@CheeJinOng]

Thanks..well explained

[@ARCTutorials]

Glad you liked it

[@harshitbadaya6978]

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

[@ARCTutorials]

Thank you! 😃

[@igorr4682]

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!

[@mariyageorge2277]

Excellent

[@ARCTutorials]

Thank you so much 😀

[@rajnish1002]

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

[@ARCTutorials]

Hi Rajnish. I have created brand new use cases and examples in Angular 10 series. Do check it out - it will help you kzbin.info/www/bejne/baS4nHWYg7V9a80

[@peterkim7788]

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?

[@ARCTutorials]

No. Please dont delete. U can convert existing modules into lazy loading modules. I will try and make a quick notes for u. Pls dont delete till then!!!

[@peterkim7788]

ARC Tutorials thank you so much. And I am little bit confused when I make something as a module OR a component! Confused between both!

[@ARCTutorials]

I can understand initially it may be confusing. I can bet once u follow this mini practical project series ur doubts will be cleared. kzbin.info/aero/PLp50dWW_m40WQ9-t0lyamekhE2OiZQrCG

[@peterkim7788]

ARC Tutorials thank you so much!

[@RahulPatil-db5pp]

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

[@ARCTutorials]

Hi Rahul. Since we are trying to use the module as shared. It will be best if you use it appModule itself. Please try this out and let me know how it goes. Thanks Sridhar

[@TheFunnyGamer007]

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

[@ARCTutorials]

This command is used for creating new modules

[@shubhambhatia5668]

can you explain how forroot and forchild works ?

[@karandeepajmani811]

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.

[@ARCTutorials]

Please check the route that you created and for lazy loading is the route in AppModule

[@rahulpathak906]

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

[@ARCTutorials]

Sure Rahul. I will soon upload the link with notes.

[@olujobifolaranmi2133]

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

[@ARCTutorials]

Glad it was helpful!

[@kolluruprakash]

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. :)

[@ARCTutorials]

Hi Prakash. In large projects, we map multiple components to a module. By using lazy loading module, we enable components as when they are invoked. Lazy loading is a concept for modules and NOT for components.

[@kolluruprakash]

@@ARCTutorials So much thankful to you for your wonderful explanation.

[@ARCTutorials]

You are most welcome

[@themathsprodigy8181]

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?

[@ARCTutorials]

In practical applications we will have like 30-40 modules. U dont want all to load at all times for all users. Thats when lazy loading is most helpful. It tells when u can load a module and when not! !

[@ARCTutorials]

If u dont make them modules, bith search and orders will load all the time, which is what we avoid by using modules 👍

[@nyaraimatembudze4335]

So helpful thank you.

[@ARCTutorials]

Thank you so much Nyarai 🙏🙏

[@shubhrojyotisengupta7051]

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

[@harshitbadaya6978]

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

[@vivekrampelly6435]

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

[@infinitywebsolutions5321]

thanks for Lazy Loading

[@ARCTutorials]

You are welcome

[@manishasrivastava8356]

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

[@ARCTutorials]

Hi Manisha. Great idea. I will cover it as part of Angular 10 series i am currently creating. Pls do check it that out

[@manishasrivastava8356]

@@ARCTutorials kindly create it asap i really need this and if possible then create it by today itself. Thanks

[@manishasrivastava8356]

i am using angular version 6 so make sure it will work..

[@shwetaakole689]

Please send all notes

[@PradeepYadav-zh1ws]

how to put an existing component in lazy loading ?

[@Bukratusi]

please share the notes text file.

[@ARCTutorials]

Hi Hireme. Please send email at [e-mail]

[@Bukratusi]

@@ARCTutorials [e-mail]

[@jimishshah2150]

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...

[@krishnashauzshenikala9240]

first module wok second module not work

[@nasrhussain9061]

10:13

[@pavankumar4909]

Everything is fine but u write a lot

[@kundanchaurasia32]

Sir please share notes