Configure Your First Angular Route

[00:00] Taking a basic Hello World! App from Angular 2 with a main module and app component, just with a Hello World! Template, configuring routes looks something like const routes, which is just an array of these route configurations.

[00:15] We'll say the path of nothing, we'll load a component of, and we just need to create a component we want to load. I'll say component, and this other template of I'm a home component, and that's just a decorator for a class which we'll call home component.

[00:35] Drop home component in here, and then we put these routes inside of our imports, so we have a router module which can configure the routes for our root, so you drop them in here, and this will configure and set up everything you need to use the router.

[00:54] Now, if I hit save, this isn't going to work or do anything yet, for two reasons. One being, the app component, which used to be what we bootstrapped, now this needs to use the router outlet.

[01:07] This router outlet is where the main component, or that home component we're loading is going to be dropped. That template is going to be loaded and dropped in here, and then that component also needs to be declared so that it knows to include it and make sure and use that.

[01:22] Basically, if the compiler doesn't find a component in the declarations, it's going to try and optimize and drop those things out, so you need to define them somehow. We'll go ahead and save now.

[01:32] You'll see we now have I'm a home component, which is coming from this home component component, declared in this route object inside of our routes, which was passed into the router module for root, and then dropped into our app component into the router outlet.

[01:48] Let's go ahead and extract this stuff. We'll create a new typescript file inside of a home directory called home.component.ts and we'll just grab this home component which we declared, cut and paste.

[02:06] Make sure and import anything that's missing its imports back in our app module. Make sure and import home component. We'll grab these routes, cut them, and we'll drop them into a file called app.routes.ts.

[02:20] We'll go ahead and paste that in here. Make sure to import that home component. Then, back in the module, we can even grab this router module configuration for root. Drop that in our app routes, and I'm actually going to export that as the default of our app routes.

[02:39] Make sure to import the router module. Now in my app module, I can get rid of this import, and instead, now I'll import app routes from app routes. This app routes is just going to point to that default export, which is a configured router module, and I can just drop that inside of my imports.

[03:02] I'll say app routes, and I still need to declare my home components, so I'll go ahead and import that. When I hit save, now, everything should work just the same, showing I'm a home component.

[03:14] Which is the app routes with these routes configured, pointing to the home component, and the home component is in this home directory with the template of I'm a home component. Again, load it into the router outlet of my app.component file.