Angular 10 Tutorial #47 - Lazy Loading in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn about a very very important concept called lazy loading any real time practical application that you talk about will be made up of multiple smaller modules because angular supports and encourages modular architecture it's likely that you would work with multiple modules in any given application but you don't want to load all those modules at the initial or at the start of your application you need them as and when user progresses to certain views or certain functionality or behavior that's what is lazy loading we learn all about it we will learn about it we will master it and we will also do some hands-on examples to implement it and learn and master it let's get started this is part 47 of the angular 10 complete tutorial playlist i have planned around 100 tutorials in this particular series for you the playlist link is in the description box below as well as some of the links to the previous episodes i usually make notes in every video and those notes are also available in the github link that link is also is in the description box below make sure you check it out all right so these are all the topics that i've covered already so far in this particular series i'm sure if you really want to learn and master angular this is the series that you should follow completely and to end please do that also if you have any doubts in any of these topics that i have covered so far please reach out to me in the comments section i will be more than happy to help you today we are on the 47th episode and today we are learning about lazy loading so what is lazy loading right so by default ng modules are eagerly loaded which means that as soon as the application starts all the modules that is the ng modules which are there are loaded immediately now the trick here is whether they are necessary or not is it is not something that angular knows by default right we need to tell angular which modules are absolutely required which are not that being said let's take a step back to understand this one sentence because it's absolutely important for you especially beginners to understand what this means for you to build applications in a smaller sense it might look like um easy right so let me open that for you and make some notes here right so what we are going to do is um we are going to make some notes and we are going to call it 47 today we are learning about lazy loading okay all right so that's where we are at uh today we are learning about lazy loading so what is so first thing about this that any angular application is made up of multiple modules right it's not single module it's of multiple modules right now take a look at it what i am going to explain first because it is very very important that we understand this end to end now let us say we are building a system called loan management system right so think about this this system will have multiple modules right like for example loans it will have customers it would have payments it would have invoices it would have reports it would have authentication it would have authorization it would have downloads right or admin functionality so these are all modules right these are all modules now think of it this way at angular by default right angular by default will load all modules in at start which means whether the moment you hit login all of these modules are loaded which makes the website or the application very very heavy right loading all modules initially whether required or not makes your application take a hit makes your application slow slow performance wise right also it's a bad idea it's a bad idea to expose modules which user is not going to use not going to use or rather i should say user should not use should not see or use right so that's where lazy loading comes into picture right which means initially initially we will load only only modules which are absolutely mandatory which are mandatory right which are mandatory rest we will serve as requested right so when does a request happen so what happens is we crea we will create routes right will creates route for each module right for example i will say slash users right or say slash payments right i will load this module payments module only when the user comes to this particular page right i will load this module only when the user will make a request to this route that means whenever the user will come to this particular route then only we will load this module that way it saves three purposes one it will save performance of your application because it will only load modules when it's requested second we can verify if the if the user has access to this module right we can put that condition and say that does the user have access to this module if yes then only load it if not redirect right third that way at this point of time when he has only few actions would be permittable right in this module so that is that's exactly where lazy loading is used right so this is the entire concept of lazy loading sorry if you understand this you understand lazy loading right now that being said um let's see the other features and then we will get into the hands-on all right so for large applications with lot of routes consider lazy loading a design pattern that loads ng modules as needed right so if somebody is asking you what is lazy loading your answer should be it's a design pattern which helps us load the modules as requested and as needed right lazy loading will always help us to keep the initial bundle sizes smaller right which will in turn helps decrease load times right so like i said um if you see lazy loading will help in keeping your builds smaller you will hear this word what is this means this means whenever you do ng build right or you compile application right to deploy you would see that it will generate some files right so the size of those files will be will be smaller right which means the smaller size of the application means it will load fast right it will load fast it will respond better right and overall um it will be a much better application for the end user that's what this means from angular 8 onwards they have changed the way lazy loading works so if you have uh if you are coming from previous versions of angular especially before 8 right so if you are coming from 6 angular 6 angular 4 angular 5 7 the way we write lazy loading is different from angular 8 they expect it to be a function which will import dynamic syntax okay so i will show you that syntax and will generate it but just remember this is an extremely important concept if you are coming from previous versions of angular 8 right because i hear a lot of you are working still on angular 6 angular 5 angular 4 also i've got queries in angular 2 also um i've got one inquiry from angular 1. x also so yeah i know that there are people on different versions of angular but if you are coming from any version previous to angular 8 remember the syntax has changed right syntax has changed and a lot of youtubers or tutorials they have not updated the tutorials they still show the old way of doing it don't follow that it will not help you it will get you into trouble um please use please use the new um it's a dynamic uh it's a method it actually expects a mesh function right so new um it expects a function okay i'll show you that how to write that okay so that that being said let's see the next with lazy loaded modules in angular it's easy to have feature modules right only when the user navigates to the routes for the first time now i showed you this example with payments right when the user launches slash payments he will go to the we will load that module this helps us in improving the performance reducing the initial bundle size um these are also called as modules on demand right so i will show you that in the console also now all right so now let's see how to do that right so first thing is to create a feature module okay and the second is to have that added in the app routing right so let's see that so remember one important thing the modules generated using angular cli for lazy load lazy loading there will be this is very important there will be no entry in app module usually whenever we create a module there will be an entry in app module right because if there is an entry in app module it will load it initially so for lazy loading module there will be no entry in app module which means it will not be loaded initially right this is the reason why it will not be loaded initially because it's there is no entry in app module okay all right so that being said let's now look at how to generate that was also that was all about the theoretical explanation and concepts behind lazy loading now let's see how to use that right so the command is ng generate module here you are first writing you are telling angular cli to generate a module and then you will give a name now that name can be anything you give any name you want right module name you give name here generate module module name and then you will mention what is the route that you want to configure so you will say route and what is the name of that route so here again you will say module underscore route okay and then here is the trick then it will you have to tell it which module you are loading it so here we are saying app dot module right now see this is which module means where it will go into the entry right so when i execute this command it will create a new module by this name it will add a route in this app route app routing mode right let me show you that now in action so for example we will now do ng generate say invoices is the module we want to build or payments or whatever name you want right and then i'm saying the route should be payments whenever the route payments is called we should load this module and it's following children's so now i'm saying which module app.module now let's see how this works copy this and paste it here right so i pasted that okay ng generate module right so it has to be module that's why it failed generate module payments okay so now we are expecting it to generate a payments module okay so now you see it generated a payments module here you see it created you can see it here also here you see payments payments we have payments dot module right this is just like another app routing module that we saw for app module right same thing we have a component it will generate one default component right it will generate will generate the following right a a routing module for the module a routing file for module a module file and a component right now component will have html file it will have these css or scss depending upon which and then a spec file and then obviously the class which is controller right so these are all the things it will generate and update the app routing module see here it has updated the app routing module here you see update right so we are telling but there is no entry in app module it is we are only telling it to update the app routing module right so let's see in our routing module now we have an entry for path payments and it is loading and see the syntax now here right so here we are saying path payments load children import from that module payments module that means import whatever it is right the what this line particularly means is that the first one is the let me take open the nodes so it means the first right whenever you hit payments now it will load this module on demand and its children children if needed okay that's what that one line means and it's the heart of any lazy loading so make sure you understand that you're telling path payments and then you are telling load the children from this module and payments module it was pointing to payments module right i hope it's clear if not drop me a comment i will try and help you with a better example now in the payments routing module you see we have again routes here right which means i can add more child routes to this payment let's say you want to add a new route and you want to call it payment success right so if it is payment is successful you want to show a message you can add then that will become like this payment slash success right this is a child this is the main module right so this is becomes so we will add that here in the success right i will show you that also in just a bit i hope it's clear how to generate right so for generating use this command right once you generate you should see that in app routing right file and you should be able to see that in working okay now let me show you that in action okay so let's start our application these topics are little advanced so if you are new beginner i would say please go back one step always pause it go through the code go through the changes done in the file folder directory and then understand it better okay if you still have any doubts please reach out to me in the comments section i'll be more than happy to help you all right in the meanwhile uh let me also show you that i have started a new uh project which is a mean stack application on where we are building a complete loan manager system from scratch on the main stack so make sure you check out that playlist also it will be really fun to learn all right okay so we have our application up and running we have our local host running so now i will show you inspect element go to console go to network and refresh so you would see all of this right you see main you see polyfills leads everything right but you don't see payments because now i'm going to go to payments now see i'm putting that in my url and enter so you see now it is payments here right it is saying slash payments and then when you scroll down below scroll down below and you would see payments module dot js you see this this will only be loaded when you request this payments similarly i have one more route for customers let me load that no i don't think i have it let me see okay no i don't i have it okay i have it so let's see okay so slash customers enter you should see the customers lazy loaded okay it says the page you're looking does not exist but we have that okay it's customer not customers okay so now you see customers module right so what you're seeing is now but you you don't see payments here right because payments will only load when you request payments route see this one right it will only work when you request this route if you request customer it will only load that module right that is because these are lazy loaded modules right they will only load when you go to that particular route right now let me show you one more example which is here in the payment routes we added one more path which is success right let's go here and go to payments and you will see that this is loaded payments module is loaded now similarly for child see right so this is how you can implement for a particular route now if you are going to a module whichever module you are in that module will be loaded right this saves a lot of time now see unnecessarily we have not loaded customers because we don't need it here but if there are some modules which we need them commonly throughout across we can build common libraries and import them right and we i'm going to show you that also in the live project so make sure you stay follow me in that main project um where we do end to end it would be fun all right so that being said um this is the concept of lazy loading and this is how we use it in our applications um whenever we try to load or anything any modules right so basically everything is made of modules we load them as and when requested right we'll we'll learn more about it when we start the live project i hope you will learn um the practical way at least for now you know what is lazy loading how to use it how to generate modules implement lazy loading in the next episode i'll cover about route cards very very important topic because you want to implement authorization authentication in applications and routeguard helps us to do that you don't want to miss on that so stay tuned for the next tutorial if you like my work please consider buying me a coffee at buy me a coffee dot com slash our tutorials thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 8,378

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, angular lazy loading tutoria

Id: auMomWvhW14

Length: 22min 9sec (1329 seconds)

Published: Sat Dec 12 2020