How to solve error NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'.?

Question

I work on angular 11 I face error when build angular app

    ERROR in src/app/Employee-list/employee-list.component.html:22:45 - error NG8002: Can't bind to 
'routerLink' since it isn't a known property of 'a'.
<a class="nav-link text-dark" [routerLink]="['/employee-list']">Staff List</a>

and below is package json file

    "@angular/animations": "^11.2.14",
    "@angular/cdk": "^12.1.3",
    "@angular/common": "^11.0.0",
    "@angular/compiler": "^11.0.0",
    "@angular/core": "^11.0.0",
    "@angular/forms": "^11.0.0",
    "@angular/material": "^11.2.13",
    "@angular/router": "^11.2.14",
    "@angular/cli": "^11.0.0",
    "@angular/compiler-cli": "^11.0.0"

on application module I do as below :

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


@NgModule({
 
  imports: [
    RouterModule

so How to solve issue ?

sample of app modules and component employee list exist as blow

https://stackblitz.com/edit/angular-uffug5?file=src%2Fapp%2FEmployee-list%2Femployee-list.component.ts

image for issue

Answer 1

You either have to change [routerLink]="['/employee-list']" to routerLink="/employee-list"

or you have to set a property in your component like this and change routerlink:

export class yourComponent {

    public yourRouterLink= "/employee-list"; // Here is your employee-list
}

---

<a class="nav-link text-dark" [routerLink]="yourRouterLink">Staff List</a>