Next up, we will set up our application pages using the Angular CLI and then map the pages in our routes. 

We will create the new page components under a components directory, by running the commands below.

ng g component components/Home   
ng g component components/Culture
ng g component components/Entertainment
ng g component components/Technology
ng g component components/Science
ng g component components/Business
ng g component components/Videos

In the app-routing.module.ts file, we set up our routes, the complete routes set up is shown below: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { CultureComponent } from './components/culture/culture.component';
import { EntertainmentComponent } from './components/entertainment/entertainment.component';
import { HomeComponent } from './components/home/home.component';
import { TechnologyComponent } from './components/technology/technology.component';
import { ScienceComponent } from './components/science/science.component';
import { BusinessComponent } from './components/business/business.component';
import { VideosComponent } from './components/videos/videos.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'culture', component: CultureComponent },
  { path: 'entertainment', component: EntertainmentComponent },
  { path: 'technology', component: TechnologyComponent },
  { path: 'science', component: ScienceComponent },
  { path: 'business', component: BusinessComponent },
  { path: 'videos', component: VideosComponent },
  { path: '**', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}