Angular 2/4 - routerLinkActive funktioniert nicht richtig

Ich habe ein Problem mit meinem RouterLinkActive.

Hier sind zwei Gifs zu erklären.

1. Erstes Problem: Wenn ich die App starte, gibt kein RouterLinkActive die Klasse an. Aber wenn ich auf eine andere Route klicke, funktioniert das endlich.

2. Wenn ich zuerst auf die aktuelle Route klicke, wird die Klasse nicht angezeigt.

Hier ist mein 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>

Hier ist der Baum meiner Route. (in rot die Komponente genannt)

und mein Routencode:

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

und menuItem lautet:

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

Wissen Sie, was mein Problem sein kann?

EDIT: 

Ich habe versucht:

absolute Route. dh: 

 path: '/home/dashboard'

mit 

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

und 

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

Und das Ergebnis ist das gleiche. Funktioniert nicht.

EDIT2:

hinzufügen: 

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

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

löst das Problem nicht.

EDIT3: 

Die Erweiterung Augury sagt mir, dass RouterLink für die gute Route zutrifft. Die Klasse ist jedoch nicht im DOM aktiviert.

EDIT4:

Also habe ich etwas erforscht.

Ich habe festgestellt, dass wenn ich meine menuComponent (Sidebar) in die übergeordnete Wurzel stecke, also die aktive Klasse angezeigt wird (Aber ich möchte sie nicht in die übergeordnete einfügen)

EDIT5:

Ich habe einen Plunker der Situation gemacht ... Und der Plunker funktioniert ... Ich verstehe das nicht.

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