Angular 2 Dart: RouteParams not working until refresh

Issue

I’m trying to get to grips with Angular2 + Dart. I’ve run in to a quirk that I’m trying to get my head around -I can’t seem to access RouteParams until I refresh the page. Details below:

This is my route:

const Route(
          path: '/game/:id',
          name: 'Game',
          component: GameComponent
      )

This in my Games template:

<a [routerLink]="['Game', {id: 76043}]">

Then this is my GameComponent:

import 'package:angular2/angular2.dart';
import 'package:angular2/router.dart'
    show ROUTER_DIRECTIVES, Route, RouteConfig, RouteParams;

import 'package:meeple/components/ui-app-bar.component.dart' show UiAppBarComponent;

@Component(
    selector: 'router-outlet',
    templateUrl: 'game.html',
    directives: const [UiAppBarComponent, ROUTER_DIRECTIVES]
)
class GameComponent implements OnInit {

  int id;
  final RouteParams _routeParams;

  GameComponent(this._routeParams);

  ngOnInit() {
    this.id = int.parse(_routeParams.get('id'));
  }
}

When I click on the link it takes me to the correct URI in the address bar and loads GameComponent however it throws the following exception:

ORIGINAL EXCEPTION: Class 'int' has no instance getter 'isEmpty'.
NoSuchMethodError: method not found: 'isEmpty'

The stack trace is pointing to the ngOnInit line that sets this.id to the id from routeParams.

When I refresh the page it correctly loads! Any ideas what could be causing this?

Thanks

Solution

I think it should be

<a [routerLink]="['Game', {id: '76043'}]">

Integers in router params are not supported.

Answered By – Günter Zöchbauer

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)