<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><br>
After upgrading from angular 2.0.0 to angular 2.2.0 we now have following issue:<br>
clicking on <code class="notranslate">&lt;a href="#"&gt;Link&lt;/a&gt;</code> navigates user away from current page to <code class="notranslate">http://app_url/#</code>.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
Previously clicking on the link did nothing as expected. Same behavior is expected in 2.2.0.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Upgrading to new version of angular shouldn't introduce breaking changes to application.<br>
There is workaround: adding <code class="notranslate">onClick="return false;"</code> prevents incorrect navigation. But having third party components makes us unable to fix the issue in every place.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10, Visual Studio 2015, npm 3.10.8, node 6.7.0.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.2.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [ Chrome 54.0.2840.99 m ]</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [ TypeScript 2.0.3 ]</p>
</li>
</ul>
<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></p>

<p dir="auto"><code class="notranslate">@ContentChildren</code> somehow gets hold of children that are passed in a template and instantiated through <code class="notranslate">[ngTemplateOutlet]</code>, and never gets rid of them even if they are destroyed.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">I am not sure what the correct behavior for <code class="notranslate">@ContentChildren</code> here is (should it see the children or not?) but either way it should not keep a reference to destroyed children. This creates potentially a large memory leak.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="http://plnkr.co/edit/esib13wg0pTmzVEKhNNM?p=preview" rel="nofollow">http://plnkr.co/edit/esib13wg0pTmzVEKhNNM?p=preview</a><br>
Click on the button a few times, you will see that the QueryList keeps growing. On further inspection, you could see that the children in the list are the ones that were destroyed on each previous toggle.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.4.9</li>
</ul>

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

<ul dir="auto">
<li><strong>Language:</strong> all</li>
</ul>