Adding Router to App

app-routing.module.ts will be add to project with the following code:

ng generate module app-routing --flat --module=app

Add a component for the router to route to. Here we have a component called mycom. A sub-directory with the component files will be generated under the directory src/app/.

ng generate component mycom

In app-routing.module.ts, add

const routes: Routes = [
  { path: 'mycom', component: MycomComponent }
];

so that the file becomes:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {Routes} from "@angular/router";
import {MycomComponent} from "./mycom/mycom.component";

const routes: Routes = [
  { path: 'mycom', component: MycomComponent }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})

export class AppRoutingModule {
}

Set it as follow so that it will route the page according to the url.

<router-outlet></router-outlet>