 Now what I want to show you today is how you can add routes to a local module and not the global module. Sometimes you do that just because you want to or maybe because it's easier to maintain your code. So I'm going to do this example and let me close all of these and notice we did last time was we added a module called the footer nav module. Okay. The footer nav module and I mentioned that only module, the ng module can be used to store or create a routing route. You cannot create any components. It must be in here. So let's say that I mean for demonstration purposes if you look at our routing module here. Okay. These are all our routes and they're all managed in the main module. What if I want to create another route or two more routes to load the you know what I have the demo. Okay. I just show the demo here. Okay. So the demo component because right now we don't have that in here. Right. It's not being used in our code at all as in the ad component. Initially it was up here somewhere. I think I deleted it. So we don't have that anymore. Okay. So we navigate to the demo. It's going to render right in the route outlet here. Okay. So that means in the route I could add it here if I want to. All right. It's easily added here. But I'm going to add it to the footer nav module just because I can. I mean usually you create another module to store different types of navigation but instead of having you know create another one I just put it here. Any module will be fine. This one doesn't make sense but I just put it here just so we understand. Okay. So the first thing is we're going to create the routes. So we have a constant routes or type route. Yeah. As you can see it imported automatically for us right here. And then we're going to see if you look at this model here. It's exactly the same as this. Okay. It needs to be in the routes. Yeah. It needs to be a route and a module. These two are needed. Okay. So what I have is a different one. We need to import that and we create our routes here and then we have to import the module and then also export it. Two of them. You need both. So here I think it's the wrong one. Yeah. The routes. We don't need this. I need that one. It's going to be a type of array. Okay. A list. And in this example we just have one route. Okay. It's not being used. Okay. I haven't used yet. So in here we're going to have a, the first is going to say demo. That's a demo route. And the component is going to be a type demo component. Okay. It imports that for us automatically here. And that's all we need for this one. It's only one route. And then now we're going to go in here. We're going to add the imports here in addition to the common module and add here the routes that for route. What do I have here? Yeah. The other module for route. There are three options for the four route here. And that's a show here, but it should show three of them. Let's see. Prop module. Okay. It imports that here. We need both of these. That, if I put four, you see the four route, four trial. And there's actually one more. It's not shown here. What this one does is that if you put four trial, that means this route will only work under this module. It does not work outside of this module. Okay. And you will probably, you know, kind of rare to have four trial modules. So usually everything will be for the route. That means it's accessible in the main application. So usually all your routes will be the four route here. Okay. So put the four route and then what are the routes? The routes are stored inside these routes variable here. So we call it routes here, right? Let me use the next one. So all your routes are in here. Of course, you could put, you know, this whole thing here inside here, right? You don't want to do that. You do separately outside and just immediately you pass it to that function and it will register that for you. So once you import that route in here, we'd also export this module out, just that one. So I'm going to add it here as well, the router module. Okay. So now it's going to be used in this footer module. And because we imported that into the main module here, here is the footer nav module, right? We add it down here, right here. And it's imported. And then now, so if I navigate to that length, it should work. And I'm going to go and add a link to my navigation. You don't have to do this. I'm going to show you how this works for any component. The models here and that data. Okay. So I say I'm going to add another one here. And it's going to be just demo. And I'm going to show this demo and activist false. Okay. So add it on that navigation and our app. So let me close this. So here it is. Okay. So this works just like before, right? About flights and then the demo. Okay. Notice that it didn't, it goes there. The URL is there. It's correct. It sticks. But the content did not load. Why does it go to the home page, right? Okay. It did not load. And the reason why is there. So when you have a router inside a module and you export that out and import to the app module this way, you have to be really careful because the order of how these modules are imported are important. So notice this footer module is imported or added here after the app route module. That's important because this one here has its own route called the demo route. But in the root module, there is a catch all route here. Okay. So the catch all precedes this footer module. So therefore this is like adding, I'm adding this to the end of this list. It looks like that. Okay. So that's why I reach it but this one is, it catches this demo URL and then it shows the home component. So therefore I will never reach what I want in here because this one is render right after the route module. Okay. So when you do this way, make sure that this must be added before the routing module or the module that contains the catch all. Otherwise you won't work. So that is a really tricky part and sometimes we add module you don't really care much but in this scenario because they are controlled by one global route, it's important to put in order. So now if I go back, it should work. As you can see, it loads the correct content because now the catch all is below it. So if I go back to like demos and you go back to the home page because this is the catch all and the rest will work just fine. All right. So that's the nested module that has its own routes.