Pipe could not be found in ionic4

Ionic Framework
1

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>

            </tr>

StatusairportPipe model ts

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

@Pipe({
  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
    if(this.states[value]){
      return this.states[value];
    } else {
      return value;
    }
  }

}

app.module.ts

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';

@NgModule({
  declarations:
   [AppComponent, 
    StatusairportPipe

  ],
  entryComponents: [],

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

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HTTP,
    Network
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
2

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’;

@NgModule({
declarations: [TypePipe],
imports: [CommonModule],
exports: [TypePipe]
})

export class MainPipeModule { }

3

unfortunately , it is same problem !

4

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’;

@Pipe({
name: ‘Type’
})
export class TypePipe implements PipeTransform {

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

5

what about this ? delete or keep it ?

6

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

7

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’.

8

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

9

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

10

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.

pipes.module.ts:

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

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”

/modules/sharePipe.module.ts

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

@NgModule({
    declarations: [CpfPipe],
    imports: [
        CommonModule
    ],
    exports: [
        CpfPipe
    ]
})
export class SharedPipeModule {}

/pipes/cpf.pipe.ts

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

@Pipe({
    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");
    }
}

/pipes/cpf.pipe.spec.ts

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

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

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

12

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