Ошибка Angular + Dart JS при переходе на другую страницу

Я пытаюсь разработать простое веб-приложение Dart + Angular2. Я прошел курс Tour of Heroes и читал о Дарт.

У меня проблема, которую я не могу понять.

Я пытаюсь создать простое приложение, в котором есть список пользователей, а затем вы можете выбрать пользователя и отредактировать его.

В моем проекте есть 3 файла с дротиками: app_component, user_list и user_edit:

Это мои файлы дротиков:

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);
        }
    }
}

В представлении user_list я отображаю данные пользователя в виде таблицы, и у меня есть событие щелчка для каждой строки, которое, как я ожидаю, приведет меня на страницу редактирования пользователя.

user_list_component.html

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

Выполнение этого в Dartium дает ожидаемый результат, и я могу перемещаться между списком пользователей и страницей редактирования пользователей, но он не работает в любом другом браузере, и браузер не выдает никакой информации об ошибке.

Это ошибка, которую я получаю

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

Я пытаюсь изучить Angular с помощью Dart, и я, вероятно, здесь что-то делаю не так, но я не могу понять, что, и я был бы очень признателен за помощь :)

Заранее спасибо.

ИЗМЕНИТЬ 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

ИЗМЕНИТЬ 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>

ИЗМЕНИТЬ 3:

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

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

person djointster    schedule 19.09.2016    source источник
comment
Вы где-нибудь используете @MirrorsUsed()? Не могли бы вы добавить свой pubspec.yaml?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Извините, забыл добавить свой pubspec.yaml. И нет, я не использую @MirrorsUsed().   -  person djointster    schedule 19.09.2016
comment
Все, что вы опубликовали, кажется прекрасным. Вы загружаете приложение в Chrome (или в другой браузер) из pub serve или из pub build?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Я загружаюсь из pub serve, и я пытался загрузить его в Chrome, Firefox и IE11.   -  person djointster    schedule 19.09.2016
comment
Какую версию Dart вы используете? Вы обновили Dartium, чтобы он соответствовал используемой вами версии Dart?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Я использую Dart версии 1.19.0 и Dartium 1.19.0.0. Работает в Дартиуме. Он не работает в Chrome 52.0.2743.116 m, Firefox 38.2.1 и IE 11. Все с той же ошибкой.   -  person djointster    schedule 19.09.2016
comment
Не могли бы вы попробовать удалить каталог .pub в вашем проекте, затем снова запустить pub get и снова запустить приложение.   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Я удалил .pub, запустил pub get и перезапустил, но ошибка не исчезла.   -  person djointster    schedule 19.09.2016
comment
Но это работает с примерами Tour of Heroes?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Да, Тур героев работает. Сначала я подумал, что это может быть то место, где я пытаюсь обработать щелчок, но я попытался сделать это точно так же, как Tour of Heroes, и это дало мне ту же ошибку.   -  person djointster    schedule 19.09.2016
comment
Когда именно вы получите сообщение об ошибке. Когда вы нажимаете на routerLink или когда загружаете приложение, ...?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Я могу перечислить пользователей, но когда я нажимаю на строку, я вижу, что gotoUser(User user) вызывается, он запускает ngOnInit() из user_edit_component, данные возвращаются из службы, но после этого он выдает ошибку и никогда не отображает страница.   -  person djointster    schedule 19.09.2016
comment
Можете ли вы попробовать использовать HTML, отличный от <tbody>, <tr> и <td> (без элементов, связанных с таблицей)? Есть ли у вас привязки внутри <tr> или <td>?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Внутри <tr> у меня есть привязки к некоторым свойствам пользователя. Я изменил таблицу на <ui> с <li *ngFor="let user of users" (click)="gotoUser(user)">, и у меня такая же ошибка.   -  person djointster    schedule 19.09.2016
comment
Можете ли вы попытаться прокомментировать их, чтобы сузить круг возможных ошибок.   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Хм, я думаю, моя проблема связана с user_edit_component.html и .dart. Мне удалось отобразить страницу без каких-либо привязок. Должно быть, это одна из тех маленьких ошибок. Добавлю свойства по очереди и вернусь :)   -  person djointster    schedule 19.09.2016
comment
Я добавил свой user_edit_component.html. Кажется, что если я закомментирую строку <input [(ngModel)}="user.domain" placeholder="domain"/>, она отобразит страницу. Я проверил и дважды проверил документацию и думаю, что у меня нет никаких ошибок.   -  person djointster    schedule 19.09.2016
comment
В этом вводе нет ничего плохого, кроме опечатки (см. Мой ответ). Вы уверены, что domain всегда содержит строку?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Tha domain это String да, но может быть null или пусто   -  person djointster    schedule 19.09.2016
comment
Это не должно иметь значения. null и пустой также должны работать. Я тоже не вижу ошибок. Не могли бы вы также добавить класс User?   -  person Günter Zöchbauer    schedule 19.09.2016
comment
добавлен класс User   -  person djointster    schedule 19.09.2016
comment
Я воспользуюсь другим подходом, я скачаю Tour of Heroes и попытаюсь отредактировать его в соответствии со своими потребностями, вместо того, чтобы создавать свой проект.   -  person djointster    schedule 19.09.2016
comment
Я бы попробовал перейти к print('user.domain: ${user?.domain}'); после user = await _userService.getUser(userId); и запустить его в браузерах, где приложение не может проверить, что оно печатает в консоли браузера.   -  person Günter Zöchbauer    schedule 19.09.2016
comment
Я распечатал значения, как вы сказали, и распечатал свои пользовательские данные, поступающие из веб-службы. Я также начал изменять «Тур героев» в соответствии со своими потребностями, и теперь он работает.   -  person djointster    schedule 27.09.2016


Ответы (1)


NgModel является частью директив форм, а не ядром, поэтому кажется, что вам не хватает FORM_DIRECTIVES пакета директив в вашем списке директив для компонента user_edit_component.

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

В Angular2 Dart вы должны явно указать все директивы, которые вы хотите сделать доступными в своем шаблоне, если вы не сделаете их глобально доступными через pubspec.yaml.

person Thibault Sottiaux    schedule 02.10.2016
comment
Это не тот случай, если они перечислены в разделе pubspec.yaml трансформаторов, как показано в вопросе (platform_directives, platform_pipes). Таким образом, встроенные и настраиваемые директивы и каналы могут быть доступны во всем мире. - person Günter Zöchbauer; 02.10.2016
comment
Вы правы, отредактированный ответ, чтобы отразить, что это, вероятно, FORM_DIRECTIVES. - person Thibault Sottiaux; 02.10.2016