title: Angular 2 - Routing useAsDefault not working
body: <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>