Add Routing to an Existing Angular Project

Sam Julien: [0:00] When we first create an Angular application with the CLI using ng new egghead-routing, it asked us if we want to add Angular routing. Sometimes though we don't know whether we actually want to add routing yet, so we just go ahead and say no, and let the app generate.

[0:18] But what do we do when we want to add routing later? There's no separate command to do that routing for you. There are two different ways that we could handle this. We could try to mimic what the CLI does when it creates a new application by creating a separate routing module.

[0:34] To do that, we do ng generate module. Call it app-routing, we could really call it whatever we want, but app-routing is the convention. We could pass in a --flat flag and a --module flag to specify app. The flat option will prevent it from being in its own folder and the module option will be sure to import the new module into the app module.

[0:58] In fact, I can add the -d flag for dryRun and run that, and you can see that it will just create an app-routing module and then update app.module.

[1:09] I don't like this approach. I don't like to keep my routes in a separate routing module. I'd rather keep my routes in the same module that they apply. I'm going to hide my terminal and open up my app module. I just want to add routes here directly in my app module.

[1:26] To do that, I need to first import some things from the Angular router package. I'm going to say import {RouterModule, Routes} from '@angular/router'. I also need to define an array of routes. For now, it's going to be an empty array, but I need to say const routes and give it a type of Routes and set that equal to an empty array.

[1:51] The last thing I need to do in this file is import the RouterModule. In my import's array here, I'm going to say RouterModule and I'm going to call its forRoot() method, and I'm going to pass in that route's array that's currently empty.

[2:08] The last thing I need to do to set up routing in my application is add somewhere for the routes to display. This is called a router outlet. I'm going to go over to my app.component.html here and I'm going to get rid of all the boiler plate that the CLI created. I'm going to add in router-outlet. This is where our routes will display.

[2:29] Let's test this out by adding our first route. To do this, I'm going to create a new component. I'm going to open back up my terminal and clear it out. I'm going to run ng g for generate, c for component, and let's call it a home component. That's going to go ahead and generate a home component for us.

[2:48] Now, we need to add a route for that. Let's go back over to our app module. In our routes array here, we're going to add an object and the path for this route is going to be home, no slashes. The component that we want to route to is our HomeComponent.

[3:06] We'd also like to specify a default route back to the HomeComponent if there's no route path provided. To do this, I'm going to add a new object. I'm going to say path and it's just going to be an empty string here. I need to add a redirectTo property and I'm going to say /home, so I'm redirecting it to that route.

[3:27] This is a little bit confusing because we need the slash here because we're specifying a URL string whereas in the path property, we're just specifying the path to match.

[3:39] Lastly, I need an option here called pathMatch that I will set to full to make sure that we're only doing this when the entire path matches an empty string.

[3:49] Now we should have functional routing in our app. Let's go ahead and run ng serve and let that build. When it's done building, let's go over to the browser. Let's go to localhost:4200 and you can see that we've been sent over to /home and we can see our home component, home works! If I get rid of this home here and hit enter, it redirects me to /home. That's what we want.

[4:14] That's how to add routing to an existing Angular project.