<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
When using Location.back() to navigate inside a router-outlet, ngOnInit() is called twice for sibling components of routerLinkActive directives.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
ngOnInit() isn't called twice.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;example-parent&gt;
    &lt;a routerLink=&quot;/path/to/next/component&quot; routerLinkActive=&quot;link-active&quot;&gt;NAVIGATE&lt;/a&gt;     
    &lt;example-child&gt;
        &lt;!-- ngOnInit() called twice! --&gt;
    &lt;/example-child&gt;
    &lt;example-child&gt;
        &lt;!-- ngOnInit() called twice! --&gt;
    &lt;/example-child&gt;
&lt;/example-parent&gt;"><pre class="notranslate"><code class="notranslate">&lt;example-parent&gt;
    &lt;a routerLink="/path/to/next/component" routerLinkActive="link-active"&gt;NAVIGATE&lt;/a&gt;     
    &lt;example-child&gt;
        &lt;!-- ngOnInit() called twice! --&gt;
    &lt;/example-child&gt;
    &lt;example-child&gt;
        &lt;!-- ngOnInit() called twice! --&gt;
    &lt;/example-child&gt;
&lt;/example-parent&gt;
</code></pre></div>
<p dir="auto">I've narrowed down the cause of this issue, but am not aware of the impact of either removing the line or changing the method called to a more <em>appropriate</em> one...</p>
<p dir="auto"><a href="https://github.com/angular/angular/blob/master/modules/%40angular/router/src/directives/router_link_active.ts?line132#L132">CONSIDER REPLACING DETECTCHANGES WITH MARKFORCHECK</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">ngOnInit() should be called once, when initializing the component.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong> Windows 7, VS2015, NPM.</p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.6</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> All</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> All</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =  6.3.1</p>
</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">Following code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *ngIf=&quot;currentUser !== null&quot; class=&quot;...&quot;&gt;
    &lt;div id=&quot;notifications&quot;&gt;
        &lt;core-toasts&gt;&lt;/core-toasts&gt;
    &lt;/div&gt;
...
         &lt;li *ngFor=&quot;let moduleTab of moduleTabs&quot; [routerLinkActive]=&quot;['active']&quot;&gt;
              &lt;a [routerLink]=&quot;moduleTab.id ? moduleTab.route + '/' + moduleTab.id : moduleTab.route&quot; [routerLinkActive]=&quot;['active']&quot;&gt;
                      &lt;span&gt;...&lt;/span&gt;
               &lt;/a&gt;
         &lt;/li&gt;
...
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *ngIf="currentUser !== null" class="..."&gt;
    &lt;div id="notifications"&gt;
        &lt;core-toasts&gt;&lt;/core-toasts&gt;
    &lt;/div&gt;
...
         &lt;li *ngFor="let moduleTab of moduleTabs" [routerLinkActive]="['active']"&gt;
              &lt;a [routerLink]="moduleTab.id ? moduleTab.route + '/' + moduleTab.id : moduleTab.route" [routerLinkActive]="['active']"&gt;
                      &lt;span&gt;...&lt;/span&gt;
               &lt;/a&gt;
         &lt;/li&gt;
...
&lt;/div&gt;
</code></pre></div>
<p dir="auto">...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.</p>
<p dir="auto">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).</p>
<p dir="auto">When I remove ONLY the [routerLinkActive]="['active']" directive, everything works as expected.</p>
<p dir="auto">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.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">ngOnInit of all contained components only running once per ngIf expression change to true and ngOnDestroy running once on expression changed to false.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Using Angular 2, Angular-Meteor, WebStorm, NPM</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.5</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong></li>
</ul>

<p dir="auto">Chrome 55.0.2883.87</p>
<ul dir="auto">
<li><strong>Language:</strong><br>
Typescript 2.1.5<br>
ES5</li>
</ul>