Angular + Dart JS Error when routing to another page

Question

I'm trying to develop a simple Dart + Angular2 web application. I've done the Tour of Heroes tutorial and i've been reading about Dart.

I have a problem that i can't seem to understand.

I'm trying to build a simple app that has a list of users and then allows you to select a user and edit it.

I have 3 dart files in my project, the app_component, the user_list and the user_edit:

This are my dart files:

app_component.dart

@RouteConfig(const [
    const Route(path: '/users', name: 'UsersList', component: UserListComponent),
    const Route(path: '/user/:id', name: 'UserDetail', component: UserEditComponent)
])

@Component(
    selector: 'users',
    templateUrl: 'app_component.html',
    directives: const [ROUTER_DIRECTIVES],
    providers: const [UserService, ROUTER_PROVIDERS]
)
class AppComponent {}

user_list_component.dart

@Component(
    selector: 'user-list',
    templateUrl: 'user_list_component.html'
)
class UserListComponent implements OnInit {
    List<User> users;

    final UserService _userService;
    final Router _router;

    UserListComponent(this._userService, this._router);

    Future<Null> ngOnInit() async {
       users = await _userService.getUsers();
    }

    void gotoUser(User user) {
        _router.navigate(["UserDetail", {'id': user.userId.toString()}]);
    }
}

user_edit_component.dart

@Component(
    selector: 'user-detail',
    templateUrl: 'user_edit_component.html'
)
class UserEditComponent implements OnInit {
    @Input()
    User user;

    final UserService _userService;
    final RouteParams _routeParams;

    UserEditComponent(this._userService, this._routeParams);

    Future<Null> ngOnInit() async {
        var userId = _routeParams.get('id');
        if(userId != null) {
            user = await _userService.getUser(userId);
        }
    }
}

In user_list view, i display the user data as a table, and i have a click event on each row, that i expect to take me to the user edit page.

user_list_component.html

...
<tbody>
    <tr *ngFor="let user of users" (click)="gotoUser(user)">
        <td>...</td>
    </tr>
</tbody>
...

Running this on Dartium, gives me the expected result, and i can navigate between the user list and the user edit page, but it fails on every other browser and the browser doesn't give any info in the error.

This is the error i get

js_helper.dart:1729 Uncaught 
  wrapException @ js_helper.dart:1729
  call$0 @ async_patch.dart:561
  _microtaskLoop @ schedule_microtask.dart:41
  dart._startMicrotaskLoop @schedule_microtask.dart:50
  dart._AsyncRun__initializeScheduleImmediate_internalCallback.call$1 @async_patch.dart:54
  call$0 @ js_helper.dart:2409
  eval$1 @ isolate_helper.dart:462
  _callInIsolate @isolate_helper.dart:54
  dart.invokeClosure @ js_helper.dart:2409
  (anonymous function) @ js_helper.dart:2429

I'm trying to learn Angular with Dart, and i'm probably doing something wrong here, but i can't find out what and i'd really appreciate some help :)

Thanks in advance.

EDIT 1:

pubspec.yaml

name: test_app
description: Test App
version: 0.0.1
environment:
  sdk: '>=1.13.0 <2.0.0'
dependencies:
  angular2: 2.0.0-beta.21
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
  platform_directives:
  - 'package:angular2/common.dart#COMMON_DIRECTIVES'
  platform_pipes:
  - 'package:angular2/common.dart#COMMON_PIPES'
  entry_points: web/main.dart
- dart_to_js_script_rewriter

EDIT 2:

user_edit_component.html

<div *ngIf="user != null">
    <label>User </label><span>{{user.userId}}</span>
    <label>Name: </label><span>{{user.fullName}}</span>
    <label>Domain: </label>
    <input [(ngModel)]="user.domain" placeholder="domain"/>
</div>

EDIT 3:

class User {
  String userId;
  String firstName;
  String lastName;
  String fullName;
  String email;
  String domain;
  List<String> roles;

  User(this.userId, this.domain);
}

Answer 1

NgModel is part of the forms directives and not the core, so it seems that you're missing the FORM_DIRECTIVES bag of directives in your list of directives for the user_edit_component component.

@Component(
    selector: 'user-detail',
    templateUrl: 'user_edit_component.html',
    directives: const [FORM_DIRECTIVES]
)

In Angular2 Dart you have to explicitly list all the directives that you want to make available in your template, unless you make them globally available through the pubspec.yaml.