Angular2 Tour of Heroes in Dart: uppercase

Question

I have been following the Tour of Heroes from the Angular2 site using Dart as the language and I have an error when I try to use the uppercase pipe:

Build error:
Transform TemplateCompiler on angular2_tour_of_heroes|lib/heroes_component.ng_meta.json threw error: Template parse errors:
The pipe 'uppercase' could not be found ("

Here is my heroes_component.html file:

<h2>My Heroes</h2>
  <ul class="heroes">
    <li *ngFor="let hero of heroes" 
      [class.selected]="hero == selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <div *ngIf="selectedHero != null">
    <h2> {{selectedHero.name | uppercase}} is my hero </h2>
    <button (click)="gotoDetail()">View Details</button>
  </div>

It's not a big deal, but I'd like to know why this is happening. I'm using pub version 1.18.1 and Dart VM version: 1.18.1 on Linux.

For completeness, here is my pubspec file:

name: angular2_tour_of_heroes
description: Tour of heroes
version: 0.0.1
environment:
        sdk: '>=1.13.0 <2.0.0'
dependencies:
       angular2: 2.0.0-beta.18
       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

Answer 1

Update

Your pubspec.yaml limits Angular2 to beta.18 but there is already beta.19 available.

If you change the dependency to

dependencies:
       angular2: ^2.0.0-beta.18

and run pub upgrade you'll get the newest version. I'm not aware of changes related to pipes but it's worth a try (and this fixed it according to the comment below).

Original

You need to specify in pubspec.yaml that commonPipes should be ambient

transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart

See also

• https://angular.io/docs/dart/latest/quickstart.html
• https://github.com/angular/angular/wiki/Angular-2-Dart-Transformer#platform_pipes