title: Angular2 routing - manual url navigation
body: <p>I have a very simple app</p>
  
  <p>My app.component.html looks like this:</p>
  
  <pre><code>&lt;a [routerLink]="['/Test']"&gt;CLICK ME&lt;/a&gt;
  &lt;div class="main-container"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My app.component.ts looks like this:</p>
  
  <pre><code>@Component({
      selector: 'app',
      templateUrl: 'app/app.component.html',
      directives: [HomeComponent, TestComponent, ROUTER_DIRECTIVES]
  })
  
  @RouteConfig([
    {path: '/', component: HomeComponent, as: 'HomeComponent'},
    {path: '/test', component: TestComponent, as: 'Test'}
  ])
  
  export class AppComponent { }
  </code></pre>
  
  <p>To navigate to my app, I go to </p>
  
  <pre><code>http://localhost/app
  </code></pre>
  
  <p>Which works perfect, it navigates me to my home component view as expected.
  When I click the "CLICK ME" button, I am navigated to</p>
  
  <pre><code>http://localhost/app/test
  </code></pre>
  
  <p>And my test component is rendered as expected... HOWEVER, if I manually navigate to</p>
  
  <pre><code>http://localhost/app/test
  </code></pre>
  
  <p>My home component is loaded instead of my test component...what gives? How can I set up routing so that manual navigation to the test url actually returns my test component's view in the router outlet? Is this possible? I don't want to go to the landing page every time...</p>