glapworth glapworth - 3 months ago 19
Dart Question

Angular2 Tour of Heroes in Dart: uppercase

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

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