Angular custom preloading strategy

they say spot areas of angular 6 tutorial in this video well discus implementing custom pre loading strategy to control when a lazy loaded module is downloaded onto the client machine we use this pre loading strategy property we discuss the significance of this property in detail in our previous video now let's assume in our project we've got two modules employee module and admin module both these modules are configured to be lazy loaded now if we set pre loading strategy property to know pre loading then none of these two modules will be downloaded in the background on the other hand if we set pre loading strategy property to preload all modules then both the modules will be downloaded in the background so the important point to keep in mind is with these two built-in pre loading strategy option values we can either preload all the lazy loaded modules in the background or none of them but what if we want to preload some of the lazy loaded modules but not the others for example in our case we want to preload the employee module but not the admin module well that's exactly when we implement a custom pre loading strategy we implement custom pre loading strategy as a service so let's use angular CLI and generate a service here is the command ng for angular CLI itself G for generate s for service and let's name our service custom pre loading there we go our service is generated and if we take a look at our project here is that generated file we are implementing a custom pre loading strategy to make that happen this service class needs to implement the angular's built in pre loading strategy abstract class notice when I press tab the pre loading strategy type is automatically imported from the angular router package now if we take a look at the definition of this pre loading strategy type notice it is an abstract and has got this abstract method preload for which we need to provide implementation now if we take a look at our service class notice we have got a red squiggly so if I click on it and then plus control dot we get the option to implement pre-loading strategy notice vs code says pre loading strategy as an interface but we know it's an abstract class now when I select this option notice the preload method signature is incorrectly stubbed out so let's copy the signature of the method from here and then provide the implementation at the moment we don't have this route type imported so first let's import that and we also don't have the observable let's import that as well and then format this code so we don't have all those red squigglies notice this method has got two parameters the first parameter is called route and it is of type route this parameter provides us access to the current route and the second parameter is called F n as the name implies it's a function now the important point to keep in mind is this is the function that preloads a given module to specify if we want a lazy loaded module to be pre loaded or not we are going to include a setting on the route of that lazy loaded module in our case the lazy loaded module is employee module and the route for that is present in this file AB - routing dot module dot here's here's the route for our employee module notice within the route object here when I press control space I see data property using this data property I can pass any arbitrary data to this route and a value for this is an object within this object include any data that you want to pass to this employees route I'm going to include a custom property here I'm going to name it preload you can name it anything you want and the value for this is going to be true because we want the employee module to be pre-loaded if you do not want it to be pre-loaded then said this property value to false in our case we want it to be pre-loaded so let's set it to true so the important point to keep in mind is we're going to use this preload property to determine if we want a given lazy loaded module to be pre loaded or not so within our custom pre loading service implementation first check if the given route has got the data property if the data property exists check every Scot preload property and if that property value is true if both these conditions are true then that means we want to preload the module for that all we need to do is return this function which preloads the module notice the return type of this method it is absorber of any which matches with the return type of this preload method so if both these conditions are true then that means we want to preload the module so we return this function which preloads the module if any one of these two conditions is false that's going to come to the else block and we want to return here an absorber of null to indicate that we do not want the module to be pre-loaded to return an absorber of null we use the off method at this point all that is left to do is specify this service as of a custom pre loading strategy so within our app routing module instead of using the angular's built in preload all modules type we're going to use this service as the value for this pre loading strategy property we also need to import this service at this point let's save all our changes and take a quick look at the browser notice at the moment we are on the home route let's clear everything under the network tab and reload our home route notice our employee module is preloaded in the background because we have said the preload property to true now let's clear what we have under the network tab and navigate to it out in our employee module notice the only request that we see here is this XML HTTP request to retrieve the list of these three employees the employee module is not loaded because it's already pre-loaded now let's change the value of this property to false with this change our employee module should not be pre-loaded in the background let's navigate back to the home route clear everything under the network tab and reload our home route notice now the employee module is not preloaded let's clear the network tab again and navigate to the employees route in our employee module notice at this point the employee module is loaded on demand so three simple steps to implement a custom pre loading strategy in angular first create a service and that service should implement the angular's built-in pre loading strategy abstract class and then provide the implementation for the abstract method preload the second step is to import of a custom pre loading service and set it as the pre loading strategy our final step is to modify all the lazy loaded routes to include this preload property if you want a given lazy loaded module to be pre loaded then set this property to true otherwise false that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 25,743

Keywords: angular 2 custom preloading strategy, angular custom module loader, angular module loading strategy, angular dynamic module loading, custom preloading angular 2, angular create custom preloading strategy

Id: oiqrYF0cWCw

Length: 8min 25sec (505 seconds)

Published: Mon Dec 24 2018