0:22 There's a metric that is called "Time to Interactive," and we definitely want to optimize for that. One comfortable matter we can apply here is to not always load the entire application to start-up. We have to reduce the number of files we have to actually download, and we just want to use the necessary ones to get our application up and running.
1:45 How can we do that in Angular? In Angular, the Angular CLI already has a mechanism to create this on the fly. For instance, let's paste in this comment here. Here, we use the Ng command, which is the Angular CLI.
1:58 We generate a new module, we give it a name, and we tell it, it should get hooked up to that app module. Then we also give it this route path. We want to generate here a route, and that will generate a lazy-loaded route that just gets loaded at the very specific moment when it is needed.
2:15 Since we already have the entire code here, and we don't want to override everything, let's try to do this by hand to see the very steps that are involved here. First of all, what I need to do here is to create a new nyan.module.
2:28 This is because, in Angular, the minimum unit that can be lazy loaded right now is a module. We need one of those. We have here an NgModule. I export class, and we just call it myModule.
2:45 Now, we definitely have here a declaration section. We want that now, that Nyan component -- which right now, is registered here in the app module -- is now registered to that myModule. I would fetch in that one here.
2:59 In the import section, we want to define here now a separate route. Right now, if I go to the app module, you can see here the route is defined inside here. We want to split that out into that myModule. Let's see how.
3:13 First of all, I need to route a module. We use the forChild. Let's first import it here, because this is now a child route, and not in control of the entire application, but just a part of the entire routing system. The path here will be nothing. We will see why.
3:31 We have path four, because it's an empty string. The component that you get loaded is obviously our Nyan component. All right, with that, we should be already set up in our Nyan module.
3:55 Actually, what we want is to have that in its dedicated own bundle. We cannot have any hard references, and so, let's remove here this Nyan component, which is registered, anyway, now in that Nyan module.
4:07 Now, we need to change, obviously, this line here below. Since we don't have the component at-hand right now, but it will only be available at runtime later, we can use the loadChildren property here. Starting with Angular 8, this takes a function where we can directly use another import statement.
4:23 I go here to that Nyan module, which we just created, because that's the part we have to lazy load. We cannot lazy load the component right now. Then we use here the callback, where we get here our Nyan module.
5:09 As you can see, again, if I refresh here, we just have, again, our main files. Once I click, this master files get loaded in on the fly over the network application, module gets booted, then we see the image just as before.