Check out a free preview of the full Building Awesomer Apps with Angular course:
The "Lazy Loaded Modules" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Here's what you'd learn in this lesson:

To help with creating better performance in Angular applications, Lukas shows how to load modules only when it is needed.

Get Unlimited Access Now

Transcript from the "Lazy Loaded Modules" Lesson

[00:00:00]
>> Lukas Ruebbelke: Next piece, lazy loaded modules. And so this is almost like it sounds, we're taking a module and reloading it lazily. So we'll only load a module with its assets and resources when we navigate to it or when we need it. And so what this means is, instead of having one large application, we can break it up into smaller pieces, and then just load it when we need it.

[00:00:28] So if you have an application where 80% of the user's time is spent on a single view, then it may make sense, let's say we have four other features to make those lazy. They never have to incur the overhead of loading those things, so it's gonna make it that much faster.

[00:00:48] And so, this is a pretty easy process to do this, surprisingly easy, actually. The first thing to do is to take a, what would be a component, and you wrap it in a module. So what you have to do is you have to have it where it would be just a normal component.

[00:01:08] Now it has to be a module that holds the component. And then within the module, you set up a route, just like you would in a normal module. So you can see here, so we have this child module, and we have a single route in this case. Root path load profile component.

[00:01:39]
>> Lukas Ruebbelke: And then what we do, is in our routing table. Instead of saying, go to this component, instead we're saying load children. In other words, go to this resource, user/user.module. And so this is the actual file. And then we're pointing to the actual module that we're exporting. We're saying load this in.

[00:02:04] So take something you want to make lazy, wrap it in a module with its own routing, and then in the parent module, instead of calling it a component, call load children, and they see point to the file. And then the module that you actually want to load from that file, right here.

[00:02:28] So conceivably, you can do this in just a few lines of code. And so for instance, this is on the profile route as you'll notice here, that at the bottom,
>> Lukas Ruebbelke: It's loading this user module chunk.
>> Lukas Ruebbelke: But you'll only see this when we go to the profile route.

[00:03:02] So, I'll just actually pull this up and then I'll see, I may or may not actually do one of these. So here just refresh this. So if we go here, you can see like just a bunch of stuff loading. [SOUND] Over here, all kinds of stuff so. Here's all our bundles, everything.

[00:03:32]
>> Lukas Ruebbelke: Now let's go to the profile. Here and let's see, now is loading in. The profile information that we need. And so I think I can, let's see how fast I can do this in the CLI real quick. We're kind of in the home stretch and I really want to at least talk about this fire base thing for at least a minute.

[00:03:55] So let's go ng g m,
>> Lukas Ruebbelke: Let's see here.
>> Lukas Ruebbelke: We're going to create a refreshments module with routing. Let me show you one other thing real quick. If you ever wonder, did I get this quite right or what's going to happen? So sometimes it's like is this going to generate in the right folder?

[00:04:30] I'll do --dry-run, and so you can see here it's like okay refreshments, do this it's exactly what I want.
>> Lukas Ruebbelke: So I'm gonna say generate this module and spin it up with routing. So I just pull this up here, and just went real quick,
>> Lukas Ruebbelke: ng g m for module, refreshments --routing --dry-run, cuz in this case, I wanted to just see what would happen.

[00:05:03] All right, let's go ahead and run this.
>> Lukas Ruebbelke: And then what I'm going to do is ng g c for component, refreshment, and let's go energydrink.
>> Lukas Ruebbelke: I think that should work.
>> Lukas Ruebbelke: So it just did it.
>> Lukas Ruebbelke: Did I do this? I did. That's what happen, all right.

[00:05:51] Let me delete this, let me start over. I'm so excited. If only ng lint.
>> Lukas Ruebbelke: Refreshments, all right. Now let's try this.
>> Lukas Ruebbelke: Okay, so far, so good. Let's just jump into this code here. Routing module.
>> Lukas Ruebbelke: What is in every route for the most part, unless it's lazy?

[00:06:23] Path and component.
>> Lukas Ruebbelke: Energy drink component.
>> Lukas Ruebbelke: Then let's go in here.
>> Lukas Ruebbelke: App routing module.
>> Lukas Ruebbelke: And I suppose I'll do this by hand.
>> Lukas Ruebbelke: So in this case, we'll go refreshments. So we're just creating the path, then load children. And then,
>> Lukas Ruebbelke: Refreshments, refreshments, module, refreshments, module.

[00:07:14]
>> Lukas Ruebbelke: I will be so pleased with myself if this actually works.
>> Speaker 2: It's probably an error.
>> Lukas Ruebbelke: What?
>> [INAUDIBLE]
>> Lukas Ruebbelke: What's gonna work? Teamwork. You're awesome, thank you. I think, let's see here.
>> Lukas Ruebbelke: We could clear this.
>> Lukas Ruebbelke: Please work.
>> Lukas Ruebbelke: And so what we saw is,

[00:08:04]
>> Lukas Ruebbelke: Let me refresh this entirely, real quick.
>> Lukas Ruebbelke: So it looks like this is the bundle.
>> Lukas Ruebbelke: That's interesting.
>> Lukas Ruebbelke: So if we go to here, again this user module chunk, and if we go to refreshments.
>> Lukas Ruebbelke: What I'm not getting the chuck though. It's there.
>> Speaker 2: Scroll back up just a little bit.

[00:08:51]
>> Lukas Ruebbelke: Here?
>> Speaker 2: No, down a bit.
>> Lukas Ruebbelke: It's that right there.
>> Speaker 2: Right there, refreshment's model chunk. Just up a little bit from here.
>> Lukas Ruebbelke: Yes, air five for the win. It's almost the weekend. I am doing it, everybody. Look at me.
>> Lukas Ruebbelke: All right, so,
>> Lukas Ruebbelke: Pretty easy despite all of my fumbling.

[00:09:20] Module just really comes down to how you load it.
>> Lukas Ruebbelke: All right, I think I have just a couple more slides and then we are going to talk about Fire Base.
>> Lukas Ruebbelke: Anybody have any questions about those two things that I just covered? Lazy loaded modules?
>> Lukas Ruebbelke: Change station strategy?

[00:09:43] This will make your app fast.