title: Angular 2 router - appends url rather than navigate to main
body: <p>I have the following configuration:</p>
  
  <p>Main navigation with 2 links:</p>
  
  <pre><code>&lt;a href="#" [routerLink]="['/first']" first &lt;/a&gt;
  &lt;a href="#" [routerLink]="['/second']"&gt; second &lt;/a&gt;
  </code></pre>
  
  <p>And in the First component I have a "details" link:</p>
  
  <pre><code>&lt;div [routerLink]="['/detail', item.id]"&gt; 
  </code></pre>
  
  <p>My app.routing.ts:</p>
  
  <pre><code>{path: 'first', component: FirstComponent},
  {path: 'second', component: SecondComponent},
  {path: 'detail/:id', component: DetailComponent }
  </code></pre>
  
  <p>In the First component when navigating to /detail:item everything works fine.
  However when I try to hit the B link from the main navigation I get a wrong URL.
  So basically it is: </p>
  
  <p>1) Goto First component      >>>     localhost/First</p>
  
  <p>2) Goto item details         >>>     localhost/detail/someId</p>
  
  <p>3) Try to go to Second component (localhost/Second) >>> but it is localhost/detail/Second (and every other click on item detail appends another "/detail" to the url, so we get /detail/detail/Second, etc.. )</p>
  
  <p>I tried it and without the '/' but the effect is the same.
  I found out that if I add useHash:true to the routing everything works as expected. </p>
  
  <pre><code> export const ROUTING: ModuleWithProviders = RouterModule.forRoot(ROUTES, {useHash:true}); 
  </code></pre>
  
  <p>However I don't want to have the hash. </p>
  
  <p>My question is - why this is working with the hash and doesn't without. Also how can I fix the appending issue. And any general explanations about the routing will be greatly appreciated. Thanks!</p>