Angular 17 Tutorial #21 - Lazy Loading Module | Angular 17 Tutorial For Beginners

hi friends welcome back to our tutorials this is angular 17 full tutorial series for absolute beginners as well as expert developers joining us from previous versions of angular there are lot of breaking changes in angular 17 which are different than what you would have done until angular 16 one of such concept is lazy loading module the way we do in angular 17 is different than how we used to do earlier and hence this tutorial is very very important especially if you're trying to upgrade or learn angular 17 lazy loading module let's get started if you have missed out on the first 20 episodes so far make sure that you go through them in order to learn all the changes that are there in angular 17 and to master angular with me all right a quick note on angle U angular lazy loading modules before we start coding what are lazy loading modules earlier we have seen what are modules right we call them as feature modules using modules we can group components routing pipe Services all under one related feature same way lazy loading modules is a technique in which we create modules but they will be loaded only on demand that means let's say you have five modules and you don't want them to be loaded on page load right let's say on login screen you want only certain modules to be loaded in certain screen let's say you are building a payment module you don't need to load the payment module when user is checking the product you will load the payment module when user goes to the final step of the shopping cart that is one example of lazy loading module I'll give you a few examples more as we start coding but that's the high level overview now how do you generate a lazy loading module in angular 17 it's no different than how we generate regular module we will use the command NG generate module and here we can give the routing option we can say hyphen hyphen routing it will generate the routing file for it important thing to note earlier in angular 16 we were mentioning the module name where this will be adding the path but as you know and I've been insisting this that there is no no app module in angular 17 so where do you do the configuration you will do the configuration in route. TS config dots and how do you do that it's the same way like how we were doing in angular 16 till angular 16 which is to create the load children and then function which will import the lazy module and then we uh map the module all right that's the same technique so let's go ahead do Hands-On understand this and I'll also make some notes for you as we move so let me bring this up all right so lazy loading module is what we are learning now all right okay so so far we had done the three types of modules so today we are learning episode 21 we are doing Lazy loading module all right perfect so far so good again if you have any doubts please reach to me in the comment section I'll be more than happy to help you now let's say our application is crew management now I don't need to load the crew details till I select the flights right so if I am in the flights screen or flight's page that's when I will load the crew module otherwise I will not load it right that's one of the module which will be loaded only on crew but let's say if I am in admin screen I will load the admin module I will not load the admin module in flights here it doesn't make sense to load that file and make it heavy it will cause performance issues and scaling issues and hence this module when it is loaded only when user goes to admin is called a lazy loading module all right I hope the concept is clear now of lazy loading that means lasing loading module will be loaded only when you user goes to that route okay that's the meaning of lazy loading module now let's go ahead and generate it how do you generate a lazy loading module you will write the command NG generate module followed by the name of the module here okay and you will pass the option hyphen hyphen routing which means you're telling that I want to generate a custom routing for this particular module all right so let's go ahead I in the app folder you can see here in the inside the crew management Source app folder all right and now we'll write the command NG generate module let's give the name of the module as um you can take any anything um let's say admin module and I will say hyphen hyphen routing that means I want the routing and hit enter so now this has generated a new folder and a new module which is by the name admin module and it has generated a routing routing module inside it right this is where we can add the custom routes for this particular module okay now let's go ahead and add some components to the admin okay now I will do NG generate C which is NG generate component and I will say inside admin generate add crew or ADD add user for now let's keep it simple and you can again create inside this particular lazy loading module inside lazy loading module we can have Standalone components or regular component I'm not I'm using the word regular for components where stand alone is false okay so I'll show you both ways variations now first let me generate a component inside admin and hit enter you can see it created a new component inside the admin which is add user and you can see this is stand alone is true because by default in angular 17 the components are Standalone true now the same way I will generate a new component I'll say edit user and I will say stand alone is false that means I now generating a regular component and hence it has updated the module also so if you open the module edit user is already imported okay because this is not a standalone component it is a regular component all right so so far what we have done we have generated a module by the name admin module we said we want route for it and we created a regular component and we created a standalone component now it's time to create a route for this admin module so you will go to app. routes. TS all right now let's say it is like this empty because we haven't done anything so far so let's add that path here you'll say path is admin and you will write load children now this is very very important when you were giving the command as M hyphen M option for lazy loading module it was creating the route for you automatically in that module but in angular 17 onwards it will not do that so we will Define the path okay so we will write load children colon and then function and then here we will write the import statement and we are going to tell that import the admin from SL admin SL module okay and then you have to give a then condition that what should happen and then you are saying M which is short for M here in module you can give any name there m do admin module okay so take a look at this entire code once this you will see it familiar if you have done any angular lazy loading earlier the only difference is earlier you were doing it in app module to include this and it was automatically doing when you give the command but now we will have to write it ourselves when you generate a lazy loading module with hyen hyen routing okay and include it into app routes now we have included it so now let's go back to our app admin module so in the routing here in the admin we haven't told what should be the default part what should happen when user comes to this right so let's say if he comes to admin we let's say component to be mapped is say edit user component oh not from edit user okay from edit user okay I hope it's yeah it's the pointing same one okay so we are saying when this comes to edmin path we are mapping it to edit user or you can also add add user that doesn't matter whichever component you want to map now let's run it and I will show you in the network call how to check whether your component is loading or not so I am here in my home screen I don't see anything and I'll open the inspect element for you and the network all right and now I'm going to type slash admin in my path so now you can see that it has loaded Ed and let's see the the what we should see the output is slash admin whenever you do it should come to default edit user so ideally we should have seen edit user works here we are not seeing that and it's going back with some error let's check it says invalid configuration because we have given that route as wrong here we don't have to give just give path all right um and admin so now you can see edit user works this is coming from our lazy loading module okay if you how do we see that so we can say component loaded from lazy loading module you can see here component loaded from lazy loading module all right now you would ask what is the difference right let me show you the difference now click on type Chunk in this filter bar you would see 1 2 3 4 5 the last one is the one that's admin module you see here now if I go to the regular path which is our homepage you will not see the admin module here see the difference in the console in the network tab you can see here admin module is not loaded that means it's a lazy loading module it will only load when you go to that route now see I go to admin and now this see admin module is loaded all right which means this module will only be loaded when it is called when we when you tell it to load just like an example I gave you payments it will only load when you go to payment so this module will only load when you are in that particular screen else it will not show anything it will not even load in the browser okay I hope now the concept is clear and you will be able to understand what is a lazy loading module you will be able to generate few modules add some components map them into the app routes and should able to see the output just like what I've done if you need time pause this video go back to where I was and check it again get it to a level where you are comfortable adding this in the next episode I'm going to show you the lazy loading standard Lo component right now what we have done is we have taken the edit user and this admin module and loaded it into the app routes. TS and added it as a lazy loading module but in angular 17 we can also map a lazy loading component and that's what I'm going to show you in the next episode I am trying to cover everything in in angular 17 to help you master it so stay with me ask me questions ask your doubts let's learn together keep learning keep growing thank you so much for joining in this episode I'll see you in the next episode

Channel: ARCTutorials

Views: 5,482

Keywords: angular 17 tutorial for beginners, angular 17 full tutorial, angular 17 complete tutorial, angular 17 live project, angular 17 project, angular 17 crud tutorial, angular 17 best tutorial, angular 17, angular 17 signals, angular 17 defer, angular 17 components, angular 17 templates, angular 17 course, angular 17 full project, angular 17 routing, angular 17 crash course, standalone components, angular standalone components

Id: HuhE-m3VFEA

Length: 13min 42sec (822 seconds)

Published: Sun Mar 17 2024