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!