Angular 2 router - appends url rather than navigate to main

Question

I have the following configuration:

Main navigation with 2 links:

<a href="#" [routerLink]="['/first']" first </a>
<a href="#" [routerLink]="['/second']"> second </a>

And in the First component I have a "details" link:

<div [routerLink]="['/detail', item.id]"> 

My app.routing.ts:

{path: 'first', component: FirstComponent},
{path: 'second', component: SecondComponent},
{path: 'detail/:id', component: DetailComponent }

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:

1) Goto First component >>> localhost/First

2) Goto item details >>> localhost/detail/someId

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.. )

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.

 export const ROUTING: ModuleWithProviders = RouterModule.forRoot(ROUTES, {useHash:true}); 

However I don't want to have the hash.

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!

Answer 1

import { APP_BASE_HREF } from '@angular/common';

Problem was that I was using {provide: APP_BASE_HREF, useValue: './'} (with a dot) rather than {provide: APP_BASE_HREF, useValue: '/'}. Removing the dot fixed it.