Angular 2 root's route is always active

Question

Recently I read this useful article about Angular 2 Router and looked at the demo. Everything seemed to be perfect. But when I tried to determine the active route based on

Answer 1

Adding the following property to your home anchor worked for me. [routerLinkActiveOptions]="{ exact: true }"

find out more https://github.com/angular/angular/issues/8397#issuecomment-237314970

Answer 2

This is how it will work:

<nav>
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a routerLink="/about" routerLinkActive="active">About</a>
</nav>

Answer 3

Its not a bug to my knowledge, you need to have a fallback component for / or unknown paths. (most likely HomeComponent)

@Routes([
  { path: '/home', component: HomeComponent },
  { path: '/about', component: AboutComponent },
  { path: '*', name: component: HomeComponent }
]);

This though is using the new Router module (not the deprecated one) and works in rc.0 and rc.1