the reason is that you probably did not include RouterModule to your @NgModule in imports section. Important thing is this needs to be included in every module where you are using Router link or any other router feature.
routerLinkActive is simply an indicator of whether this link represents the active route. @jessepinho - Tried it - [routerLinkActive]="'active'" will only work if you also have [routerLink] in the a-tag. If you had (click)="navitageTo('/route')" instead of [routerLink], and in that function, you called this.
import { RouterModule} from '@angular/router' RouterModule refers to the forRoot which takes an input as an array, which in turn has the object of the path and the component. Path is the name of the router and component is the name of the class, i.e., the component created.
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
.
When nothing else works when it should work, restart ng serve. It's sad to find this kind of bugs.
You need to add RouterMoudle
into imports
sections of the module containing the Header
component
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With