<p dir="auto">When you use <code class="notranslate">&lt;a router-link="foo"&gt;Link&lt;/a&gt;</code> with an accompanying <code class="notranslate">&lt;router-outlet&gt;&lt;/router-outlet&gt;</code>, the proper component's template appears in the outlet. The issue is when the user refreshes (on the proper URL extension, i.e., <code class="notranslate">localhost:8080/foo</code>), no templates are loaded (including the original app's template), leaving the page blank. As far as I can tell, what's happening is that as that URL only is marked to use the template of <code class="notranslate">foo</code>, so there is no outlet for it to show up in. There is the chance I am doing this wrong, but everything else is working properly.</p>
<p dir="auto">It appears that only the HashLocationStrategy updates the url on calls to router.navigate. When I change my LocationStrategy to the HTML5LocationStrategy the urls no longer update when navigating from <em>"/products/:productId" -&gt; "/"</em>. The navigation does occur, though.</p>
<p dir="auto">This is happening on Alpha.31.</p>
<p dir="auto">The code I'm using is below.</p>
<h1 dir="auto">Component Controller code</h1>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    updateProduct(product: {productId:string, name:string, description:string}) {
        this.productStore.updateProduct(product);

        this.router.navigate('/');
    }"><pre class="notranslate">    <span class="pl-en">updateProduct</span><span class="pl-kos">(</span><span class="pl-s1">product</span>: <span class="pl-kos">{</span><span class="pl-c1">productId</span>:<span class="pl-s1">string</span><span class="pl-kos">,</span> <span class="pl-c1">name</span>:<span class="pl-s1">string</span><span class="pl-kos">,</span> <span class="pl-c1">description</span>:<span class="pl-s1">string</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">productStore</span><span class="pl-kos">.</span><span class="pl-en">updateProduct</span><span class="pl-kos">(</span><span class="pl-s1">product</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">router</span><span class="pl-kos">.</span><span class="pl-en">navigate</span><span class="pl-kos">(</span><span class="pl-s">'/'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span></pre></div>
<h1 dir="auto">Routes</h1>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@RouteConfig([
    {path: '/', component: ProductsList, as: 'Products'},
    {path: '/products/:productId', component: UpdateProducts, as: 'UpdateProducts'}
])"><pre class="notranslate">@<span class="pl-v">RouteConfig</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
    <span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'/'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">ProductsList</span><span class="pl-kos">,</span> <span class="pl-c1">as</span>: <span class="pl-s">'Products'</span><span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span><span class="pl-c1">path</span>: <span class="pl-s">'/products/:productId'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">UpdateProducts</span><span class="pl-kos">,</span> <span class="pl-c1">as</span>: <span class="pl-s">'UpdateProducts'</span><span class="pl-kos">}</span>
<span class="pl-kos">]</span><span class="pl-kos">)</span></pre></div>
<h1 dir="auto">Bootstrap</h1>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { httpInjectables } from 'angular2/http';
import { bootstrap, bind } from 'angular2/angular2';
import { routerInjectables, LocationStrategy, HashLocationStrategy, HTML5LocationStrategy } from 'angular2/router';
import { Onboarding } from './components/onboarding/onboarding';


bootstrap(Onboarding, [
    httpInjectables,routerInjectables, bind(LocationStrategy).toClass(HTML5LocationStrategy )
]);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">httpInjectables</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/http'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">bootstrap</span><span class="pl-kos">,</span> <span class="pl-s1">bind</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">routerInjectables</span><span class="pl-kos">,</span> <span class="pl-v">LocationStrategy</span><span class="pl-kos">,</span> <span class="pl-v">HashLocationStrategy</span><span class="pl-kos">,</span> <span class="pl-v">HTML5LocationStrategy</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/router'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Onboarding</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./components/onboarding/onboarding'</span><span class="pl-kos">;</span>


<span class="pl-en">bootstrap</span><span class="pl-kos">(</span><span class="pl-v">Onboarding</span><span class="pl-kos">,</span> <span class="pl-kos">[</span>
    <span class="pl-s1">httpInjectables</span><span class="pl-kos">,</span><span class="pl-s1">routerInjectables</span><span class="pl-kos">,</span> <span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-v">LocationStrategy</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">toClass</span><span class="pl-kos">(</span><span class="pl-v">HTML5LocationStrategy</span> <span class="pl-kos">)</span>
<span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>