Angular Core Lazy Loading Modules

[00:00:00]
>> Lukas Ruebbelke: What about these other features that we have? So what about Home, Projects, Customers? Well, we can route to them, but the difference is each one of these have their own routing modules. And so now, we can lazy load these particular module. So if I go here, let's redirect to the home.

[00:00:27] So instead of loading, I'm going to leave this login component here, and we'll just go login. And then duplicate that, and instead let's just go here. And instead of manually or actually directing straight to a component, instead, we're going to do load children. And then, we will put in the path, the file structure that we're referencing that module, that to say when this is loading, reach out in the file structure and asynchronously pull this in.

[00:01:05] So we'll go home/home.module.
>> Lukas Ruebbelke: And so, this is the module file. And then, we are actually targeting the home module.
>> Lukas Ruebbelke: So we're on a route, we wanna load the child module. And of course, from this directory we wanna go to home/home.module. So this file. And then, within that, HomeModule here.

[00:01:39] So let's save this.
>> Lukas Ruebbelke: Let's go back and see.
>> Lukas Ruebbelke: Undefined is not a function. I wonder if I spelled this wrong.
>> Student: So I get it to work. If in the app module, you reorganized the whole module and app routing module declarations. I'm not sure if that's the right thing to do in the import.

[00:02:07]
>> Lukas Ruebbelke: Did-
>> Student: In the app module.
>> Lukas Ruebbelke: Okay.
>> Student: So moving Home above App.
>> Student: I don't know if that's the right thing to do, though.
>> Lukas Ruebbelke: Is that how you got it to work? If that is, I'm giving you 50 bucks after this class.
>> Student: [LAUGH]
>> Lukas Ruebbelke: [LAUGH]

[00:02:27]
>> Student: Cuz if it's doing lazy loading, I figured-
>> Lukas Ruebbelke: Right.
>> Student: Home might not exist yet.
>> Lukas Ruebbelke: So [LAUGH] because we're lazy loading, that home module has to exist before we can route to it. Within GRX, on the other end, so order does matter. For instance, when we get into effects, effects, as well also has to be that very last thing.

[00:02:53] So in fact, I'm gonna just go ahead and put this right on the bottom. All right, so lesson learned. I completely spaced out for about three seconds. High five, is that if you're lazy loading, put the modules that you're lazy loading on top. So homewards. So let's go ahead and do these other two.

[00:03:19] The other two, so we'll do, well, the other two features, so projects and customers. And then, from here, we can go projects/proejcts.module.
>> Lukas Ruebbelke: And we'll go customers/customers.module#CustomersModule.
>> Lukas Ruebbelke: All right?
>> Lukas Ruebbelke: And so now, yes?
>> Student: I've just got a quick question. What does that hashtag on that loadChildren do, exactly, after that module part?

[00:04:06] projects.module#.
>> Lukas Ruebbelke: So the question is what is this hashtag, and then essentially that signature after that. So what Angular's doing under the hood is it's saying go to this file and load this module. So you can think of it almost like a named anchor. When there's, for instance, within href is that you're saying go to project module, which if we open that up.

[00:04:38] Well, let's go to home, since it's open. And it's saying, or not home routing module, but if we go to the home module here, is it's saying, go to this file and then load this module. And so, your module is the entry point for everything inside of that module.

[00:04:54] So it's saying go here, and then bootstrap whatever you load. When you load it across the wire, bootstrap it and spin that up inside of the application. So very good question. That is you're basically saying go to this file, and then from here, then go and look for the module in that file, this module, and then bootstrap the application.

[00:05:20] Because technically, if you have a module and it's configured right, it could be a standalone application. Which is kinda what we're doing, is we're kinda building these standalone things that we're then bootstrapping into our application, because it's being lazy loaded over the wire.
>> Student: I think the routes are missing on the lazy loaded modules.

[00:05:40]
>> Lukas Ruebbelke: Right, yep.
>> Lukas Ruebbelke: Our first path.
>> Lukas Ruebbelke: And then, from here, component. And then, let's go with
>> Lukas Ruebbelke: Then, let's hop into our projects.
>> Lukas Ruebbelke: Let's do the same thing here.
>> Lukas Ruebbelke: And component is ProjectsComponent. Yes?
>> Student3: So having never seen Angular routing before, this looks basically what you're doing is declaring a route at the root level on the app?

[00:06:42] That then delegates to this components router? So we could theoretically have multiple routes in this routing table that would be tacked on to the end of that?
>> Lukas Ruebbelke: Yes.
>> Student3: That's really cool.
>> Lukas Ruebbelke: And so, what we can do is, and if you look at the reference app, we'll see how far we'll get today.

[00:06:58] So I may kind of circle back on some of this advanced stuff. But you can come here, and then on this component, then let me just break this down.
>> Lukas Ruebbelke: Is then defined child routes on this. And so within this, then you can say I wanna go to a children.

[00:07:20] And then you can define additional routes. And so, this is a really handy way to start to define how your application is navigated from a user experience of within my customer's, let's say UI, that maybe you wanna load something else without having to reload the page. And so, you can just say when we go to this sub-route, just load this component in here.

[00:07:46] And so, that's exactly the idea, is that you start to build a little subsection, even with it's sub-routes. And then, you hook it in to the parent application.
>> Lukas Ruebbelke: And let's set up the point I was making is you can navigate from the URL. So this is good if you want to direct link into something.

[00:08:08] But you can also navigate from the UI. And so, let's see what that looks like. So I'm gonna go into our AppComponent.ts. And what I'm going to do here is I'm going to generate some links. So this is just going to be a basic data structure.
>> Lukas Ruebbelke: Or rather, we'll go like so.

[00:08:48]
>> Lukas Ruebbelke: And we'll go
>> Lukas Ruebbelke: So be home, and we'll give this a title of Home.
>> Lukas Ruebbelke: We'll duplicate this, and we'll say customers.
>> Lukas Ruebbelke: Customer projects.
>> Lukas Ruebbelke: Yes?
>> Student3: So my colleague who's following along at home pointed out that there's a wild card redirector in the base router, in your app routing.

[00:09:26] Is that override?
>> Lukas Ruebbelke: Let's take this off real quick.
>> Student3: No idea.
>> Lukas Ruebbelke: We're coding together. Nope. Nice try, I've done something wrong, we'll fix that in just a moment. But what I will do, let's just finish this one piece out here in our
>> Lukas Ruebbelke: AppComponent.ts. And just so I get the structure right, let me just pull this up.

[00:10:06]
>> Lukas Ruebbelke: So path, set this to
>> Lukas Ruebbelke: Customers, project.
>> Lukas Ruebbelke: This is actually gonna be
>> Lukas Ruebbelke: Let's attach an icon to this. So we'll go icon.
>> Lukas Ruebbelke: Home.
>> Lukas Ruebbelke: Icon, face.
>> Lukas Ruebbelke: And let's go icon: 'projects'.