Pipe could not be found in ionic4

recently l create my own pipe in ionic4 name is StatusairportPipe . Then l imported it in app module.ts , now when l am trying to use it l got errors:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'my' could not be found ("
            <td text-center>{{item?.flight.aircraft.model.code}}</td>
            <td text-right>{{[ERROR ->]item?.flight.status.generic.status.text | my}}</td>


StatusairportPipe model ts

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

  name: 'my'
export class StatusairportPipe implements PipeTransform {

  public states: Object = {
    'scheduled':   'مجدولة',

  transform(value: string, ...args) {
    // This is our catch for data that hasn't interpolated
    // from its source yet, a basic async fix.
    if(value == null) return;
// Otherwise, lookup the state name from the acronym
      return this.states[value];
    } else {
      return value;



import { NgModule } from '@angular/core';
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 { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HTTP } from '@ionic-native/http/ngx';
import { Network } from '@ionic-native/network/ngx';
import { StatusairportPipe } from './statusairport.pipe';


  entryComponents: [],

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  bootstrap: [AppComponent]
export class AppModule {}

Example: Create a TypePipe, as you have create your StatusairportPipe then create a MainPipeModule so you can export it in the providers key at app.module.ts.

Hope it helps!

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;

import { TypePipe } from ‘./type.pipe’;

declarations: [TypePipe],
imports: [CommonModule],
exports: [TypePipe]

export class MainPipeModule { }


unfortunately , it is same problem !

Sorry, declare de created module in both keys: providers and imports.

Example Pipe:

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

import { GenericTypeFactory } from ‘…/common/generic-type’;

name: ‘Type’
export class TypePipe implements PipeTransform {

transform(value: number, arg: string) {
return GenericTypeFactory.getInstance().getGenericTypes(arg)[value].Name;

what about this ? delete or keep it ?

keep it, basically this module is where you declare all the pipes to later on export to the rest of your project.

l had error when l am try to run code

ERROR in src/app/app.module.ts(16,10): error TS2305: Module ‘“C:/Users/ali/krt/s
rc/app/main-pipe-module.pipe”’ has no exported member ‘MainPipeModulePipe’.

l fixed it . when i created my own pipe in ionic 4 you need only add it the pipe your created already in module of page you want use . you don`t need to add in app.module


How to do when this Pipe is used in more than one page, and Ionic says to consider move it to an Higher module?

1 Like

Had the same issue…

It seems you need to create a new general module for all your pipes, and then you can import the pipes from this pipes module from every page you need.


import { NgModule } from '@angular/core';
import {customPipe} from "some/path";
  declarations: [customPipe],
  imports: [<here you can import some other pipes, for example the ionic-ngx package: "NgPipesModule">],
  exports: [customPipe]
export class PipesModule {}

To solve this I had to create all my new custom pipes inside a folder called “pipes”, then I created a module called “sharedPipe.module.ts” inside a folder “modules”


import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {CpfPipe} from '../pipes/cpf.pipe';

    declarations: [CpfPipe],
    imports: [
    exports: [
export class SharedPipeModule {}


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

    name: 'cpf'
export class CpfPipe implements PipeTransform {

    transform(value: any): any {
        if (value == '' || value == null || value == undefined) {
            return value;

        return value.replace(/(\d+)(\d{3})(\d{3})(\d{2})/, " $1.$2.$3-$4");


import {CpfPipe} from './cpf.pipe';

describe('CpfPipe', () => {
    it('create an instance', () => {
        const pipe = new CpfPipe();

Then I only include my SharedPipeModule inside the modules that will use it.


I have the same problem… solve it with this too! thanks :slight_smile: