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
.