<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>
The app works fine if built with ng build --prod.<br>
The build with ng build --prod --aot completes successfully, but the app won't start with the following exception:</p>
<p dir="auto">main.7c16020….bundle.js:694 EXCEPTION: Cannot read property 'replace' of undefinedt.handleError @ main.7c16020….bundle.js:694(anonymous function) @ main.7c16020….bundle.js:428t.invoke @ main.7c16020….bundle.js:1486onInvoke @ main.7c16020….bundle.js:512t.invoke @ main.7c16020….bundle.js:1486n.run @ main.7c16020….bundle.js:1486(anonymous function) @ main.7c16020….bundle.js:1486t.invokeTask @ main.7c16020….bundle.js:1486onInvokeTask @ main.7c16020….bundle.js:512t.invokeTask @ main.7c16020….bundle.js:1486n.runTask @ main.7c16020….bundle.js:1486o @ main.7c16020….bundle.js:1486<br>
main.7c16020….bundle.js:694 ORIGINAL STACKTRACE:t.handleError @ main.7c16020….bundle.js:694(anonymous function) @ main.7c16020….bundle.js:428t.invoke @ main.7c16020….bundle.js:1486onInvoke @ main.7c16020….bundle.js:512t.invoke @ main.7c16020….bundle.js:1486n.run @ main.7c16020….bundle.js:1486(anonymous function) @ main.7c16020….bundle.js:1486t.invokeTask @ main.7c16020….bundle.js:1486onInvokeTask @ main.7c16020….bundle.js:512t.invokeTask @ main.7c16020….bundle.js:1486n.runTask @ main.7c16020….bundle.js:1486o @ main.7c16020….bundle.js:1486<br>
main.7c16020….bundle.js:694 TypeError: Cannot read property 'replace' of undefined<br>
at a (main.7c16020….bundle.js:610)<br>
at new t (main.7c16020….bundle.js:617)<br>
at e.t.renderComponent (main.7c16020….bundle.js:617)<br>
at t.renderComponent (main.7c16020….bundle.js:71)<br>
at e.t (main.7c16020….bundle.js:120)<br>
at new e (main.7c16020….bundle.js:1472)<br>
at i (main.7c16020….bundle.js:1472)<br>
at e.createInternal (main.7c16020….bundle.js:1472)<br>
at e.t.create (main.7c16020….bundle.js:120)<br>
at t.create (main.7c16020….bundle.js:92)</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The app should start</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto">Get the code (2 projects) at <a href="https://github.com/Farata/angular2typescript/tree/master/chapter10/extras">https://github.com/Farata/angular2typescript/tree/master/chapter10/extras</a></p>
<ol dir="auto">
<li>Start the standalone node server,</li>
<li>In the auction_cli npm run build</li>
<li>Open the browser at localhost:8000. The app works</li>
<li>Add --aot to the build script</li>
<li>In the auction_cli npm run build</li>
<li>Open the browser at localhost:8000. The app gives the above exception</li>
</ol>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong><br>
OS X, NodeJS server</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.1.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all ]</p>

</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   6.7</p>
</li>
</ul>
<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong><br>
demo <a href="http://plnkr.co/edit/7uoVecfa62i8No8GtQHI?p=preview" rel="nofollow">http://plnkr.co/edit/7uoVecfa62i8No8GtQHI?p=preview</a><br>
Angular2 beta 16 or higher - When I hide first section with nested components using *ngIf, ngOnDestroy of every nested component is triggered - this is OK.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &lt;div *ngIf=&quot;!ff2&quot;&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
  &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">  &lt;div *ngIf="!ff2"&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
    &lt;my-component
    &gt;&lt;/my-component&gt;
  &lt;/div&gt;
</code></pre></div>
<p dir="auto">Outpu in console is</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    init
    init
    init
    init
    init
    destroy
    destroy
    destroy
    destroy
    destroy
"><pre class="notranslate"><code class="notranslate">    init
    init
    init
    init
    init
    destroy
    destroy
    destroy
    destroy
    destroy

</code></pre></div>
<p dir="auto">But when I hide second section where subcomponents are duplicated by *ngFor, not every ngOnDestroy is triggered.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div *ngIf=&quot;!ff&quot;&gt;
   &lt;my-component
     *ngFor=&quot;#i of [1,2,3,4,5,6]&quot;
   &gt;&lt;/my-component&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div *ngIf="!ff"&gt;
   &lt;my-component
     *ngFor="#i of [1,2,3,4,5,6]"
   &gt;&lt;/my-component&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">output in console is</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(6) init
(3) destroy"><pre class="notranslate"><code class="notranslate">(6) init
(3) destroy
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
not every ngOnDestroy is triggered</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
every ngOnDestroy should be triggered</p>
<p dir="auto"><strong>Other information</strong><br>
in angular2 beta 9 it was working correctly<br>
<a href="http://plnkr.co/edit/Q8tLJKlpF6wEVcMWfxH1?p=preview" rel="nofollow">http://plnkr.co/edit/Q8tLJKlpF6wEVcMWfxH1?p=preview</a></p>