Custom Pipe "could not be found"

Ionic Framework Ionic Angular
1

I’m trying to create a custom pipe and whenever I try to invoke it in my template, I get an error:

ERROR Error: The pipe 'commaObject' could not be found!

Looking at tutorials, stack overflow posts, and here in the forums, there’s two types of solutions, and neither works for me.

Older posts show how to create the custom pipe, then load it in the app.module.ts file then expose it through declarations and exports.

Newer posts say to not import your custom pipe in the app.module.ts file, but to make a separate pipe module file (shown below) and import that only into the module/page that wants to use it.

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

@Pipe({
  name: 'commaObject'
})
export class CommaObjectPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return Object.keys(value).map((k) => value[k]).join(', ');
  }

}

import { NgModule } from '@angular/core';
import { CommaObjectPipe } from './pipes/comma-object.pipe';

@NgModule({
    declarations: [CommaObjectPipe],
    imports: [],
    exports: [CommaObjectPipe]
})
export class PipesModule { }

But that’s not working either. Is there a current, modern, example of how to implement Pipes with the latest Ionic/Angular?

Also, when you import the module into your page, how do you do it?

import from '../pipe.module'; ???

import { PipesModule } from '../pipe.module'; ???

Neither works for me, but I didn’t see the ‘right’ way to do this in the posts I looked at.

2

Hi @johnwargo,

For using your CommaObjectPipe you need to add PipesModule to the imports array of the Angular module declaring the component that using your commaObject

Example component (the one using your pipe)

@Component({
  selector: 'app-hello',
  template: `<div>{{ helloData | commaObject }}</div>`
})
class HelloComponent {
}

Example Module (the one declaring your component that use your pipe)

import { PipesModule } from '../pipe.module'

@Module({
   declaration:[HelloComponent],
   imports: [PipesModule],
})
class HelloModule {
}

Then it should work well !

1 Like
3

That worked, thanks. I missed that step.

4

You’re welcome !

Don’t hesitate to flag your questions as [Solved] :slight_smile:

5

Because I like to look at complete solutions when working through a problem, I created a new project and documented the whole process of creating a custom pipe in Ionic Pipe Example. I hope others who encounter this problem will benefit from the solution.

2 Likes