Angular 2 custom pipe not found

Question

At first: Angular2: custom pipe could not be found this didn't help me in any case.. I have the following problem:

Pipe:

import { Pipe, PipeTransform } from "@angular/core";
import { DecimalPipe} from "@angular/common"; 

@Pipe({
    name: "ToNumberPipe"
})
export class ToNumberPipe extends DecimalPipe implements PipeTransform  {
    // this allows to pass strings in decimalpipes as well and do nothing if it NAN
    public transform(value: string, args: string): any {
        const retNumber = Number(value);
        if (isNaN(retNumber)) {
            return value;
        }
        return super.transform(value, args);
    }
}

App:module

@NgModule(
    {
        // all components, pipes and directive which are using this module
        declarations: [AppComponent, ... all Components go here],
        // All modules like forms or http
        imports: [...., MainPipeModule],
        // all services and other providers
        providers: [...all services go here],
        bootstrap: [AppComponent]
    }
)
export class AppModule {
}

Pipe Module

import { NgModule } from "@angular/core";
import {CommonModule} from "@angular/common";

import {ToNumberPipe} from "./shared/pipes/customNumber.pipe";
@NgModule(
    {
        // all components, pipes and directive which are using this module
        declarations: [ToNumberPipe],
        imports: [CommonModule],
        exports: [ToNumberPipe]
    })
export class MainPipeModule {
}

Html code

<span [ngClass]="getClass(rowValue)" class="badge isLink" (click)="selectTask(rowValue.taskId)">{{rowValue.value | ToNumberPipe : "1.0-4"}}</span>

I tried to add the Pipe directly to the app.module, but with same result...

zone.js:1 Unhandled Promise rejection: Template parse errors:
The pipe 'ToNumberPipe' could not be found

Also I tried to remove the arguments and add a simple pipe as well... always the same error

Angular 2 Version: 2.2.4

What component does contain the code that uses the pipe? What `NgModule` belongs this component to? — Günter Zöchbauer, Dec 01 '16 at 15:43
All components are in the same app.module file. Before I had it split in some some modules and thought it might be some problem with the different modules. But it didn't help to move all parts of the app in one module.. — Cabe Skuriles, Dec 02 '16 at 06:21

score 1 · Accepted Answer · answered Dec 01 '16 at 15:52

1

You have to use at least v2.3.0-rc.0

Upon this version following feature is included: core: properly support inheritance

I guess your Pipe is properly included and so on, but those decorators (eg. your name) aren't published correct..

answered Dec 01 '16 at 15:52

slaesh

16,659
6
50
52

Angular 2 custom pipe not found

1 Answers1