Can't bind to 'routerLink' since it isn't a known property Can't bind to 'routerLink' since it isn't a known property angular angular

Can't bind to 'routerLink' since it isn't a known property


You need to add RouterModule to imports of every @NgModule() where components use any component or directive from (in this case routerLink and <router-outlet>.

import {RouterModule} from '@angular/router';@NgModule({   declarations:[YourComponents],   imports:[RouterModule]

declarations: [] is to make components, directives, pipes, known inside the current module.

exports: [] is to make components, directives, pipes, available to importing modules. What is added to declarations only is private to the module. exports makes them public.

See also https://angular.io/api/router/RouterModule#usage-notes


You are missing either the inclusion of the route package, or including the router module in your main app module.

Make sure your package.json has this:

"@angular/router": "^3.3.1"

Then in your app.module import the router and configure the routes:

import { RouterModule } from '@angular/router';imports: [        RouterModule.forRoot([            {path: '', component: DashboardComponent},            {path: 'dashboard', component: DashboardComponent}        ])    ],

Update:

Move the AppRoutingModule to be first in the imports:

imports: [    AppRoutingModule.    BrowserModule,    FormsModule,    HttpModule,    AlertModule.forRoot(), // What is this?    LayoutModule,    UsersModule  ],


I'll add another case where I was getting the same error but just being a dummy. I had added [routerLinkActiveOptions]="{exact: true}" without yet adding routerLinkActive="active".

My incorrect code was

<a class="nav-link active" routerLink="/dashboard" [routerLinkActiveOptions]="{exact: true}">  Home</a>

when it should have been

<a class="nav-link active" routerLink="/dashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">  Home</a>

Without having routerLinkActive, you can't have routerLinkActiveOptions.