0

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
jack
  • 21
  • 1
  • 4

2 Answers2

0

You should not name you custom pipe class CurrencyPipe because there is already a built-in pipe with that class name.

Rename your class to CustomCurrencyPipe for instance:

export class CustomCurrencyPipe implements PipeTransform {

Also check in app.module.ts that you import your own pipe (not Angular's CurrencyPipe) and use the new class in your declarations:

declarations: [AppComponent, CustomCurrencyPipe],
Sébastien
  • 11,860
  • 11
  • 58
  • 78
  • The point is he should note in his imports that he is using his own pipe and not the built in one. Its not that he can't use the same name – misha130 Jun 03 '20 at 10:49
  • 1
    Although I agree with @misha130, it is better practice to not use built-in names. This way you can see which class, property or pipe is being used. – jack Jun 03 '20 at 11:35
  • @Sébastien I updated the code in the original post. Sadly i still get the same error. – jack Jun 03 '20 at 11:38
  • If the stackblitz works, it probably means there's a typo in your code. – Sébastien Jun 03 '20 at 12:57
  • Agreed, but I can't find it! I double checked everything. Could it be that an import is messing with it? – jack Jun 03 '20 at 13:12
  • Have you tried copying file by file from the stackblitz? – Sébastien Jun 03 '20 at 13:15
  • The code on Stackblitz is copied from my code, but not the files. Will try that later. But I find it strange... Will update the OP when I have tried it – jack Jun 03 '20 at 14:40
  • You can't be very far ;) – Sébastien Jun 03 '20 at 14:49
  • I tried to add some of my own files, but it keep giving errors. Now it can't find a package which is installed (I can see it with the dependencies). This is getting really stupid for a simple pipe – jack Jun 04 '20 at 11:07
0

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?

jack
  • 21
  • 1
  • 4