Angular 9 Fundamentals Creating a Lazy Loaded Route
This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Creating a Lazy Loaded Route" Lesson
>> So this routing table, in and of itself, is very, very simple. But, let's talk about how to do lazy loaded routes. So the first thing to do, for lazy loaded routes, and by that is, when you go to a route, that's when it loads that bundle in that asset.
[00:00:22] So if you have a very large application, with a large number of features, for optimization purposes, maybe you only wanna load, let's say, the main route. And then if somebody navigates to the features that they want to use, then you load those routes dynamically into your application. And so, this is a really nice way to start to break your application up into really small parts, and really optimize the experience for the user.
[00:00:54] And so, in order to do that, we need to create a new module and a new component. So let's go ahead, and let's create a login module and a login component. And we'll attach a route to that, and I'll show you how to do this in a lazy loaded fashion.
[00:01:16] So the first thing we need to do, is to generate a new module. So ng g m, for module, and I'm going to call this Login. And I'm going to also attach routing to this. So, I'm saying, generate a module and we're going to add routing to this.
[00:01:36] Now let's go ahead and attach the d flag. So we'll do a dry run real quick. Everything looks good, so routing module. Let's go ahead, and so, actually you have login module, and then you have login routing module. So let's go ahead and run this. Very good, now let's hop into the code just real quick and see what we have generated.
[00:02:03] So we have our Login Module, which is just a standard module. We have the CommonModule and then we have the LoginRoutingModule. Now if we go into the LoginRoutingModule, what you'll notice is, this is almost identical to our top level app routing module. The difference is that one, obviously we don't have any routes yet.
[00:02:26] More importantly that it's RouterModule.forChild. Now what is the difference between RouterModule.forChild and RouterModule.forRoot? So the idea is that, at some point in your application, or at any point in your application, you should be able to load routes dynamically. The problem is, you only want one routing service, handling the routes for your application.
[00:03:02] And so, when you do RouterModule.forRoot, it's going to load all of the routes, but it's also going to load the routing service. Versus, if we go into the LoginRoutingModule, it's going to load the routes, but it's not going to load the service. And so what you wanna do, is, for child routing modules or lazy loaded routing modules, you want to use RouterModule.forchild, because you don't want to try to override the routing service, that is another bit of unpredictable behavior.
[00:03:35] So for your top level RoutingModule, it's RouterModule.forRoot, which is going to load that routing service, and then for child modules, or lazy loaded modules you use forchild. So with that said, let's generate a component that we can use with in this login module. So ng, we'll go ng g, c for component, we're going to go login and let's just do -d and see what happens.
[00:04:11] So, notice it's generating this component, and it's putting it in the Login folder. And previously, in some cases, if you have more than one module in the folder, you have to tell the CLI, what module you want to put that in. But, because there was already a login module in this folder, it just went ahead and added that for us, so let's run this again without the dry run flag.
[00:04:36] There we go, and from here, back into our code, let's create a very basic route for the LoginRoutingModule. And so, path is going to be, we'll just say login, and component is going to be LoginComponent. There we go. And so now we have just a really, really basic route here.
[00:05:10] Again, just path component, most of the time, that's what most of your routes are going to look like. And so, we now have this module, and this component that's kinda encapsulated within this route, and we want to lazy load it, into our main application, how do we do that?
[00:05:34] So if we go back to our AppRoutingModule, we can add in, an additional route. And so it's still gonna be path, and the difference is that, we'll go here. And this is going to be login. And so I'm gonna need to make a change to my previous route, to actually make this work.
[00:05:59] So the path is the Login. And instead of using component, we're going to use loadchildren. And so what this does, is it basically performs an asynchronous call, to load whatever kind of module, wherever you point it. So it's gonna do an asynchronous call to load this module. So loadchildren and We're going to put this function in here, and we're going to use import.
[00:06:35] Login We're going to point it to this login.module. Now, because this is asynchronous, this is going to return a promise. And so then from here, we're just going to take this and unpack or return the module within this, so m.loginmodule. And let me break this down, because we're getting a little crowded.
[00:07:08] There we go. All right, so the path is login, loadchildren, which is calling import, and we're pointing it to the login module, which is going to return that entire file. And then within our promise, we're going to pull off or we'll just say take the loginmodule class, and load this into angular and spin it up.
[00:07:40] Now the one thing that we need to fix here, other than these few small syntactical errors, is, this is going to load this module, essentially kind of as a childmodule. The problem is that, every route to this module, is going to be relative to that. So within these lazy loaded modules, this is essentially kind of like the route.
[00:08:11] So, this is where you have to kind of watch the context of the routes and you can sometimes get into trouble, because, everything within this LoginRoutingModule, is going to treat LoginRoutingModule as kind of the root. And so, what we wanna say here is, for the root of this module, let's load in LoginComponent.
[00:08:34] So we're just changing the context just slightly. And so we'll go ahead and save this. And let's go into our application, and let's first of all open up the Network tab here, and lets go to Login. And we are going to hit Enter. And notice that it routed to login, so we have login works, hooray.
[00:09:06] More importantly, if you look into the Network tab of your Dev Console, and we start to scroll down, is, you'll see that we've loaded the login-login-module. And so what that has done, is, it's printed a separate bundle for this module. And then it's just pulling it over the wire, and then loading it into your application.
[00:09:34] So, how do I know it's lazy? Well, you step into the Network tab, and you can see here that it's loading this particular module, in its own separate bundle. So, that's how you do lazy loading modules. And for large applications, this is, I think, a really kind of a key fundamental piece of optimizing that experience.
[00:09:58] I've seen where this was not done. And also when you have a large center of your frontend application, then it's 2MB to load or 3MB, which is, if you're on the fast computer, maybe okay. But, I think it's really dangerous to assume that everybody's on a high speed internet, or that they're even on a desktop or a powerful desktop at that.