Ionic-framework: bug: [RC1] The pipe '...' could not be found (RC1)

[giammaleoni]

Type: bug

Ionic Version: 2.x

Platform: mobile browser

Unable to use Custom defined Pipes

1. I defined a simple Filter pipe (filter by property checked = true )
2. I imported it under app.module.ts and added under declaration
3. imported in the module where I need it
4. used to filter a list in the relative HTML template ( )

The browser log return me a parsing error cause it can't find the pipe:

Template parse errors:
The pipe 'Filter' could not be found

The pipe is similar to the one in the Angular Docs: https://angular.io/docs/ts/latest/guide/pipes.html#!#impure-flying-heroes

[mbakker96]

I've the same problem.

[jgw96]

Hello, thanks for opening an issue with us! Unfortunately, i cannot reproduce this issue, would you be able to provide a repo that I can use to reproduce this?

[giammaleoni]

During the creation of an example repo with the issue to post here I understand how to resolve my problem:
I was trying to use the pipe with the "class name" instead of "pipe name":

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false
})
export class Filter implements PipeTransform {

  transform(values: any[]) {
    return values.filter(item => item.checked);
  }

}

In the example above I was using "Filter" instead of "filter"...

Anyway thx for the answer!

[mbakker96]

I've the same problem. I've made a repo on my github page for the error:

https://github.com/mbakker96/pipebug

[giammaleoni]

I'm not sure but the reason could be that your put the pipe in the imports array instead of the declaration one.
You can try making a change to your app.module.ts:

import {NgModule} from '@angular/core';
import {IonicApp, IonicModule} from 'ionic-angular';
import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {PipesModule} from '../pipes';

@NgModule({
    declarations:    [
        MyApp,
        HomePage,
        PipesModule //move the pipe here
    ],
    imports:         [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap:       [IonicApp],
    entryComponents: [
        MyApp,
        HomePage
    ],
    providers:       []
})
export class AppModule {
}

[giammaleoni]

@mbakker96 did you have the chance to check suggestion?

[mbakker96]

@giammaleoni I fixed it with adding the pipes into the export

[alienriquebm]

@giammaleoni sorry, i know that this is old but... why the pipe must to be exported on the shared module? I can find a clear explanation. Your answer help me to fix a problem. Thanks

[AnalyzePlatypus]

@mbakker96 worked for me.

@aebmknrl:
Suppose you have a module AppModule, a component MyComponent, and a pipe MyPipe.
MyComponent is declared by AppModule.

You now want to import the pipe into AppModule, so it will be available to MyComponent
(You could also create a new module PipesModule, but for a single pipe that should be unnecessary)

Now import the pipe into AppModule, and add it in 2 places:

1. Add it to the declarations array
2. Also add it to the exports array

It should now be available.
Annoyingly, the docs don't bother to mention that the pipe must be exported as well.
Hope this helps!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.