<p dir="auto">If I navigate to an Angular SPA from another page (outside the SPA), I have to click back twice to return to where I was. When the page first loads a duplicate history entry is created. If I keep refreshing the SPA page, the history gets longer and longer...</p>
<p dir="auto">Some initial investigation shows that:</p>
<ul dir="auto">
<li>The problem does not occur if the URL that serves the SPA does not match any defined routes.</li>
<li>The problem does not occur for applications that have no routing configuration.</li>
</ul>
<p dir="auto">Possibly related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="114288806" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/5025" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/5025/hovercard" href="https://github.com/angular/angular/issues/5025">#5025</a> ?</p>
<p dir="auto">Using Angular 2.0.0-beta.0</p>
<p dir="auto">In case of an Observable array, in component template if we add *ngIf =" (list$ | async)?.length&gt;0" it doesn't loops through the child *ngFor.</p>
<p dir="auto">For example if I have below Observable list in the component:</p>
<p dir="auto"><code class="notranslate">list$: Observable&lt;any[]&gt;;</code></p>
<p dir="auto">and below in template:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
    Length: {{(list$ | async)?.length}}
    &lt;div *ngIf=&quot;(list$ | async)?.length&gt;0&quot;&gt;
        &lt;ul&gt;
            &lt;li *ngFor=&quot;let item of (list$ | async)&quot;&gt;
                {{item.name}}
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
    Length: {{(list$ | async)?.length}}
    &lt;div *ngIf="(list$ | async)?.length&gt;0"&gt;
        &lt;ul&gt;
            &lt;li *ngFor="let item of (list$ | async)"&gt;
                {{item.name}}
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">It seems that (list$ | async)?.length gives us the length of the list but the list isn't printed on the screen.</p>
<p dir="auto">Whereas if I remove ngIf it start working:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div&gt;
    Length: {{(list$ | async)?.length}}
        &lt;ul&gt;
            &lt;li *ngFor=&quot;let item of (list$ | async)&quot;&gt;
                {{item.name}}
            &lt;/li&gt;
        &lt;/ul&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div&gt;
    Length: {{(list$ | async)?.length}}
        &lt;ul&gt;
            &lt;li *ngFor="let item of (list$ | async)"&gt;
                {{item.name}}
            &lt;/li&gt;
        &lt;/ul&gt;
&lt;/div&gt;
</code></pre></div>