Tengo un problema con mi routerLinkActive.

Aquí hay dos Gifs para explicar.

Primer problema: cuando inicio la aplicación, ninguno de los routerslinkink activa la clase activa. Pero si hago clic en una ruta diferente, eso finalmente funciona.

Cuando hago clic al principio en la ruta actual, no se muestra la clase.

Aquí está mi 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>

Aquí está el árbol de mi ruta. (en rojo el componente llamado)

y mi código de ruta:

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

y menuItem es:

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

¿Sabes cuál puede ser mi problema?

EDITAR:

Yo he tratado:

ruta absoluta es decir:

 path: '/home/dashboard'

con

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

y

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

Y el resultado es el mismo. No funciona.

EDIT2:

agregando:

[routerLinkActiveOptions] = "{exacto: verdadero}" para:

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

no resuelve el problema

EDITAR3:

La extensión Augury me dice que routerLink es cierto para la buena ruta. Pero la clase no está activada en el DOM.

EDITAR4:

Entonces, he hecho un poco de exploración.

Descubrí que si pongo mi menuComponent (barra lateral) en la raíz principal, eso está funcionando, se muestra la clase activa (Pero no quiero ponerlo en el padre)

EDITAR5:

Hice un plunker de la situación ... Y el plunker funciona ... No lo entiendo.

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