<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"><pre class="notranslate"><code class="notranslate">[x] bug report
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Errors that occur within an <code class="notranslate">*ngIf="condition"</code>, where <code class="notranslate">condition</code> is made truthy via a promise are swallowed (not logged to console).</p>
<p dir="auto"><strong>Expected behavior</strong><br>
All uncaught errors should be logged to console (when using default <code class="notranslate">ErrorHandler</code>).</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">The following code will not log <em>test error!</em> to the console:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `&lt;div *ngIf=&quot;condition&quot;&gt;{{ fail() }}&lt;/div&gt;`
})
export class AppComponent { 
  condition = false;

  ngOnInit() {
    Promise.resolve().then(() =&gt; {
      this.condition = true;
    });
  }
  
  fail() {
    console.log('should fail...');
    throw new Error('test error!'); 
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Component</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@angular/core'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'my-app'</span><span class="pl-kos">,</span>
  <span class="pl-c1">template</span>: <span class="pl-s">`&lt;div *ngIf="condition"&gt;{{ fail() }}&lt;/div&gt;`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">AppComponent</span> <span class="pl-kos">{</span> 
  <span class="pl-c1">condition</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>

  <span class="pl-en">ngOnInit</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">Promise</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">condition</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  
  <span class="pl-en">fail</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'should fail...'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">throw</span> <span class="pl-k">new</span> <span class="pl-smi">Error</span><span class="pl-kos">(</span><span class="pl-s">'test error!'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> 
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Plunker</strong>: <a href="http://plnkr.co/edit/4I93tFxiKIBf8qvqcyzZ?p=preview" rel="nofollow">http://plnkr.co/edit/4I93tFxiKIBf8qvqcyzZ?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">Debugging code in components and templates that involve promises.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 4.0.2</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> TypeScript 2.2</li>
</ul>
<hr>
<p dir="auto"><strong>EDIT:</strong> I narrowed down the issue (it has nothing to do with observables)</p>
<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">An error inside a template is swallowed if the template was rendered as a response to a promise resolution.</p>
<p dir="auto">In other cases the same exception is properly logged. Exception in .then() is OK. Exception in template that was not rendered in response to a promise is OK</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The exception should either be passed to the .catch-function or logged.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/ilqlcUUnrRpvFEFuzQc6?p=preview&amp;open=app%2Fapp.component.ts" rel="nofollow">http://plnkr.co/edit/ilqlcUUnrRpvFEFuzQc6?p=preview&amp;open=app%2Fapp.component.ts</a></p>
<p dir="auto">Run the plunkr and see that there is no exeption.</p>
<p dir="auto">Comment out Mark2 and put back in Mark1 or Mark3 and see that the error is handled properly.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">When the error inside templates silently fails It makes it much harder for me to figure out why the template does not finish rendering.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.0.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> Chrome, bot probably all.</p>
</li>
</ul>