Lazy loading in angular

they say spot 36 of angular six tutorial in this video we'll discuss lazy loading angular modules at the moment they sample application that we've been working with has got two modules our root application module app module and our future module employee module as you add more features to your application you'll have more feature modules like reports module admin module etc as we had more feature modules the overall application size will continue to grow at some point you will reach that tipping point where the application takes a very long time to load unless you are using lazy loading all the modules are eagerly loaded this means all the modules in your angular application and their associated components directives pipes and services must be downloaded from the server when the user first visits the application so depending on the number of modules in your application and the internet speed this could take a significant amount of time and may very badly affect the end user experience to address this problem we use asynchronous routing which loads feature modules like our employee module lazily on-demand this can significantly reduce the initial load time of your application at the moment both the modules in our angular application that is the root application module app module and our feature module employee module are eagerly loaded at the application load time now what we want to do is lazy load this employee module on demand to lazy load an angular module our application must meet two requirements here's the first requirement all the routes in the angular module that we want to lazy load should have the same route prefix we addressed this requirement in our previous video now the module that we want to lazy load is this employee module all the routes of this employee module are present in this employee routing module notice all these three routes have the same route prefix employees here is our second requirement the module that we want to lazy load should not be referenced in any other module if it is referenced then the module is eagerly loaded instead of lazy loading it so if we take a look at our route application module app module notice our employee module that we want to lazy load is already referenced in this route module app module so this employee feature module is eagerly loaded let's actually prove this at the moment we are on the application home route the browser developer tools are open let's click on the network tab and let's clear this traffic that we already have and reload the webpage notice on the browser status bar when we issued our first request there is 4.3 MB of data downloaded from the server and there are 11 requests in total let's take a screenshot of this so we can compare it later now let's clear everything that we have under the network tab and navigate to the employees route keep in mind this employees route is present in our feature module employee module that we want to lazy load at the moment the only request that is made to the server is this XML HTTP request to retrieve the list of these three employees notice we have not downloaded the employee module because the employee module and all its associated components directives pipes and services are downloaded when we first visited the home route so at the moment our employee module is eagerly loaded it's not loaded on demand when we first visited route in our feature module employee module now let's take a screenshot of this as well so we can compare it later when we lazy load our employee module now to be able to lazy load the employee module our application should meet this second requirement that is the module that we want to lazy load should not be referenced in any other module at the moment our employee module is still referenced in our route application module map module so let's remove this reference and this reference within the app module now let's quickly verify if we have any other references to the employee module and the easiest way to do that is to go to the employee module file right click on the class and then select this option find all references notice we don't have any other reference so we are good at this point let's save all our changes and take a quick look at the browser notice now our home route works but when we navigate to any of the employee feature module routes we see the page not found component displayed that's because our application at the moment doesn't know anything about our employee feature module and its associated routes to lazy load our employee feature module we use load children property so we include a new route in our application routing module a protic module and notice we have set part of this new route to employees and if you remember this employees is their old prefix that we have for all of our employee feature module routes and our employee feature module routes are present in employee routing module notice all these three routes have that same prefix employees so in this new route that lazy loads our employee module we set the path to that common route prefix employees and the value for load children property is a string and this string contains two parts the first part here is the path to the file that contains our employee module and remember our employee module file is present in the employee folder and a name of file is employee dot module dot tears in the file name we do not include the file extension and then we have the hash symbol and then the name of our feature module class our feature mode last name that we want to lazy load is employee module so let's include this new route in the app routing module so within our app routing module that contains our application level routes let's include of a new route that lazy loads of our employee feature module now one important point to keep in mind is this new route should be before this wildcard route otherwise we'll never be able to get to the routes in our employee feature module because this wildcard route matches all those routes and we always see this page not found component template displayed so let's move this new route to be before the wild-card route notice now our home road works but when I navigate to slash employees I do not see anything when we go to slash employee slash create we see the page not found component template displayed and when I try to edit an existing employee we again see the page not found component template displayed let's understand why our employee feature routes are not working notice in the a protic module the path to our employee module is employees and even in our employee routing module the parent part for all these routes is employees so to be able to get to this list employees component for example we should have employees twice in the URL but at the moment we only have it once so if we want to see the list of all employees we should have employees slash employees in the URL there we go now we see the list of employees but that's not what we want the route part employees should be there in the URL only once to achieve this all we have to do is in our employee routing module remove this parent path employees notice now our home route works of our employees route Berg's edit route works and create route also works now let's prove our employee module is being lazy loaded let's go to the home round clear everything that we have under the network tab and then reload the webpage notice now the data that we downloaded from the server is only 4 MB and the load time is 2.8 5 seconds now when we compare this with the screenshot that we have taken when beaver eager loading employee module we have downloaded 4.3 MB of data from the server and the load time is three point three three seconds now let's clear everything that we have another network tab and navigate to the employees route notice now in addition to this XML HTTP request which retrieves these three employees from the server we also have our employee module downloaded on demand if we compare this with the screenshot that we have taken notice when we were not lazy loading our employee module we only had one request and 785 bytes of data transferred whereas now because we also have to load the employee module we have to requires and 269 kilobytes of data transferred so the important point to keep in mind is our employee module is no longer downloaded when our application first starts it is lazy loaded only on demand whenever we first visit any of these three routes in our employee module that's it in this video thanks for watching and have a great day

Channel: kudvenkat

Views: 113,020

Keywords: angular lazy load application, angular 2 async route, angular async routing, angular asynchronous routing, angular lazy loading, angular 2 lazy loading, angular 2 routing lazy loading, angular 2 lazy loading example, angular lazy loading modules, angular lazy loading child routes, angular lazy loading example, angular lazy loading components, angular lazy loading tutorial, angular lazy loading feature modules, angular lazy loading benefits, angular lazy loading routes

Id: 75XFBIKLPQY

Length: 10min 47sec (647 seconds)

Published: Wed Dec 19 2018