<p dir="auto">Hi,</p>
<p dir="auto">I'm having some troubles with setting up a simple angular2 app with routing, when it's served directly through the server root. Example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@RouteConfig([
    { path: '/', component: Workbench },
    { path: '/login', component: Auth },
    { path: '/home', component: Home }
])
export class App{

}"><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">Workbench</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">'/login'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">Auth</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">'/home'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">Home</span> <span class="pl-kos">}</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-v">App</span><span class="pl-kos">{</span>

<span class="pl-kos">}</span></pre></div>
<p dir="auto">Where / is the root url of the http server.</p>
<p dir="auto">Right now, navigating to <strong>/home</strong> or <strong>/login</strong> results in the same as navigating to <strong>/</strong>. After some investigation the problem seems to be the result of <em>normalize</em>: (inside location.ts)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="normalize: function(url) {
          return stripTrailingSlash(this._stripBaseHref(stripIndexHtml(url)));
},"><pre class="notranslate"><span class="pl-s1">normalize</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-k">return</span> <span class="pl-en">stripTrailingSlash</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">_stripBaseHref</span><span class="pl-kos">(</span><span class="pl-en">stripIndexHtml</span><span class="pl-kos">(</span><span class="pl-s1">url</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-kos">,</span></pre></div>
<p dir="auto">Besides the url being set to "/login" the result of <strong>this._stripBaseHref(stripIndexHtml(url))</strong> is "" (empty string). This happens because url and _baseHref (using HTML5LocationStategy) are exactly the same.</p>
<p dir="auto">Looking at the getBaseHref function on the last version of browser_adapter (<a href="https://github.com/angular/angular/blob/011fab37af626535c1d5af7091d72e27d93f4391/modules/angular2/src/dom/browser_adapter.ts">https://github.com/angular/angular/blob/011fab37af626535c1d5af7091d72e27d93f4391/modules/angular2/src/dom/browser_adapter.ts</a>)</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function relativePath(url) {
    if (isBlank(urlParsingNode)) {
      urlParsingNode = document.createElement(&quot;a&quot;);
    }
    urlParsingNode.setAttribute('href', url);
    return (urlParsingNode.pathname.charAt(0) === '/') ? urlParsingNode.pathname : '/' + urlParsingNode.pathname;
}
(...)
getBaseHref: function() {
       return relativePath(document.baseURI);
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">relativePath</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-en">isBlank</span><span class="pl-kos">(</span><span class="pl-s1">urlParsingNode</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">urlParsingNode</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">createElement</span><span class="pl-kos">(</span><span class="pl-s">"a"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-s1">urlParsingNode</span><span class="pl-kos">.</span><span class="pl-en">setAttribute</span><span class="pl-kos">(</span><span class="pl-s">'href'</span><span class="pl-kos">,</span> <span class="pl-s1">url</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span><span class="pl-s1">urlParsingNode</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">.</span><span class="pl-en">charAt</span><span class="pl-kos">(</span><span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s">'/'</span><span class="pl-kos">)</span> ? <span class="pl-s1">urlParsingNode</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span> : <span class="pl-s">'/'</span> <span class="pl-c1">+</span> <span class="pl-s1">urlParsingNode</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-kos">(</span>...<span class="pl-kos">)</span>
<span class="pl-s1">getBaseHref</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
       <span class="pl-k">return</span> <span class="pl-en">relativePath</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">baseURI</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">If we call <strong>getBaseHref("<a href="http://localhost:8000/login" rel="nofollow">http://localhost:8000/login</a>")</strong> what should be the expected outcome?<br>
With the current implementation we are getting "/login", but it seems to me that we should get only "/" instead.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/btford/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/btford">@btford</a> can you please let me know your thoughts on this? If the change is on getBaseHref, the fix seems quite simple, I can submit a PR, I'm only checking with you guys the expected behaviour before doing anything.</p>
<p dir="auto">Best regards,</p>
<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>