Angular custom pipe not working 'pipe not found'

vdvaxel

I am trying to create a custom pipe in my Angular app but keep getting the 'no pipe found with name "currencyFormat"' error message. I created the pipe using Angular CLI: ng g pipe /components/pipes/currency-format, and the code looks like this:

import { formatNumber } from '@angular/common';

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: any, currency: string): any {
    const currencySymbol = (currency == 'EUR' ? '€' : '$');
    let formattedValue = `${currencySymbol} ${formatNumber(value, 'be', '1.2-2')}`;
    return formattedValue;
  }

}

Because I used the Angular CLI to create the pipe, the pipe is added to the declarations of app.module.ts automatically. I am trying to use the pipe in one of my page (home.page.html), but still I get this error. I've tried many different things so far, including putting the pipe in a separate module and trying to import that module, but without any success.

Any ideas what this issue might be?

EDIT: here is my app.module.ts as well, in case it's useful:

import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ComponentsModule } from 'src/app/components/components.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from 'ng2-charts';
import { environment } from "src/environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFirestoreModule } from "@angular/fire/firestore";
import { ServiceWorkerModule } from '@angular/service-worker';
import { CurrencyFormatPipe } from './components/pipes/currency-format.pipe';

@NgModule({
  declarations: [AppComponent, CurrencyFormatPipe],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot({ animated: true, mode: 'ios' }), 
    AppRoutingModule, 
    ComponentsModule,
    BrowserAnimationsModule,
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
DJ House

The best way to solve this issue to to have a common, Shared Module. This is a common pattern in Angular.

Given an example folder/app structure:


app
├── home
│   ├── home.component.ts
│   ├── home.module.ts
│   └── ...
├── shared
│   └── shared.module.ts
├── app.module.ts
└── ...

Then you declare and export components, pipes, directives, modules, etc in your shared.module that multiple other modules will need.

shared.module.ts

import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    /* declare it once, here */
    CurrencyFormatPipe
  ],
  exports: [
    /* then export it */
    CurrencyFormatPipe
  ]
})
export class SharedModule { }

All your other modules will just import your shared.module and be able to use anything the shared module exports.

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    /* import your shared module here */
    SharedModule,

    IonicModule.forRoot({ animated: true, mode: 'ios' }), 
    AppRoutingModule, 
    ComponentsModule,
    BrowserAnimationsModule,
    ChartsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

And then you can also import it into your home.module.ts

@NgModule({
  declarations: [/* other imports */],
  entryComponents: [],
  imports: [
    /* import your shared module here, you will have access to the currency pipe now */
    SharedModule
  ],
})
export class AppModule {}

Hope that helps. Here are the Angular docs about shared modules.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  3. 3

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  4. 4

    pump.io port in URL

  5. 5

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  10. 10

    How to remove the extra space from right in a webview?

  11. 11

    java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

  12. 12

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  13. 13

    flutter: dropdown item programmatically unselect problem

  14. 14

    How to use merge windows unallocated space into Ubuntu using GParted?

  15. 15

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  16. 16

    Nuget add packages gives access denied errors

  17. 17

    Svchost high CPU from Microsoft.BingWeather app errors

  18. 18

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  19. 19

    12.04.3--- Dconf Editor won't show com>canonical>unity option

  20. 20

    Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

  21. 21

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

HotTag

Archive