loneboat
loneboat

Reputation: 2945

Angular2: Why am I getting "Pipe not found" error?

I'm reading through the docs on Angular.io, and as I do so I'm modifying a toy project to tinker with what I'm learning. I have a component with an element that I am resizing via events emitted from sliders. This is all working fine.

I came across Pipes, and to test it out I started outputting the dimensions of the box I was resizing. I can output the dimensions fine without pipes (and they update as expected), but whenever I add a pipe (e.g. DecimalPipe), I get the following error:

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
...

My code is below. I think I have included all of the relevant files, but if there is anything else that would be useful to see, let me know and I'll include it.

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;
        }
    }
}

Upvotes: 2

Views: 2863

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

If used in AppModule import BrowserModule, in other modules import CommonModule to make the pipe available:

@NgModule({
   imports:         [
     MaterialModule,
     CommonModule 
   ]

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

Upvotes: 9

Related Questions