- 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>