Recently, I encountered an issue with routerLink in my Angular 2 project. I am currently using Visual Studio 2015 to develop a Single Page Application with routing functionality. However, I noticed that when I click on an anchor tag with [routerLink], it does not redirect me to the intended page - it simply appears as plain text.
MasterPage.html-
Left menu headers footers
<a [routerLink]="['Supplier']">Supplier</a>
<a [routerLink]="['Customer']">Customer</a><br />
<div>
<router-outlet></router-outlet>
</div>
Routing.ts -
import {Component} from '@angular/core';
import {CustomerComponent} from '../Binder/CustomerComponent';
import {SupplierComponent} from "../Binder/SupplierComponent";
export const ApplicationRoutes = [
{ path: 'Customer', component: CustomerComponent },
{ path: 'Supplier', component: SupplierComponent }
];
app.module-
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomerComponent } from './CustomerComponent';
import {FormsModule} from "@angular/forms"
import {GridComponent} from "./GridComponent"
import { MasterPageComponent } from './MasterPageComponent';
import { SupplierComponent } from './SupplierComponent';
import { RouterModule } from '@angular/router';
import { ApplicationRoutes } from './Routing';
@NgModule({
imports: [
RouterModule.forRoot(ApplicationRoutes),
BrowserModule,
FormsModule],
declarations: [
CustomerComponent,
SupplierComponent,
MasterPageComponent],
bootstrap: [MasterPageComponent]
})
export class MainModuleLibrary { }
If you require any further information, feel free to reach out. Thank you in advance.