Angular 2/4 - routerLinkActive not working properly

Question

I have a problem with my routerLinkActive.

Here is two Gifs to explain.

1. First problem: When i start the app, none of the routerLinkActive give the class active. But if i click on a different route, that finaly works.

2. When I click at first on the current route, the class isn't displayed.

Here is my code:

<ul class="nav">
   <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
       <a [routerLink]="[menuItem.path]">
           <i class="material-icons">{{menuItem.icon}}</i>
           <p>{{menuItem.title}}</p>
       </a>
   </li>
</ul>

Here is the tree of my route. (in red the component called)

and my route code:

import ...

const routes : Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      }, ..., {
        path: 'challenges',
        component: ImageRankComponent
      }, {
        path: 'niveau',
        component: LevelComponent
      }, {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
  ],
  exports: [RouterModule]
})
export class HomeRoutingModule {}

and menuItem is:

this.menuItems = ROUTES.filter(menuItem => menuItem);
const ROUTES : RouteInfo[] = [{
    path: 'dashboard',
    title: 'Dashboard',
    icon: 'dashboard',
    class: ''
}, {
    path: 'challenges',
    title: 'Tous les challenges',
    icon: 'dashboard',
    class: ''
},
{
    path: 'niveau',
    title: 'Niveau en ligne',
    icon: 'dashboard',
    class: ''
}]

Do you know what can be my problem?

EDIT:

I have tried:

absolute route. ie:

 path: '/home/dashboard'

with

<a [routerLink]="menuItem.path">

and

<a [routerLink]="[menuItem.path]">

And the result is the same. Not working.

EDIT2:

adding:

[routerLinkActiveOptions]="{exact: true}" to:

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}} " [routerLinkActiveOptions]="{exact: true}">

doesnt resolve the problem.

EDIT3:

The extension Augury says me that routerLink is true for the good route. But the class isn't activated in the DOM.

EDIT4:

So, I have done some exploration.

I have found that if I put my menuComponent (sidebar) in the parent root, that is working, I the active class is displayed ( But I don't want to put it in the parent )

EDIT5:

I have done a plunker of the situation... And the plunker works... I dont get it.

https://plnkr.co/edit/7KMlY2

Answer 1

Try this :

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a>Home</a>
</li>

Answer 2

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!

Answer 3

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