History forward / backward button doesn't work with angular 2 router

Question

History( Push State) forward / backward button doesn't work with angular 2 router.I have tested this in Chrome and Firefox both. Forward button works never and Backward button works only for 2 steps than UI doesn't respond according backward button.

I have following code.

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { CrisisListComponent } from './crisis-list.component';
import { HeroListComponent }   from './hero-list.component';
import { Login }   from './login';
@Component({
  selector: 'my-app',
  template: `
    <h1>Component Router</h1>
    <nav>
      <a [routerLink]="['/home']">Crisis Center</a>
      <a [routerLink]="['/login']">Login</a>
      <a [routerLink]="['/heroes']">Heroes</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})
@Routes([
  {path: '/home', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent},
  {path : '/login' , component:Login},
  {path: '*',        component: CrisisListComponent}
])
export class AppComponent { }

login.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { LoginMobile }   from './login/login_mobile';
import { LoginEmail }   from './login/login_email';

@Component({
  template: `
    <h2>{{val}}</h2>
    <p>Login here</p>\n\
    <a [routerLink]="['/login/mobile']">Mobile</a>
    <a [routerLink]="['/login/email']">Email</a>
    <router-outlet></router-outlet>
`,
  directives: [ROUTER_DIRECTIVES]
})
@Routes([
  {path : '/mobile' , component:LoginMobile},
  {path : '/email' , component:LoginEmail}
])
export class Login {
    val = "kwik.Social";
}

login/login_email.ts

import { Component } from '@angular/core';
@Component({
  template: `
    <p>Login here</p>
    <input type="email" placeholder="Email" [(ngModel)]="email" />\n\
    <p>Your Email is {{email}} </p>
`
})
export class LoginEmail {
    email = "kwik.Social";
}

Answer 1

After waiting for long time, I tried router by NGRX team. It has many other features as well like Guards , Multiple Components , Child Components and Full History Api support. Only one thing I am missing is that History Api itself doesn't provide a way to get values entered by user on text fields and scroll positions , if that were available Ajax Pages may became more fluid and consistent.

Edit

NGRX router is now deprecated, and Angular Router is inspired from NGRX router and works as expected.