1

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

2
  • I created the example by copying the source from the tutorial into a local project and it works fine for me. Do you get any error messages in the debugger console or the pub serve tab? Sep 11, 2015 at 6:09
  • See edit above. Thanks Sep 11, 2015 at 7:35

2 Answers 2

1

Maybe several problems: viewInjector is deprecated

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

5
  • viewInjector is not used in this example and nothing indicates it is the cause for the problem. I tried the example and it worked for me. Sep 11, 2015 at 8:17
  • It is used in the example. angular.io/docs/dart/latest/guide/displaying-data.html. I agree with the error msg. but the example use the deprecated syntax. Sep 11, 2015 at 8:37
  • Sorry, my bad. I copied this source from the question and there viewInjector was already removed. Sep 11, 2015 at 8:42
  • I am not sure but i think viewInjector: => viewBindings: Sep 12, 2015 at 6:45
  • @Christoph Lachenicht You are correct viewInjector: => viewBindings. Thanks Sep 13, 2015 at 16:05
0

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.

1
  • A simple case of copying GZ. Each time I copy the friendNames List, it seems as if some other character was being copiend that is invisible to me. Typing the characters of the list directly resolved the problem. Thanks. Sep 13, 2015 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.