Can't bind to 'routerLink' since it isn't a known property
Solution 1:
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
Solution 2:
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
],
Solution 3:
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
.
Solution 4:
When nothing else works when it should work, restart ng serve. It's sad to find this kind of bugs.