1
votes

I am doing this tutorial: https://angular.io/docs/dart/latest/tutorial/toh-pt2.html

Now, I am trying to get list of heroes on the page. There is error while compiling template from tutorial. This is template: https://github.com/angular/angular.io/blob/master/public/docs/_examples/toh-2/dart/lib/app_component.dart#L13. I am getting this error:

Build error:
Transform TemplateCompiler on ng2_hero_app|lib/app_component.ng_meta.json threw error: Template parse errors:
Property binding ngForOf not used by any directive on an embedded template ("
      <h2>My Heroes</h2>
      <ul class="heroes">
        [ERROR ->]<li *ngFor="let hero of heroes"
          [class.selected]="hero == selectedHero"
          (click)"): AppComponent@3:8
Property binding ngIf not used by any directive on an embedded template ("
        </li>
      </ul>

What I tried?

  • I tried it by myself first, got error. I copy-pasted code from github then and I am getting same error.
  • I tried to re-run pub get (I thought there is some error like missing some npm package when developing node module).
  • I tried to research and found this. This post says, that I should rewrite code of *ngFor directive. Well, I tried, templated compiled successfully, but I got nothing on page.

This is my current app_component.dart code: https://github.com/sharikovvladislav/angular2-hero-app/blob/master/lib/app_component.dart

1

1 Answers

2
votes

You might miss COMMON_DIRECTIVES in pubspec.yaml

  transformers:
  - angular2/transform/codegen:
      platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'

This is RC syntax which is not yet available for Dart

<li *ngFor="let hero of heroes"

in beta it is

<li *ngFor="#hero of heroes"

See also https://github.com/angular/angular.io/issues/825 and the linked wiki document where PLATFORM_PIPES are mentioned which can be made available globally this way as well.