angular 2 new router: Back- and Forward-Button of Browser not working correctly

Question

http://plnkr.co/edit/UHeuW7QIFhHnHVT8itoj?p=preview

this is a plunkr provided by google to demo relative navigation:

export class CrisisListComponent implements OnActivate {
  crises: Crisis[];
  private currSegment: RouteSegment;
  private selectedId: number;

  constructor(
    private service: CrisisService,
    private router: Router) { }

  isSelected(crisis: Crisis) { return crisis.id === this.selectedId; }

  routerOnActivate(curr: RouteSegment, prev: RouteSegment, currTree: RouteTree) {
    this.currSegment = curr;
    this.selectedId = +currTree.parent(curr).getParam('id');
    this.service.getCrises().then(crises => this.crises = crises);
  }

  onSelect(crisis: Crisis) {
    // Absolute link
    // this.router.navigate([`/crisis-center`, crisis.id]);

    // Relative link
    this.router.navigate([`./${crisis.id}`], this.currSegment);
  }
}

Now in my version of Chrome the Browsers Forward-Button will not work correctly after I clicked on the Back-Button.

Reproduce error:

• click on one of the items in the list
• click the back-button
• --> now the forward-button is disabled

expected: forward-button to be enabled and leading to the detailed view of the clicked item

Is this a bug or am I missing something?

Answer 1

That's a known issue with @angular/router https://github.com/angular/angular/issues/9088

This router will again be replaced. The new new router is work in progress but will probably be made available soon.