Angular 2/4 - routerLinkActive not working properly
Try this :
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"> <a>Home</a></li>
So I have spend lot of time on this problem.
https://github.com/angular/angular/issues/19167
The thing is: That works with angular 2 but not angular 4.
I have found a hack for angular 4:
<li *ngFor="let menuItem of menuItems" [routerLinkActive]="" [ngClass]="rla.isActive?'active':''" #rla="routerLinkActive"class="{{menuItem.class}}"> <a [routerLink]="[menuItem.path]"> <i class="material-icons">{{menuItem.icon}}</i> <p>{{menuItem.title}}</p> </a></li>with:
[routerLinkActive]="" [ngClass]="rla.isActive?'active':''" #rla="routerLinkActive"EDIT ANGULAR 5 :
With Angular 5, the bug is gone!
Looks like the HomeComponent is lazily loaded. You don't have to move your routes to root component. Just try to add the RouterModule to the root component.
More here