Estou com um problema no meu routerLinkActive.

Aqui estão dois gifs para explicar.

Primeiro problema: quando inicio o aplicativo, nenhum roteadorLinkActive fornece a classe ativa. Mas se eu clicar em uma rota diferente, isso finalmente funciona.

Quando clico pela primeira vez na rota atual, a classe não é exibida.

Aqui está o meu código:

<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>

Aqui está a árvore da minha rota. (em vermelho o componente chamado)

e meu código de rota:

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 {}

e menuItem é:

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: ''
}]

Você sabe o que pode ser meu problema?

EDITAR:

Eu tentei:

rota absoluta. ou seja:

 path: '/home/dashboard'

com

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

e

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

E o resultado é o mesmo. Não está funcionando.

EDIT2:

adicionando:

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

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

não resolve o problema.

EDIT3:

A extensão Augury diz que o routerLink é verdadeiro para a boa rota. Mas a classe não está ativada no DOM.

EDIT4:

Então, eu fiz alguma exploração.

Descobri que, se eu colocar meu menuComponent (barra lateral) na raiz pai, que está funcionando, a classe ativa será exibida (Mas eu não quero colocá-lo nos pais)

EDIT5:

Eu fiz um desentendimento com a situação ... E o desentupidor funciona ... eu não entendo.

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