Angular 9 Tutorial For Beginners #38 - Lazy Loading Modules

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series and today's episode we are going to learn a very very important concept extremely useful extremely important and it's a must I would say when you're building a large enterprise applications and that feature is called as lazy loading so we will learn about what is lazy loading how do we use it what is the benefits of using it how do we go it step-by-step we learn all about it in today's episode welcome back my name is Shree the Rao I have over 10 years of experience as a full-stack developer and I'm here to share my knowledge with you all on the modern web technologies I'm also here to learn from you all so during the course of this tutorial series if you have any doubts any questions on the code examples or tutorials please feel free to ask me in the comment section below I will be happy to help you for free I am putting in a lot of hard work in compiling these tutorials for you so I will really appreciate if you can support me by liking the video and subscribing to my channel thank you so much in advance I have created a full playlist for you angular 9 full tutorial playlist it has everything that you need to master angular 9 so if you whether you are a beginner or an already hands-on experience developer this tutorial series will take you from basics to the most advanced clearing all your concepts with live hands-on examples so I request you to please check it out ok so for the last few episodes we focused learning on angular routing concept and in that there are lot lot of different features that we have to learn to master angular routing so far we have seen all these different features like the strategy is based around module outlet query param param a try slayings while Qatar out child routes today we are talking about lazy loading it's an extremely important concept and let's get started by learning what is lazy loading all right so before I start this tutorial I will start making some notes for you okay so that way it will be clear to you when we talk about these points you will be able to relate it with your applications so let me open up the editor so I can make some notes for you so we are talking about lazy loading all right okay so let's start so if you look at any angular applications it will be made up of multiple modules right there were ever a single module you can have a basic application with few modules but when you really do a practical real-time application it will be made up of multiple modules right so what do I mean by mean by a module so think of it this way every large application is made up of multiple modules all right so what are modules so modules can be like you will have users you can have orders you can have cart you can have items you can have inventory you can have vendors so these are all different modules right so all the code related to users will be under users it will have users component view user update edit forgot password login so all these components services pipes directives related to users will be under users right so this will be users module this will be address module right so you will have multiple modules not one not two in real-time applications where I have worked the modules can go up to 2025 right so it's really becomes huge right so what happens by default of angular is all the modules are loaded eagerly which means the moment your apps starts your the moment your app loads all the modules will get loaded irrespective of whether they are needed or not right so that's the important thing so all modules are loaded as soon as app is loaded right now this is it makes it makes our application very heavy right the bundle size the bundle size increases drastically drastically you don't you don't it will load modules you don't even need right it will load modules you don't need at that time right so all this will become the drawback right so that's that's exactly where the lazy module design pattern comes into picture right so what does lazy module does so lazy loading means that load modules when they are required simple as that right so if you see here we just understood that all the modules are loaded right when the application is loaded right this makes it extremely heavy it increases the bundle size it will it will kind of slow down your application in terms of performance right it will slow down in performance because you're making requests you're loading things which you don't need so it will make it really heavy so that's where this lazy loading comes into picture so what is lazy loading lazy loading is a design pattern right it's a design pattern where the modules are loaded when requested right so it's you can also call it as modules when they are required like for example let me give you an example here so when the user is not logged in right it doesn't make sense to show orders of the user right it doesn't make sense because he's not logged in once he locks and once user logs in logs in then you you show orders in that also when user navigates to history show the past orders right so you see this hierarchy of questions right here if you load the orders right here when the user is not logged in unnecessarily we have wasted the the memory the the performance we are taking a hit because it's loading when it is not needed instead we load this only when user navigates to history only when user is logged in so you see this chain this is called as lazy loading this will this is lazy loading that load this module only when the user is here right otherwise don't load it simple so this pattern is called as lazy loading so let's go through this now so lazy loading helps keep the initial bundle sizes smaller which in turn helps decrease load times so like I said if you load everything in one go it will make the bundle size really heavy it will slow down right instead we will load them as and when they require or we call it as on-demand now remember from angular 8 onwards load children expects a function that uses the dynamic import syntax to import your lazy loaded module so before angular 8 right so if you are coming from if you are new here then you don't have to worry about this but if you have some experience working with angular previous versions you would see that in the load children you would write something like you would give the module name and put slash hash module right so let's say you have customer module and then you'll put the module name so this is how we were defining but from angular 8 onwards we need to make it a dynamic dynamic function which will import I will see this we'll see this in just a bit which will die with a dynamic function which will we will import right we will do practical hands-on in just about five minutes okay so hold on to that thought all right so 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 right so what happens like i stoled you here if you navigate to slash history route then only orders will be loaded if you are not going to history this will not be loaded right so this is what the entire design pattern of lazy loading works about right now this can be a huge help for your applications performance and reducing the initial bundle size when the application grows in size you should always modularize the application into individual modules right which is loading the modules on demand right now let me show you an example here now let's see inspect element and go to to network right now I will just do a load so you see it will load everything it will load products it will call products it will load all these files right so irrespective of it it will load everything now we will create the module which will load only during lazy loading we'll see that in just a bit now so there are two important steps that you need to do how do we implement lazy loading let's see that so how do we use lazy loading in our application right so how do we use it it's a two-step process this is a two-step process so first we will have to create a feature module now what is the feature module I explained it here that every you will categorize your application under features like orders cart items inventory vendors etc all of this becomes a module each feature module will have its own routes or child routes right each feature module will have its child routes and it will be loaded using we'll have to configure it in ab grouting what we need to configure we need to configure load children this is the key that we need to configure in our app routing so once you do these two steps you are implementing lazy loading right so let's see now practically how to do that so this I'll say lazy loading a concept in our application and here let's learn how to implement it how to implement the lazy loading now the first thing like I said I told you we need to implement a feature module right and then configure its load children so the first we'll do is create a module with routing customer so for that we need to we need to copy the syntax if you see here it's clear so the command that we have to write is ng generate module right followed by the module name what is the module you are trying to generate now in this case if you see let me see what I don't have and then I will create it okay so let's say we'll create a feature module called orders right so here I am saying that ng generate module module name and then we'll have to mention that it's route right so here we are saying the route right so what is the route that it has to go through so we can say orders right and then we have to mention which module it has to load in so here we will say app dot module right so this way we are now telling that generate a module by the name orders create a lazy loading feature in the routing file by the path as orders and include that in the update that in the module app modeling right so now let's run this command okay so now let's pace this the same command that we wrote here one more time first generate a module by the name and give the name of the module that you want it can be anything it can be customers it can be orders it can be products anything then - - route when you say this it will create a route by the name orders and put it in your app routing with lazy loading and we are telling that it has to be instead initiated with app module right let's go now let's run this it will create C so now important thing you have to see here so we are telling that create a routing module because we stole that it has to create a route - - route orders right so it created a routing module it since we told generate module it generated a module file here the second one and then it created a component by default added to that and finally it updated our app routing dot module dot yes right now let's take a look at our app routing module first so you see here now this line got added it's an extremely important line we have to see let's shrink it here okay so line number 23 so you see it created the path called orders and then it is it already added load children right and we are saying it's a dynamic function that we have to write is what I told you in the beginning because from angular 8 it is starting to use the dynamic function so load children dynamic function arrow method and we are saying it is importing from the routing module right what is the module its orders dot module and then dot load the orders module so now let's see the orders module so here we see it's a raw out orders module has a routing module imported in it if you go to that and you would see these are the power switch it is configured right now let's see this in action so how do we verify I'm going to clear this right now let's say so see now I want you to take a look at here clearly right so for your benefit I am going to search it do I see any orders do I see any orders no the reason being it's lazy loaded it is not loaded here so let's make that notes as well so once we generate it will generate a lazy loading feature module right in our case it has generated order orders right but it is not loaded it is not loaded by default verify this verify this in the console right here you can verify in the network that it is in the network tab let me just mention it for you so it's easy for you so it's easy for you to see when you are learning this tutorial okay so it's not loaded by default see it's not loaded now what I'm going to do I'm going to change the route to orders because that is my path now see now you would see address you see the module it got loaded here see let me highlight it here can you see this it loaded the orders module because we went to that path right now I'm going back to products it is not loaded here see there is no orders right so this is exactly loading module when we navigate to orders path orders route the module the orders module is loaded right that means we are loading the module it means we are loading only when we call it or on-demand or lazy loaded feature module right so there are different names that they call it but this is this exactly what we just did is called as lazy loading that you don't load it so it's less right let me clear it for you now you try and search for orders it's not there now I'm going to click orders and it will start showing you that it has loaded orders now when you search here you see we went to the path and it gave it loaded the module dot cheers right so similarly now you can configure your routes now you can if you want some routes to be configured only when they go inside this you can create the child routes further right so you can create further child routes here that you want for only which are specific to routing module and they will only work when you are inside this particular route which is orders because you are loading the children dynamically you are loading this module dynamically using load children right so this is the important concept of lazy loading I hope you have followed it I hope you followed the notes I hope that you it's clear to you now what I want you to do as a homework homework for you to try it out create a feature module any feature module that you want let's say tasks write and create to feature modules create one for tasks create another feature module by the name let's say Toulouse and link them in link them in app component and click on tasks should load only tasks module click on Toulouse should load only to loose module so this is your homework once you do this you are certain that you have learned lazy loading and you can be certain that now you understand the complete concept of lazy loading do let me know if you have any questions or doubts in the next episode we will learn about route guards another important concept you don't want to miss extremely important to securing safeguarding the authenticated routes we'll learn that in the next tutorial if you have any comments squeeze drop in the comment section if you liked the video give a big thumbs up share your love thank you so much

Channel: ARC Tutorials

Views: 18,526

Rating: 4.8701825 out of 5

Keywords: 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 Lazy Loading, Angular Lazy Loading Modules, angular 9 Lazy Loading Modules tutorial, angular lazy loading modules tutorial

Id: 3UTg98kp6UM

Length: 20min 31sec (1231 seconds)

Published: Thu Jun 11 2020