Angular2: Warum bekomme ich den Fehler "Pipe not found"?

Question

Ich lese gerade die Dokumentation über Angular.io, und während ich das mache, modifiziere ich ein Spielzeugprojekt, um an dem zu basteln, was ich lerne. Ich habe eine Komponente mit einem Element, dessen Größe ich über Ereignisse, die von Schiebereglern ausgegeben werden, verändere. Das funktioniert alles gut.

Ich stieß auf Pipes, und um es zu testen, fing ich an, die Abmessungen der Box auszugeben, die ich in der Größe änderte. Ich kann Ausgang die Abmessungen ohne Rohre in Ordnung (und sie aktualisieren, wie erwartet), aber wenn ich ein Rohr (z DecimalPipe) hinzuzufügen, erhalte ich folgende Fehlermeldung:

Unhandled Promise rejection: Template parse errors: 
The pipe 'number' could not be found ("{{[ERROR ->]width | number}}x{{height}} 
    <br /> 
    <md-slider (change)="doSizeChange('v',$event.value)" value"): SvgCanvasComponent@0:2 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template 
... 

Mein Code ist unten. Ich denke, ich habe alle relevanten Dateien aufgenommen, aber wenn es noch etwas gibt, das nützlich wäre, um es zu sehen, lass es mich wissen und ich werde es aufnehmen.

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MaterialModule } from '@angular/material'; 
import 'hammerjs'; 

import { AppComponent } from './app.component'; 

import { NnpGuiModule } from './nnpGui/nnpGui.module'; 

@NgModule({ 
    imports:  [ 
    BrowserModule 
    ,MaterialModule.forRoot() 



,NnpGuiModule 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 

import {MdButton} from '@angular/material'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>NNP</h1> 
    <svgCanvasComponent [height]="400" [width]="600"></svgCanvasComponent> 
    <br /><button md-raised-button (click)="sayDoot()">DOOT</button> 
    `, 
}) 
export class AppComponent { 
    name: string; 
    inputVal: string; 

    constructor() { 
    this.name="doooooot"; 
    this.inputVal=""; 
    } 

    sayDoot(): void { 
    console.log('doot'); 
    } 
} 

nnpGui.module.ts

import { NgModule } from '@angular/core'; 
import { MaterialModule } from '@angular/material'; 
import { SvgCanvasComponent } from './svgCanvas.component'; 

@NgModule({ 
    imports:   [ 
    MaterialModule 
    ] 
    ,declarations: [SvgCanvasComponent] // what "belongs" to this module 
    ,exports:   [SvgCanvasComponent] // what exports to public from this module 
}) 
export class NnpGuiModule { 
} 

svgCanvas.component.ts

import { Component, Input, ViewEncapsulation } from '@angular/core'; 
import {MdButton} from '@angular/material'; 

@Component({ 
    selector: 'svgCanvasComponent', 
    template: `{{width | number:'3.1-5'}}x{{height | number:'3.1-5'}} 
    <br /> 
    <md-slider (change)="doSizeChange('v',$event.value)" value="100"></md-slider> 
    <md-slider (change)="doSizeChange('h',$event.value)" value="100"></md-slider> 
    <button md-button (click)="doResetSize()">Reset</button> 
    <br /> 

    <svg 
     id="svgEl" 
     style="border: 3px solid black" 
     id="logo" 
     [attr.width]="width" [attr.height]="height" viewBox="0 0 600 400" 
     (click)="doClick($event)" 
    ></svg> 
    `, 
    //encapsulation: ViewEncapsulation.Native // None/Native/Emulated 
}) 
export class SvgCanvasComponent { 
    @Input() width : number; 
    @Input() height: number; 

    initialHeight: number; 
    initialWidth: number; 

    constructor() { 
     [this.initialWidth, this.initialHeight] = [600, 400]; 
     [this.width, this.height] = [this.initialWidth, this.initialHeight]; 
    } 

    doClick(e:MouseEvent) { 
     console.log('SvgCanvasComponent clicked'); 
     console.log(e); 
    } 

    doResetSize() { 
     [this.height, this.width] = [this.initialHeight, this.initialWidth]; 
    } 
    doSizeChange(dir:string, pct:number) { 
     console.log(`doSizeChange: ${dir}; ${pct}`); 

     switch (dir) { 
      case 'h': this.height=pct/100.0 * this.initialHeight; break; 
      case 'v': this.width =pct/100.0 * this.initialWidth ; break; 
     } 
    } 
} 

Answer 1

Wenn in AppModule Import BrowserModule, in anderen Modulen verwendet importieren CommonModule das Rohr zur Verfügung zu stellen:

@NgModule({ 
    imports:   [ 
    MaterialModule, 
    CommonModule 
    ] 

https://angular.io/docs/ts/latest/api/common/index/CommonModule-class.html