Ionic pipe not found

Issue

I am trying to use pipes in my Ionic application and after long trial-and-error I found this tutorial:

https://levelup.gitconnected.com/create-your-own-pipe-in-angular-8-35f1f969ec49

It looked promising, but it doesn't work. I followed the currency-pipe, but ofcourse if works, since currency is a build-in pipe. As soon as I rename the pipe to customcurrency it gives the same error as all other tutorials:

core.js:6260 ERROR Error: Uncaught (in promise): Error: The pipe 'customcurrency' could not be found! Error: The pipe 'customcurrency' could not be found! at getPipeDef$1 (core.js:36866) at ɵɵpipe (core.js:36824) at PostPage_ng_container_9_Template (template.html:33) at executeTemplate (core.js:12129) at renderView (core.js:11899) at TemplateRef.createEmbeddedView (core.js:15576) at ViewContainerRef.createEmbeddedView (core.js:15687) at NgIf._updateView (common.js:4785) at NgIf.set ngIf [as ngIf] (common.js:4750) at setInputsForProperty (core.js:13859) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41640) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484) at invokeTask (zone-evergreen.js:1621)

Pipe:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customcurrency'
})
export class CustomCurrencyPipe implements PipeTransform {
  transform(value: number): any {
    return "$" + value;
  }
}

app.module:

@NgModule({
  declarations: [AppComponent, CustomCurrencyPipe],
  entryComponents: [],
  imports:
    [
      CommonModule,
      ReactiveFormsModule,
      BrowserModule,
      HttpClientModule,
      IonicModule.forRoot(), AppRoutingModule
    ],
  providers: [
    CustomCurrencyPipe,
    StatusBar,
    SplashScreen,
    HttpClientService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

usage:

{{ balance | customcurrency }}

UPDATE

I tried to repoduce my error on StackBlitz:

https://stackblitz.com/edit/ionic-tup4fz

Guess what? It works! So, the real question is; why doesn't it work in my Ionic Application?

UPDATE 2

I started a new Ionic project, added a simple pipe... Nothing more. Same problem: ERROR Error: Uncaught (in promise): Error: The pipe 'customCurrency' could not be found!

What I did:

1. Start new Ionic app: ionic start PipeTest blank
2. Added the pipe: ionic generate pipe pipes/CustomCurrency
3. Called the app in the home.page.html: {{ balance | customCurrency }}
4. Added balance in the home.page.ts: balance: number = 500;
5. Done

Solution

Alright, after long searching, trying and reading all those tutorials again, I found the answer.

It's very easy actually. Just remove the pipe declaration from the app.module.ts and put in the module of the page where you want to use the pipe. If you follow the steps of creating a new Ionic app, you get a home.page (which has a module). Put the pipe declaration in the home.module.ts and use the pipe in the HTML of home.page.html. Don't forget to add the pipe to the providers in the app.module.ts

This way is almost never mentioned in the tutorials I found. Maybe those are for older versions?

Answered By - jack