Lazy loading in angular

In this video we will discuss lazy loading angular modules
Text version of the video
csharp-video-t...
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
Slides
csharp-video-t...
Angular 6 Tutorial
• Angular 6 tutorial for...
Angular 6 Tutorial Text Articles & Slides
csharp-video-tu...
Angular, JavaScript, jQuery, Dot Net & SQL Playlists
www.youtube.co...

[@omostan]

I have always followed your tutorials whenever I have difficulties over the 10 years plus of my software development. I just cannot say thank you enough for all your help. For me, you are the best teacher I have had the opportunity to listen and view his tutorials. Where others will skip a potential problem, you will always stop, simulates the problem just to explain why it occurs in the first, and then resolves it before carrying on with rest of the tutorial. Today, you saved my day again. Many thanks to you sir and God bless!

[@gabrielnzete8913]

Knowing a technology stack is one thing but to excellently teach it takes a whole high level of skill. This guy can teach to the moon. He is just so good with his teaching technique. All his courses are excellently taught.

[@80amnesia]

One day I'll fly to India to thank Venkat :-)

[@nikachkhobadze7710]

Anyways, this man is really good and deserves more likes. One from me ;)

[@HK-sw3vi]

@Girish kumar and how exactly on this cursed lands do you even fucking have that kinda private knowledge, pal?

[@mvdlele29]

idk if u re the best programming tutorial maker in the word but im sure u re the best indian

[@bobbycv64]

Well done Sir, I passed this video on to my Class. To the rest of the positive comments, I agree 100%.👏

[@viplovedev]

I have tears in my eyes because I heard this God explaining the world to me.

[@someshnukala804]

One of the greatest Technical Gurus Sri Venkat sir.
Thanks a lot sir

[@toascorner]

For Angular 11 this worked for me:
loadChildren: ()=>import('./employee/employee.module').then(mod=>mod.EmployeeModule)

[@88spaces]

Your videos cover one topic only and don't dive into others. I like that because it allows you to focus on the task at hand. Also, you're great at presenting tutorials. Thank you.

[@bobbycv64]

❤

[@surendrareddyseelam9757]

Yes I've been struggling on how routing among modules works and all
These videos sorted all my doubts,
You are ULTIMATE sir, take a bow 🙇‍♂️

[@albertvasilev5384]

I watched so many tutorials about this and no one helped me, but yours did it! Thanks a lot! :)

[@chathurindasumithraarachch2716]

same here

[@krishtheindian]

This is brilliant! An art of explaining things in a simple, understandable way! Thanks a million!

[@xperiasony8961]

Best Teacher in the world

[@misterperfecttube5377]

Hey man you teach better than the angular documentation

[@xdmemeguy]

This was so beautifully and simply explained. Well done sir

[@ganeshdivekar5042]

Awesome explanation of lazy loading , I just started with Angular and would wonder what is the need of module when we can import components directly in other modules. But lazy loading is possible only via modules.

[@Csharp-video-tutorialsBlogspot]

Thank you Ganesh. Very glad you are finding this angular 6 tutorial useful. Good luck with everything.

[@saianusha2818]

much awaited concept..thanks alot :)

[@prashansapriya5963]

Such great explanation is so rare...great work 👍

[@nigochen6665]

2021 update:
{ path : 'employees', loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule)},

[@rakeshacharya8791]

Is it possible to implement pathlocationstrategy and hashlocationstrategy in a project at time?

[@donbradfield5679]

short, simple, easy. thanks

[@SimplyPaaruz]

Great vedio .. Concept is very well explained 👍👍

[@jayababuthumati6297]

Mr. Kudvenkat, why you forgot us, please start a new series on Angular latest version. waiting to listen your voice again

[@arpitamukherjee5146]

Very nicely explained! Thanks!

[@Akshay-Raut]

Hey Kudvenkat. Thank you for explaining this simply and well. So the #moduleName is always required? Can't Angular infer it based on the employee.module that's mentioned in the loadChildren?

[@ankurarora5093]

There are few npm modules which give you a single file but multiple modules packed within it. That could be the reason behind mentioning the module name.

[@Akshay-Raut]

@@ankurarora5093 okay. That makes sense. Thank you

[@GuptaPavan759]

Thanks Sir for clearing every single point in your video.

[@limontuzuxxx]

Dude your examples are really easy to comprehend, do you have any tutorials on the bigger platforms like Udemy or Pluralsight?

[@GajavelliAdarsh]

just excellent.. that is what i am looking for.

[@chaitanyapai8245]

Very good explanation sir. Thank u very much.

[@sravyaparsi7952]

when we remove employes path, it doesn't satisfy 1st condition of lazy loading. You can simply use ../employees which moves one step backward while loading url

[@Prasad368]

Explained so well. Thank you.

[@venkatasudheer2222]

You did mentioned that for lazy loading the module, all routes should share same route prefix. But you did remove the route prefix in the employee routing module, while lazy loading the employee module, as you don't want 'employees' keyword to be repeated in the URL twice. Then why do you say that the modules should share same route prefix?

[@JayGrant]

great video, learn a lot thanks

[@janijohn5945]

I got a doubt, the first point to last load is we have to have same route prefix , but to remove the duplicates in link u remove that path from employee module ??? So that first point is removed ?

