Lazy loading standalone components | Routing | Angular 15

in this video we will learn about lazy loading with Standalone components in my previous video I have explained what are the different problems which we may face when you are not using a lazy loading but in this video we will go with how to implement this lazy loading but with the combination of Standalone components there are two types and two methods which we can achieve the lazy loading one is by using Standalone components and one more is by using modular approach so after angular 15 we have Standalone approach so that's why I am going with Standalone approach in this video and in the next video we'll try to close the previous approach that is modular approach of using lazy loading let me quickly jump into Visual Studio code here already we have created this app.component.ts and also we have created our app routing in our previous videos so it is a normal routing like login register dashboard and not found pages but what's happening here why we need lazy loading let me quickly go into the browser and check it out let me go here and just reload this now I'm in the register page but if you see the webpack and the source code you have downloaded all the unwanted components as well for example I am in the register component that means only register component and app component should be loaded because this two parts are in app component and this is in register component but I am not in the dashboard I am not in the login I am not in not found then why these three are required it is not required to download and not required to Showcase in our file system so how to avoid this so this can be avoided by using lazy loading the first approach which I want to go is by using Standalone component and if you see these components these are not Standalone as of now they are modular component where they have registered if you see app module they have registered in the app module so first I'll try to make this login component as a standalone component by using a property called as Standalone true and you can generate that Standalone even by CLI I have explained about it in my Standalone components video I'll provide the link in the description was that for better understanding how to create the Standalone components using CLI now I have given the Standalone true and all the inputs required for this so for now it requires only common module save this which is coming from a common component but there is a failure here component login component is a standalone and can't be declared in NG module before this Standalone property what we have created we have created an App module so we should not declare in the app module once the component is a standalone component let me save this and now it was successful let me remove all the dependencies save this and now go to your login component now your login component is a standalone component let me go here and just reload this even though if you make that component as a standalone component the dashboard login not found everything is loading here but it should not be the case that means making a standalone component will not directly use as the lazy loading we need to implement it externally in our routing so if you go to the routing there is a component property instead of using a component property now what we'll do is we'll use something called as load component and this component what it does is it will take one Arrow function and inside this Arrow function we have to import the path of the login component that is dot slash login slash login component and it is a promise based so you will be getting a callback with DOT then and this dot then let me catch this result that result is something like component and implies component Dot Login component it will give the instance for that login component this is an object and inside that object you will get the component name what it will do is it will load this component and this load component will only work out for your Standalone component not for the normal components so load component is a property which you can use for achieving lazy loading only for Standalone components now what will happen let's go and see now let me go to a default path and here I have made Standalone only for login component not for the remaining components so let me go to the webpack and SRC app if you see login is not found here but you are able to see dashboard not found and registered because these are not the Standalone components at the same time these are not the lazy loaded components that's why you are able to see everything but when that login component will be loaded in your Dom when the user clicks on login button then I'll be navigating to the login component then that login component will be loaded let me click on login now you can see the login component has been loaded in your SRC that means at the time of usage the component will get loaded and now the question is when I move to other URL will it be managed or what no once the component is loaded it will not vanish it will be in the SRC that means already you have visited that and that is the reason it will store that files in its source so when you go to register even though the login component exists why because already it has been loaded so lazy loading will help us only for the first time load of the component on demand basis so whenever I click on login then it will not load again already existing component will be triggered so this is how the lazy loading works now what I'll do is I'll go here I'll remove this register as a default one and I'll remove whole default path and I'll try to make this register component as a standalone component Standalone true and let me use the Imports with a common module because every component require this common module save this and now go to app module here we don't want the register component that's what the error is showing so let me remove all the dependencies for this save this now register component is a standalone component hence I can use load component load component which is a arrow function which can have an import method which will import the register dot register component and it is also a promise based hence we'll get a response and this response will have a component name called as register component and save this now I have saved the register let me go here and reload it is in login page so login will be loaded login is loaded but what I'll do is I'll go to dashboard page now login is a standalone component and also lazy loaded component register is a standalone component and lazy loaded component if you see the webpack these are not loaded as of now because I have used dashboard if you go to app only dashboard and not found has been loaded but other than this nothing loaded because they will be loaded on demand basis as they are lazy loaded components let me click on login component now login has been loaded and let me click on register component now register has been loaded so that is how your lazy loading will work and it is always recommended to use lazy loading either in the Standalone approach or modular approach so now let me remove all these dependencies here and here let me make the remaining components also Standalone and lazy loaded let me go to the dashboard component and try to give Standalone as true and use Imports and use common module now it should not be placed in any module let me go to app module and let me remove the dashboard dependencies here and here save this now it is working as expected now let me go to not found as well so go to not found component and make this component as Standalone before doing this let me go to app routing and this is a standalone component so let me use a property called as load component and this load component will load with an import statement with the URL dot slash dashboard slash dashboard component and you will be getting a callback function inside this callback function you will get the component instance by using component Dot dashboard component so let me save this and now not found is not a standalone component in my previous statements I mentioned load component can be used only on the Standalone components let me try to use it on the non-standalone components that means a normal component load component and use a callback function and this callback function will have an import statement dot slash and let me use not found slash not found component dot then of component implies component dot not found and to make it very clear the Callback function whatever it is writtening I am capturing in the component this name can be anything whatever you want to use you can use it's a local variable and the scope of that variable is only within this then block so let me save this and now go here and if you see let me reload and go to webpack SRC app not found and register actually speaking I am loading the component of the Standalone but even though I am making it as lazy loading that is not working as a lazy loading if you see here because I am in the register component and it has to be only register right so let me go here and give slash register and reload now only I'm loading the register component where my not found save this go here and just reload this now let me go to the console no errors that means I am in the register component but if you go to the SRC and source and app not found is loaded it is not a standalone component we are using a load component but that is not working with lazy loading why because the component is a normal component what I'll do is just I'll make it as Standalone component with true and let me import the common module common module and save this let me go to app.module.ts and remove this not found component and save this remove the dependencies save this now if you go here all are Standalone components and lazy loaded let me reload I am in the register page so only register should be visible here so you can see only register component loaded if I go to login it should load the login and if I go to some random URL then it should load the not found data so for example let me go to the code and let me go to app component app dot component dot TS and let me make it as one two three instead of login I'll make it as one two three four so when the user clicks on login button then it will go to one two three four and that one two three four route is not found so not found should load here if I am in the register page it should show the register you can can see I am in the login First so login login component is visible I'm in the register now so register component is loaded when the user clicks on login button then one two three four which is a not found and not found has been loaded that means all the components has been lazy loaded one point to remember you can use any component but the lazy loading will only work when that component is a standalone component otherwise the load component and the component like this will refer the same so whenever you want to you load component with a lazy loading then your component whatever you are targeting it should be Standalone else the component instance and the load component will work in a same fashion so that is how you can use your lazy loading with Standalone approach and in the next upcoming video we will Target for modular approach which is before angular 15. if you want to use something with modular approach then we will go with modular approach and how to use that and how to give an approach for our lazy loading hope you like my explanation if you like my video like share subscribe to my channel for more updates signing off stay tuned

Channel: Techshareskk

Views: 2,825

Keywords: lazy loading in angular routing, angular 15 routing, lazy loading in angular 15, lazy loading with standalone components, lazy loading using standalone components, standalone components in angular 15, routing with standalone components, standalone components routing cofiguration, load component in angular, how to use load component in angular 15, load component property routing configuration, angular 15 component

Id: UWGUuvm1CGU

Length: 14min 6sec (846 seconds)

Published: Thu Mar 09 2023