Angular 2 - Routing useAsDefault not working
<p>I am using angular 2 for routing and node for hosting locally.</p>

<p>When I use 'useAsDefault:true' for my route the nav bar links no longer work and the URL goes to <a href="http://localhost/" rel="nofollow">http://localhost/</a> (Blank Page) when I want it to go to <a href="http://localhost/home" rel="nofollow">http://localhost/home</a></p>

<p>One I remove the flag the nav bar works correctly and I am able to go to the /home route but I go to the blank page </p>

<p>Can anyone shed any light on why the default flag is not working correctly ?</p>

<p><strong>App.Component.ts</strong></p>

<pre><code>@RouteConfig([
  { path: '/home', name: 'Home', component: HomeComponent /*, useAsDefault : true */},
  { path: '/articles', name: 'Posts', component: PostsComponent  },
  { path: '/detail/:id', name: 'PostDetail', component: PostDetailComponent },
  { path: '/login', name: 'Login', component: LoginComponent  },
])
</code></pre>

<p><strong>App.Component.html</strong></p>

<pre><code>&lt;ul class="topnav"&gt;
  &lt;li&gt;&lt;a [routerLink]="['Home']"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a [routerLink]="['Posts']"&gt;Articles&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#p"&gt;Publisher&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a [routerLink]="['Login']"&gt;Login&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;router-outlet&gt;&lt;/router-outlet&gt;
</code></pre>

<p><strong>Main.ts</strong></p>

<pre><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';

bootstrap(AppComponent,  [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
</code></pre>

<p><strong>index.html</strong></p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;script&gt;document.write('&lt;base href="' + document.location + '" /&gt;');&lt;/script&gt;
    &lt;title&gt;Blog&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="styles/styles.css"&gt;

     &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;

    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err); });
    &lt;/script&gt;
  &lt;/head&gt;

  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;blog-app&gt;Blog Loading...&lt;/blog-app&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>