Creating More Routes

Let’s do an exercise. We were able to create a routing module to load the HomeComponent to display the content for the home page. There are two other pages we’ll want to make routes for. They’re the about and contact pages. We’ve already taken the first steps by creating modules for each page. The next step is to create components and route them.

Try doing this exercise on your own. Here are the series of steps you’ll need to take to accomplish this:

1. Create a component for the contact page.
2. Define a new route in the contact routing module.
3. Import the contact module in the app module.
4. Add the contact module to the imports option.
5. Repeat this for the about page.

Good luck!

The solution

I won’t leave you hanging. Below the solution for the exercise. For this portion, we’ll be tackling both pages at the same time.

Creating components

In the command line, run the following commands for the contact component:

ng generate component contact/contact-main

Run this command for the about component:

ng generate component about/about-main

Here’s what should’ve been generated: