• First open “index.html” and keep <base href=”/”> in head section.
  • Then install angular routing by using a command.

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

After run this command create “app-routing-module.ts” file in root.

Then “app-routing-module.ts” file and modify this like following

import { NgModule } from '@angular/core';

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

import { TestComponent } from './test/test.component';

import { HelloComponent } from './hello/hello.component';

 

const routes:Routes=[

  {path: 'test', component:TestComponent}, // url 1

  {path: 'hello', component:HelloComponent},// url 2

];

 

@NgModule({

  declarations: [],

  imports: [

    RouterModule.forRoot(routes)

  ],

  exports:[RouterModule]

})

export class AppRoutingModule { }

export const routingComponents=[TestComponent,HelloComponent]; // add 2 component in a constant

 

After that open “app-component.html” file and keep “router-outlet” tag at bottom

<router-outlet></router-outlet>

 

For menu link keep this

<nav>

    <ul>

        <li> <a routerLink="/">Home</a></li>

        <li> <a routerLink="/test">Test</a></li>

        <li><a routerLink="/hello">Hello</a></li>

    </ul>

</nav>