The history push state feature is not working properly with the Angular 2 router in both Chrome and Firefox. The forward button never works, and the backward button only works for 2 steps before the UI stops responding to it.
Here is the code I am using:
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";
}