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 { }

2 Likes
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

3 Likes
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?

1 Like
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.

3 Likes
12

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