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

If you are running Angular application and have included Routing in your application and if you are getting error as: Uncaught Error: Template parse errors: Can't bind to 'routerLinkActiveOptions' since it isn't a known property of 'a', then refer the following solution to fix the above routing issue in your Angular application:

Solution:

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';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  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>
</div>
<router-outlet></router-outlet>