Lazy loading a route module - lordoftheflies/angular-essential-training GitHub Wiki

Feature modules provide a great way to organize your angular application code into domain specific groupings. They also provide a way to have more control over the application code you deliver to the client. Angular has the ability to lazy load application code to the client based on application routing. Meaning it can deliver the core code needed for an initial user experience and then deliver more code later as the user initiates a request to access more features in the application. This is a great way to make angular apps more performant both from a usability standpoint and from a payload standpoint. Let's that's take a look at how we can utilize lazy loading for the new item feature module. In the app.module.ts file, we currently have the new item module in the imports list for the app module. This is telling angular to include that NG module in the build of the app code bundle. The initial bits of code delivered to the client, when accessing the app in the browser. With lazy loading we don't want angular to include this new item module in the app module. Instead, we want angular to build it in a separate bundle and then deliver it when a route is requested for it. So let's start by removing the new item module from this imports array and remove the import statement for it up in the list of imports. Then we can head over to the app.routing.ts file. And in here, we are going to want to register a new route and tell angular that we want it to be lazy loaded. We can do that by making use of a route entry object property named load children. So that's at a new object literal to the app routes array. Let's give it a property named path and set that to the value add. And then add a property named loadChildren. For the value of this loadChildren property, we want to use a function that makes use of the dynamic import statement, to load a module only when requested. So we can use an in-line arrow function here for the value. And then for the function body, we can use the import function called syntax and give that the relative path to the new item module. The import function returns a promise and we can call the then method off of that to take action after that promise is resolved. Ultimately, we want to return the loaded module, so we can use an arrow function here and use a parameter name of M and then the arrow, and then m.NewItemModule. The import call will return an object that will have a property of the new item module. So that is why we return that in this function literal here. And a quick note here, we didn't use any curly braces for this inline function. We just made the import call. This is shorthand for the function block and a return value. Okay, this is telling angular that we want to have a route entry for the path, add, at the root level. And when that path has navigated too we want to lazy load the new item module. The last thing we need to do is make a tweak to the new item module routing. Since the routing to it will now be done at the route routing level, we need to change the route entry in the new item module a bit. So over in the new-item.routing.ts file, the entry for the media item form component, is using a path of add. Since we just created a path at the root level of add, we don't want this add to be in here since it would result in the URL needing to have /add/add. We can change this path value to be an empty string here. This will make it so when this module is routed to and there is no additional path piece, this route will match and we'll take the user to the media item form, which is exactly what we want. Now, if we head over to the browser, and we go to the network tab in the developer tools, and click on the JS filter to only show JavaScript files being delivered. Then refresh the page. We see the bundled files that the angular platform compiles and delivers for the app. And when we click on the add icon in the app, we can see a new JavaScript files show up in the network tab. This is the lazy loaded bundle that angular made for the new item module, based on the route entry configuration we set up. That bundle contains all of the code from the new item module and was only delivered to the client when that feature was requested. So breaking your angular applications up into feature modules, provide some great advantages, both on the development side and on the user side of things. All right, with that, we have seen how to add a fair amount of routing to the application. The router module has a large amount of depth to it, that can be explored beyond this course. There is a lot you can accomplish with it when it comes to client side application routing.