angular: routerLinkActive within ngif block leads to strange behaviour

I’m submitting a …

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Following code:

<div *ngIf="currentUser !== null" class="...">
    <div id="notifications">
        <core-toasts></core-toasts>
    </div>
...
         <li *ngFor="let moduleTab of moduleTabs" [routerLinkActive]="['active']">
              <a [routerLink]="moduleTab.id ? moduleTab.route + '/' + moduleTab.id : moduleTab.route" [routerLinkActive]="['active']">
                      <span>...</span>
               </a>
         </li>
...
</div>

…leads to the effect, that all contained component’s ngOnInit hooks (e.g. the core-toast’s) are running multiple times, even though the currentUser is set from null to a value only once. The ngOnDestroy is NOT executed, so all components seem to stay alive.

The currentUser is a private variable in the component which is set by an RxJs Observable (coming from Angular-Meteor, patched into the zone via zone.run).

When I remove ONLY the [routerLinkActive]=“[‘active’]” directive, everything works as expected.

As a workaround I’m currently using [hidden] instead of the *ngIf, but of course I would prefer to remove the DOM while not displayed.

Expected behavior

ngOnInit of all contained components only running once per ngIf expression change to true and ngOnDestroy running once on expression changed to false.

Please tell us about your environment:

Using Angular 2, Angular-Meteor, WebStorm, NPM

• Angular version: 2.4.5

• Browser:

Chrome 55.0.2883.87

• Language: Typescript 2.1.5 ES5