Angular Core Login Component Routing

[00:00:00]
>> Lukas Ruebbelke: So a routing table is fairly straightforward. It consists of, in its most basic form, a path and a component.
>> Lukas Ruebbelke: And from here we could do something like. Let's go with LoginComponent initially
>> Lukas Ruebbelke: And because this is going to be our default route, we're going to.
>> Lukas Ruebbelke: Well, we'll leave this here for now, but we'll also do path.

[00:00:44] And we're gonna put **.
>> Lukas Ruebbelke: And what this is, this is a route card, so if you go to a route that doesn't exist, then it's simply going to redirect to wherever you would like. In this case, we're going to go back to the root. And then from here, pathMatch full.

[00:01:09]
>> Lukas Ruebbelke: This is a string. Here we go.
>> Lukas Ruebbelke: And just make sure that this built okay.
>> Lukas Ruebbelke: So it's looking for LoginComponent. So we'll just hop in here and just check this real quick.
>> Lukas Ruebbelke: Ui login and we'll go to our lib. Our login module you could see here that.

[00:01:50]
>> Lukas Ruebbelke: Our referencing component that does not exist just yet. So I presume that I had done that previously. So if we're going to generate a component in a library, then go ng, we just make a space here, ng g c, and we'll go with login for LoginComponent. And then we'll go, project=ui-login.

[00:02:27] Now, because there's a bit of uncertainty about where this actually exist and if this is going to work, let's go here. Do -d, and you can see that ui-login, lib, login, login_component. Everything that I was hoping would happen was there, so. And g g, g for generate, c for component login.

[00:02:54] And because I wannna put in the ui-login lib, then I'm doing --project, and that equals ui login. So I'm going to go ahead ahead and take off the dry run tag and it should be here. Let's just double check. Login > LoginModule.
>> Lukas Ruebbelke: All right.
>> Lukas Ruebbelke: Now, it said this updated.

[00:03:21] Don't save. So apparently it's keeping the cache.
>> Lukas Ruebbelke: Back into our module, that's exactly what I expected.
>> Lukas Ruebbelke: All right? And let's export this as well.
>> Lukas Ruebbelke: LoginComponent. So we're just start to revisit what we had seen earlier in our login lib in our module we've just generated the LoginComponent.

[00:04:01] And we're adding it to our module. Now, one thing we need to do within our variable, let's go ahead and export first and foremost our UiLoginModule. And so, this is in the root of this project. Under src, there's this index.ts, which is a barrel roll. So I did have a question like, what is a barrel roll?

[00:04:29] What this allows us to do is essentially from a single file, export everything, so what we were doing with our material module. So we'll take the LoginComponent. Generally what I'll do is I'll actually import it like this, and then I'll just turn around and change that to export.

[00:04:48] All right. So now this will exist and should be available up in our AppRoutingModule. Let me make sure that also I have the module in our main AppModule. So this is one of these things when you start to break things out, you have to make sure that they come back together properly.

[00:05:23]
>> Lukas Ruebbelke: There we go. All right, so now. Working from the bottom up, so now I'm at the top. I imported the UiLoginModule into AppModule, which then now, if I go to the AppRoutingModule, that this should be available here for us to navigate towards.
>> Lukas Ruebbelke: And so let's go back here and see where we are.

[00:05:58]
>> Lukas Ruebbelke: We just rebuild this again, cuz I beg to differ. I think this does have an exported number.
>> Lukas Ruebbelke: There we go.
>> Lukas Ruebbelke: Now, if I refresh this, we can see here that login works. So how is this getting in the page?
>> Lukas Ruebbelke: Very good question.
>> Lukas Ruebbelke: Now, remember previously we had added in the projects.component via the selector.

[00:06:42] So if we go into our app.component.html, you notice down here, we have app-projects that's sitting right on top of this router-outlet. Well, once we delete this, the app-projects is no longer being hardcoded into our template, or we're manually placing it there. Instead when a route is matched up, it will go and say, does this path exist?

[00:07:25] In this case its route. If so, take this component and put it into your router-outlet. And so now you can see that.
>> Lukas Ruebbelke: Here we go, login works.