Add Routes to the Application

Import the necessary component

The logic for our routing will be implemented in the app-routing-module.ts file. The first thing we need to do inside this file is to import all the components that will require navigation in our course management application. These components include the following:

• Login Component
• Register Component
• Home Component
• Create-Course Component
• app.component.html

The code below shows how we import our components inside of our app-routing-module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CourseListComponent } from './components/course-list/course-list.component';
import { CreateCourseComponent } from './components/create-course/create-course.component';
import { EditCourseComponent } from './components/edit-course/edit-course.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { RegisterComponent } from './components/register/register.component';

Setting up the routes array

The next step is to configure our routes array. This array will contain separate objects for each component with a path and component key.

In the end, our routes array will look something like this: