Angular tutorial # Lazy Loading

hi everyone welcome back to my channel my name is anil and in this angular video tutorial we will learn a very important topic in angular which is lazy loading so if you attempt the four or five interviews in angular then there is a very good chance that and we will a question about the lazy loading like what is lazy loading then how we can achieve it and what is the difference between normal loading and the lazy loading and much more questions and we will learn every questions interview questions and the very deep concept about the lazy loading in this video right one more thing we will just make this video from the very scratch i am not going to just tell you that you have to watch my previous video for this and this routing and all we will make it from the very scratch right yeah so these are the points of the video first of all we will make a module then we will make the two components inside it and we will use load this module in a lazy loading way right then we will make the routing for these two components and we will also make them make the anchor tags for uh routing and when we will just uh get this example with one module then i will make a one more module so that you can just relate that if we have the more than one route then how we can handle the lazy loading and all right so first thing is that why we need the lazy loading so what actually happen when we are just using the normal loading or we define the all routes in the app.routing.module file so when we just load our website at the first time all routes will actually automatically load at the first attempts right so now let's say we have a very big project and we have the right like 200 or 300 route so for our first load our website will be gonna uh very slow right so this will uh give a very bad impact to the visitor or the viewers so that what actually lazy load will do so let's say we have a thousands of route and only one route it will load at the time when the page is loaded and the another the routes are loaded when they are code so let's say uh user just want to go on the admin panel then it will click on the admin link and then the admin route will be load right and i will show you that uh this is really work right so i will show you uh i will just make some console and all and i will show you that when we just load the normal website normal load then our lazy loading module are not loaded here but when we click on the link then the inner module or inner components are loaded right so now let's start it with the so let's just close the command line and open it again let's write here ng g4 generate m4 module and uh module name so let's say my module name is admin and i also need a routing file here so just write here minus minus routing right and just hit the enter now you can see that we got the two files one is admin.module.ts and another one is admin hyphen routing dot module.ts file so with this file i also need two components right so i'm just going to make two components like ng g4 generates e4 component and my component name is let's say login but this login component should be the part of admin module that's why i will just write here admin slash login and just hit the enter a similar way let's create one more admin list component like this so now we created the old stuff that we need so now let's just jump for the coding first of all let's open the admin folder and so let's open it so let's just make the routes here so just right here import something from and here will be our component path right so just say loading login and then import list also import something from list and list component and just simply write here login component as well as list component right now let's make the path for both of them right so just put here path path forward for the login we have a login path and for the component which component we want to load on this login path we want to load a login component similarly let's make another path also let's write your path put here list and the component will be the list component right all right that's great so we made the route for them and now let's uh load this component lazily right admin.module.ts for that we have to go on the admin dot module dot ts file right ah sorry my bet just go to the admin sorry app.routing.module.ps and here we have to just put here route so let's put a path here so path will be you can put any name whatever you want but i will just put here admin y admin because it will be actually relative like when i just want to open the login page then it will be look like like admin and then login right so it will be look great if i just put here xyz or something so this is not look like a meaningful word right that's why i put here admin and on the admin what module i want to load so let's say we have the thousands of modules then we want a specific module which is uh admin module right so just write here load children and it have a arrow function actually and just simply write here import and let's put the path of your component that that you want to put a lazy load admin then admin module right and now let's take it in the next line dot then and in the dot then we have a parameter actually so which we have a mode or you can put any name as in parameters here more dot admin module that's great our mode our module will be lazy load with this code one more thing that you have to keep in mind when you just load this uh mould to the uh as a lazy load like this then you do not need to import this component anywhere right you don't need to import this component in the app file or any other module if you just load the admin module directly like these modules import something and all then it the lazy load will be not going to work right so keep in mind this module should not be load anywhere else now just make the link so let's go to the here and just put here h1 h2 tag and light right here admin links like and just simply put here ul ally a tag and with the a tag just right here router link will be admin then login right and put here login like this similarly let's catch this one and make a link for list also put here list and here we just need to out here put here router outlet close it great so just simply right here click on any one so i don't need this one right now you can see that we got the login component as well as the list component so how they are different from the any other uh loading like normal loading so in that case what actually happened when we just load our application all routes are loaded here but how we do know that now the uh components or these modules are loading on the requirement or on the click right so for that we can just do a one trick here let's go to the admin.module.ps file and just right here console.1 and just write here admin module load it right so now when this first time page will load it then you can see that there is a known console and all right so when you click on the login then you can see that this page is loaded and definitely this page is not going to load again when you click on a login and again list and all right so it will just load up first time when you just working with the normal routing then you will see that this route will be loaded or first attempt right so that's great that uh we learned that how we can just make a list loading with the one route so let's say we have more than one route then how we can just do it so for that let's make one more module and just simply write here um ng g for generate m for module my module name will become a user minus minus routing hit the enter we have the two file as we just did with the admin similarly let's uh put here the component name and their component name will become inside a user module so like they will be like user slash login and user slash list right that's great so now we have to just write the routes for user also right then just let's copy some stuff so that we can just save the time just copy the same stuff because the component is inside the admin and user are the same so route can be also same so just put it use inside the user here and just push like this right so they are just loading here but one more thing we have to do it in the app dot app hyphen routing dot module we also have to define one more path for the user right just put it here simply user and now let's load here user module and just put here dot user module right the last thing we have to do inside the app.component.this let's make a copy for user link also and just put here user and user right so now you can see that now we are able to load the let's just go to the from the scratch so now you can see that we got the login and the list for admin and here you can see that this is works and you can just see here user and list also changing url but the all component have the same content so that you cannot identify that this is admin list or this is a user list right so let's make a little bit change inside any of one we can change all of them any stuff but due to the saving the length of the video i'm just going to put only content inside the user module html pages so let's go to the login and just write here user right and now you can see that on admin link there is a normal login works and list works and on the user links now you can see that the user login works and user list works so that's all about the lazy loading if you still have any kind of confusion ask me in the comment box don't forget to subscribe my channel and like this video bye bye take care

Channel: Code Step By Step

Views: 83,601

Keywords: Angular 10 tutorial, angular tutorial, anil sidhu, lazy loading in angular, angular lazy loading, Angular, angular 12 tutorial, angular 12

Id: JjIQq9lh-Bw

Length: 13min 8sec (788 seconds)

Published: Fri Aug 21 2020