Angular2Dart and NG Directives

Question

Investigating angular2 for Dart with the following code

show_properties.dart

library displaying_data.show_properties;

import 'package:angular2/angular2.dart';
import 'dart:async';

@Component( selector: 'display' )
@View( template: '''
<p>My name: {{ myName }}</p>
<p>Current time: {{ time }}</p>
<p>Friends:</p>
<ul>
   <li *ng-for="#name of friendNames">
      {{ name }}
   </li>
</ul>
''', directives: const [NgFor] )
class DisplayComponent {
  String myName = 'Alice';
  String time;
  Timer _timer;

  List<String> friendNames = const [
    'Aarav',
    'Martín',
    'Shannon',
    'Ariana',
    'Kai'
  ];

  DisplayComponent( ) {
    _updateTime( null );
    _timer = new Timer.periodic( new Duration( seconds: 1 ), _updateTime );
  }

  _updateTime( Timer _ ) {
    time = new DateTime.now( ).toString( );
  }

}

I am following the example at https://angular.io/docs/dart/latest/guide/displaying-data.html

I am using the current WebStorm 11 EAP.

Attempting to run this app fails (without any errors). It seems as if the

directives: const [NgFor] 

property of the @View is the cause of the issues.

Is this the proper way of using an NG-directive an angular2 for Dart?

Failed with errors below

    J:\dart\dart-sdk\bin\pub.bat serve web --port=63462
Loading source assets...
Loading angular2 transformers...
Serving displaying_data web on http://localhost:63462
Build completed successfully
[web] GET Served 415 assets.
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
dart:convert/utf.dart 346                  Utf8Decoder.convert
dart:convert/utf.dart 66                   Utf8Codec.decode
dart:async/zone.dart 910                   _rootRunUnary
dart:async/zone.dart 810                   _CustomZone.runUnary
dart:async/future_impl.dart 502            _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 585            _Future._propagateToListeners
dart:async/future_impl.dart 376            _Future._completeWithValue
dart:async/future_impl.dart 430            _Future._asyncComplete.<fn>
dart:async/zone.dart 903                   _rootRun
dart:async/zone.dart 802                   _CustomZone.run
dart:async/zone.dart 735                   _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 43      _microtaskLoop
dart:async/schedule_microtask.dart 52      _microtaskLoopEntry
dart:isolate-patch/isolate_patch.dart 96   _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149  _RawReceivePortImpl._handleMessage

dart:isolate  _RawReceivePortImpl._handleMessage
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
dart:convert/utf.dart 346                  Utf8Decoder.convert
dart:convert/utf.dart 66                   Utf8Codec.decode
dart:async/zone.dart 910                   _rootRunUnary
dart:async/zone.dart 810                   _CustomZone.runUnary
dart:async/future_impl.dart 502            _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 585            _Future._propagateToListeners
dart:async/future_impl.dart 376            _Future._completeWithValue
dart:async/future_impl.dart 430            _Future._asyncComplete.<fn>
dart:async/zone.dart 903                   _rootRun
dart:async/zone.dart 802                   _CustomZone.run
dart:async/zone.dart 735                   _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 43      _microtaskLoop
dart:async/schedule_microtask.dart 52      _microtaskLoopEntry
dart:isolate-patch/isolate_patch.dart 96   _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149  _RawReceivePortImpl._handleMessage

dart:isolate  _RawReceivePortImpl._handleMessage
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
dart:convert/utf.dart 346                  Utf8Decoder.convert
dart:convert/utf.dart 66                   Utf8Codec.decode
dart:async/zone.dart 910                   _rootRunUnary
dart:async/zone.dart 810                   _CustomZone.runUnary
dart:async/future_impl.dart 502            _Future._propagateToListeners.handleValueCallback
dart:async/future_impl.dart 585            _Future._propagateToListeners
dart:async/future_impl.dart 376            _Future._completeWithValue
dart:async/future_impl.dart 430            _Future._asyncComplete.<fn>
dart:async/zone.dart 903                   _rootRun
dart:async/zone.dart 802                   _CustomZone.run
dart:async/zone.dart 735                   _CustomZone.bindCallback.<fn>
dart:async/schedule_microtask.dart 43      _microtaskLoop
dart:async/schedule_microtask.dart 52      _microtaskLoopEntry
dart:isolate-patch/isolate_patch.dart 96   _runPendingImmediateCallback
dart:isolate-patch/isolate_patch.dart 149  _RawReceivePortImpl._handleMessage

dart:isolate  _RawReceivePortImpl._handleMessage
[web] GET Served 244 assets.
Build error:
Transform DirectiveProcessor on displaying_data|lib/show_properties.dart threw error: Bad UTF-8 encoding 0x6e
dart:convert/utf.dart 479                  _Utf8Decoder.convert
'''

Thanks

Answer 1

Maybe several problems: viewInjector is deprecated

https://github.com/angular/angular/issues/3536

Answer 2

Looks like your lib/show_properties.dart file is corrupted. Renaming the original file and copying the content to a new lib/show_properties.dart file should fix the problem. If this doesn't work try again while copying the content from the tutorial again instead.