Modern Angular Lazy Loading Guide!

[@DirtySouth33T]

awesome video! i implemented this the other day in my app :) glad you did a video on it helped me learn more about it

[@ZoaibKhan]

Thanks Adam! Lazy loading is an absolute must for any large app or even a medium sized one :)

[@eneajahollari1203]

In v18.2 there is an automatic migration schematic which can convert all your standalone components in routes to be lazy loaded. You can run it with: ng generate @angular/core:route-lazy-loading

[@ZoaibKhan]

Aah, that will be very helpful! Thanks for the info, Enea

[@fayazvar3948]

Best video, lot of information, i was not aware about that default keyword.

[@ZoaibKhan]

Glad you liked it, Fayaz! Default adds a nice touch :)

[@daviamerico2268]

how does the user know a component is lazy laoding I mean it takes some time to angular takes js from the server, how can I make an UI which holds during that time?

[@ZoaibKhan]

For route based lazy loading, you can use router events for the purpose. For defer block, there is an accompanying loading block and placeholder to show something when those states happen

[@shaik-arif-dev]

Does lazy loading apply on html too

[@ZoaibKhan]

Hmm, interesting. I haven't tried that out honestly.

[@shaik-arif-dev]

@@ZoaibKhan I have a doubt like let's take a home component html in that I have a service component html tag but I don't want to see " service heading div " in home component html but okay with seeing in service component can we implement that

[@davebudah]

Hie , can you show us the best implementation for ROLE BASED ACCESS with this particular kind of project, Im sure it would be very helpful. You don't really need to have a backend to show us. I just want to see how we can show certain routes to USER A , and other routes to USER B. I HOPE YOU WILL SEE THIS MESSAGE. THANK YOU SIR.

[@ZoaibKhan]

Hey! I'll add to my list of future videos. It's a good idea, so thanks for that :) But a general approach could be to just modify the menu items when the app loads and you get the current logged in role. For that we can keep the menu items in a shared state/service. Then for added protection, we can also add route guards to each route checking for the role and denying permission accordingly.

[@austinZen8800]

well done my friend!

[@ZoaibKhan]

Glad you liked it, Austin! How're you keeping up? :)

[@fayazvar3948]

@defer {} it is very interesting.

[@ZoaibKhan]

Yes and very powerful! :)