[@azharudeenshaikabdulkhader7832]

Simply awesome, thanks for the video

[@MrAnasSov]

The best thank you so much

[@trishalwalia4086]

Thanks for the wonderful video :)

[@M7MDAL6OBASI89]

Thank you from my heart 🌸♥️

[@AmirKMilbes]

Thank you so much for your classes, sir.

[@msurya1090]

Very clear explanation... Thank you

[@poloptree2]

For anyone wondering why this isn't working for you, check your Angular version. If you are at v9 you need to use this method instead to load your modules. angular.io/guide/lazy-loading-ngmodules

[@phaniraj434]

Thanks. I have modified the path as below and it worked .
{
path: 'employees',
loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule)
},

[@gagandeepsingh6126]

Sir please make videos on ssis,ssas,ssrs.

[@iroshanaravishan1388]

Superb👏

[@kirens8897]

This is very nice. Thanks

[@rahulkamboj4603]

You will go places... keep it up.. much appreciated 👍

[@akhilvenkat1877]

Excellent tutorials, thanks you soo sir.

[@ankurarora5093]

Thanks Venkat 🙏🏻

[@nikachkhobadze7710]

I find this tutorial very useful, thank you for that. I have one question if anyone can answer: is this method still supported in angular 8? Or it is a legacy method already? Thank you!

[@nasrhussain9457]

There is a minor syntax change. Search for Angular 8 lazy loading video.

[@jorgumbricht2537]

For Angular 8 use in app-routing.module.ts:
{ path: 'employees', loadChildren:()=>import( './employee/employee.module').then (m=>m.EmployeeModule) },

[@shaikshalibasha7115]

@@jorgumbricht2537 thanks alot :)

[@surendrareddyseelam9757]

@@jorgumbricht2537 thanks brother

[@gkmishra2009]

How calling token based authentication from angular to web api>>?

[@surajjagtapRider]

Thank you sir

[@fed4wet]

Perfect, thanks!

[@sergeyz4591]

Thank you!

[@nys8260]

thanks

[@manasabojja9326]

How u r doing string based lazyloading without adding routes in tsconfig

[@annakh9543]

superb

[@abhayjeetsingh3376]

How can we make SEO friendly angular app sir as we can't see meta tags info in source code

[@SoorajT]

Thank you so much

[@mdabuzar2130]

Sir.. Please One video on interceptor.

[@a_n_m3516]

Can someone answer this -
If we remove the parent path employees, we are breaking the first requirement i.e. all the routes in module to lazy load should have the same prefix.
Then how does it work?

[@jeffbroadhurst4871]

aly M I was wondering that too.

[@TravelPrince1986]

Same. He has done something which he didnt shared.
How can it work when we already removed employees prefix.
He should answer this

[@nasrhussain9457]

They all still have the same prefix, it is just placed in the main routing file instead of the local one.

[@nys8260]

'' = the same prefix

[@kandimallasuresh5059]

What is the difference between the ViewChild and ContentChild?

[@TarunKumar-gh9mr]

I have a doubt regarding routing in a lazy loading modules

[@ibknl1986]

Thanks for sharing the video

[@Csharp-video-tutorialsBlogspot]

Hello Ismail - You are very welcome. Hope you are finding this angular course useful.

[@lachphalleak2459]

Thanks sir. Do you code this tutorial in GitHub?

[@gkmishra2009]

can you explain what is intercepter ??

[@nirmalarani9139]

Hi ,How to do performance tuning in angular with typescript

[@archanakandukoori809]

sir...do node js tutorial as well if possible...

[@eddiezhu9376]

exactly what I want to know

[@gkmishra2009]

diff between directive and component ??

[@saianusha2818]

please make a video for the forroot and forchild difference

[@ihsanullah4058]

These topics are discussed by one of sir kudvenkat see in this series. And there differences.

[@peterl1699]

Great

[@sandeepmaurya4978]

Hello sir ji... I need this code.. please help me with this

[@syedirfan3616]

You can clone or download the source code from my GitHub account using the below link. Hope this helps.
github.com/sirfan24/Angualr-6-Project.git

[@gkmishra2009]

please help explain below topic of angular ->
ChangedetecorRef
TemplateRef
ViewContainerRef
ElementRef
RXJS operators
Host listener
host binding
CDK Portal
QueryList
DOM Portal host
Portal template
Application ref
AG Grid tutorial
Subject
behavious subjects
Forward Ref
WithLatestFrom
Content Child
Overlay
Overlayref
ChildrenOutlet Context
Navigation Extras
NGRX
FakeAsync

[@manit77]

A bit confusing on your explanation on this the topic. It's just a route created for a sub module.

[@patrickmarckdulaca545]

When I removed the employeeModule inside of appModule. I got this error on employeeModule class name that looks like this ---> Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)

[@lichaytiram9246]

sound cool but don't work

[@jenithjana5178]

core.js:5980 ERROR Error: Uncaught (in promise): Error: Cannot find module './employee/employee.module' Error: Cannot find module './employee/employee.module'
solution:
stackoverflow.com/questions/41396839/exception-uncaught-in-promise-error-cannot-find-module-app-home-home-modul

[@GajavelliAdarsh]

just excellent.. that is what i am looking for.

[@belmiris1371]

Thank you!

[@haseebbutt8185]

Thanks Sir