Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'a' Angular Error

Updated on: December 11, 2019

Error: Uncaught Error: Template parse errors: Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'a'. 


If you are getting above error when running Angular application, then you can try following two possible solutions to fix this routerLinkActiveOptions binding issue:

Step 1: Please confirm, in your app.module.ts file, whether you have properly referred your Angular Routing module in your imports, if it is missing in your Angular imports of app.module.ts file, then it will throw the same error, so you can check and add the AppRoutingModule if it is missing in imports statement, the sample is shown below:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 2: If above AppRoutingModule is already added, then you can check for routerLinkActive directive is added to anchor tag in your navigation template file. If this directive is missing and without this directive if you are using [routerLinkActiveOptions] directive, then it will throw this above error. The sample of the template which uses routerLinkActive & [routerLinkActiveOptions] both is given below:

<div class="topnav" id="myTopnav">
  <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Home</a>
  <a routerLink="/users" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Users</a>
  <a routerLink="/properties" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">Properties</a>
  <a routerLink="/about" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">About</a>