In the last article, we solved the router outlet problem. Another error related to routing may appear which is can’t bind to ‘routerLink’ since it isn’t a known property.

How to fix can't bind to 'routerLink' since it isn't a known property!

What is routerLink in Angular?

The RouterModule of Angular is a big Module that contains many built-in directives. One of them is routerLink which is responsible for replacing href to navigate from the HTML code.

let’s see how to use the routerLink and what is the difference between href and routerLink ?

in the first example we will work with href let’s see the results : 

//app.component.html 

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
  </ul>
</nav>

Suppose that we have this code navbar in our app component HTML. When clicking on Home or Products, the page will refresh and then redirect us to the wanted Page. Of course we don’t need that behavior. We will lose app state.

for that reason, Angular Helped us with routerlink Directive.

let’s use the same example, we will just replace the href with routerLink :

//app.component.html

<nav>
  <ul>
    <li><a routerLink="/">Home</a></li>
    <li><a routerLink="/products">Products</a></li>
  </ul>
</nav>

And guess what now, We are able to navigate easily without refreshing the page. We can keep our app state.

can’t bind to ‘routerLink’ since it isn’t a known property

This error may happen in the case of not importing the RouterModule into the module file you’re using the routerLink in. Keep in mind to declare or import RouterModule once, either directly in your module file, or by declaring it in your routing file and then exporting it. Personally, I prefer the second.

let’s see the two Solutions.

Solution 1 

//app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './product-list/product-list.component';

const routes: Routes = [
  {path:"products",component:ProductListComponent}
]

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [ RouterModule ]

})
export class AppRoutingModule { }

//app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ProductListComponent } from './product-list/product-list.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Solution 2

//app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ProductListComponent } from './product-list/product-list.component';
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {path:"products",component:ProductListComponent}
]
@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Conclusion

We wanted to continue working with the routerModule by covering the can’t bind to routerLink since it isn’t a known property error, and the solution is quite simple, just Adding the RouterModule to app Module or the needed Module ( depending on lazy loading).