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: '', redirectTo: '/mycom', pathMatch: 'full'},
  { 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>

When your URL is http://xxx.yyy:4200/mycom, the MycomComponent will show up.

Assume we have two other components called info and another, we can add the routes to our router module, and then do:

<a routerLinkActive="active" routerLink="info">info</a><br/>
<a routerLinkActive="active" routerLink="another">another</a>
<router-outlet></router-outlet>