Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules
HTML-код
- Опубликовано: 5 авг 2024
- Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules, Angular Tutorials Lazy Loading Modules, Angular Lazy Loading Modules, Angular 9 Lazy Loading Modules, Angular tutorial learn Routing Lazy Loading Modules, angular 9 Lazy Loading Modules tutorial, angular 9 Lazy Loading examples, lazy loading angular 8 example,
Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular introduction, angular version history, angular full tutorial series, best angular tutorial.
Install bootstrap angular tutorial, Learn how to install Bootstrap in Angular 9 app. In this course you will learn how to create small, medium, large applications with Angular 9 in this development tutorial.
Angular 9 Full Tutorial Playlist
• Angular 9 Tutorial For...
You are a super amazing guy. I am enjoying the ride.
Thank you so much 🙏
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.
@Layton Rowan Instablaster ;)
@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.
@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
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.
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
After wasting 1 whole day. Found this useful video. Thanks a ton man. My angular version is 11 and this worked for me.
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
ruclips.net/video/Fg4spR6cdBQ/видео.html
ruclips.net/video/RJc9wD02DMU/видео.html
Thank you sir! This is exactly what i needed.
Great Mihai. You are most welcome!!
Crystal 🔮 clear explanation, thank you!
Glad it was helpful!
I had used older versions of angular where lazy loading was different ,thank you for such good explanation of same for newer versions.
Glad it helped
Thank you so so much for this tutorial, it's very detailed.💯💥
Glad it was helpful!
100th comment, thank you for your efforts, wishing you 100% success in your life.
So helpful thank you.
Thank you so much Nyarai 🙏🙏
very great explanation
Glad it was helpful!
Hi sir ,very nice understanding 👍👍
Why this video is so downrated, He is really working hard and giving us proper knowledge from basic to advanced
Thanks..well explained
Glad you liked it
Wonderfull explanation, You are great Teacher they way you explain any topic that is super and easy understandable👌
Thank you! 😃
Good explanation and example 🤘
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.
ruclips.net/video/I5i1GonlfFM/видео.html
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 ?
very good tutorial
Thank you so much buddy for your support!
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) }
Thanks Srini for capturing the notes. Regards Sridhar
Thanks a lot Sreeni for taking your time and editing the notes.
@@amanuellebassi7294 welcome!
If you have the complete notes can you share with me
Excellent
Thank you so much 😀
thanks for Lazy Loading
You are welcome
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?????
Yes Sai. You are right. That's because its lazy loading module
@@ARCTutorialsbut here we didn't generate feature module ri8 without generating feature module also, lazy loading is installed, plz tell me how sir
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!
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).?
You're very welcome! Yes Its best practice to use Lazy Loading design pattern in our applications.
@@ARCTutorials thanks for that, in case one wishes to ask questions/or be assisted how can they get in touch with you directly?
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.
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
Sure Rahul. I will soon upload the link with notes.
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.
Thank you priya!! Happy learning
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
kindly reduce advertising popup coming in between.
Hi Meenal. Sure I will try to reduce advertising in between videos!
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
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
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?
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!!!
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!
I can understand initially it may be confusing. I can bet once u follow this mini practical project series ur doubts will be cleared. ruclips.net/p/PLp50dWW_m40WQ9-t0lyamekhE2OiZQrCG
ARC Tutorials thank you so much!
sir in the NETWORK section ''orders'' module is behaving like a component it's showing like localhost:4200/orders
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?
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! !
If u dont make them modules, bith search and orders will load all the time, which is what we avoid by using modules 👍
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
Hi Rajnish. I have created brand new use cases and examples in Angular 10 series. Do check it out - it will help you ruclips.net/video/7sUkBbNPJ5k/видео.html
hello sir ,what is the function of this command --module app.module
This command is used for creating new modules
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. :)
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.
@@ARCTutorials So much thankful to you for your wonderful explanation.
You are most welcome
can you explain how forroot and forchild works ?
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
Do i need to import lazy module in app.module in import section?
Only the main module which is lazy loaded if its not already imported.
@@ARCTutorials thank you
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.
Please check the route that you created and for lazy loading is the route in AppModule
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...
create lazy loading for products only not for its childrens how you'll do that.
Hi Manisha. Great idea. I will cover it as part of Angular 10 series i am currently creating. Pls do check it that out
@@ARCTutorials kindly create it asap i really need this and if possible then create it by today itself. Thanks
i am using angular version 6 so make sure it will work..
how to put an existing component in lazy loading ?
Please send all notes
Sir please share notes
please share the notes text file.
Hi Hireme. Please send email at soorya.aaradhya@gmail.com
@@ARCTutorials hiremeonly@gmail.com
first module wok second module not work
10:13
Everything is fine but u write a lot