Ionic 4 - Pipe could not be found - ionic-framework

Question

I have 2 pages to use a custom pipe. I have created a folder in src/app named pipes. And created a file pipes.module.ts
import { NgModule } from '#angular/core';
import { TranslatePipe } from './translate.pipe';
#NgModule({
declarations: [
TranslatePipe
],
imports: [],
exports: [
TranslatePipe
]
})
export class PipesModule {}
and im importing it from my first component module file
devices.module.ts
import { PipesModule } from '../pipes/pipes.module';
#NgModule({
imports: [
...
PipesModule
],
declarations: [DevicesPage, ]
})
export class DevicesPageModule {}
this component works well when i use pipe.
but i have another component too.
home.module.ts
import { PipesModule } from '../pipes/pipes.module'
#NgModule({
imports: [
PipesModule,
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
]),
ComponentsModule,
MatPaginatorModule,
],
declarations: [HomePage]
})
export class HomePageModule {}
im calling home page from devices page with a button. But i get error when i click the button.
pipes.module.ts;
import { NgModule } from '#angular/core';
//import custom pipes here
#NgModule({
declarations: [
TranslatePipe
],
imports: [],
exports: [
TranslatePipe
]
})
export class PipesModule {}

Answer 1

I faced with same issue in ionic-V4 app. I solved my issue like this. see this code you will know. I removed pipe from app.module.ts file.
Create a new pipe using the below command:
ionic g pipe translatePipe
Then import this pipe to home.module.ts file.
import { FirstCapsPipe } from '../first-caps.pipe';
Then include it in the declarations of the home.module.ts file.
declarations: [HomePage, FirstCapsPipe]
home.html
<h2>{{data|translatePipe}}</h2>
hope it help you :)

Answer 2

1) Firstly, create pipes folder in src/app folder (in app folder).
2) Second, on cmd "ionic generate pipe pipes/searchfilter" => this will generate two files in pipes.
3 Third, create file in pipes folder with name "pipes.module.ts"
and write below code to => "pipes.module.ts"
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SearchfilterPipe } from './searchfilter.pipe'; //our pipe which we generate
#NgModule({
imports: [
CommonModule
],
declarations: [SearchfilterPipe],
exports: [SearchfilterPipe]
})
export class PipesModule { }
Now we have PipesModule we can generate more pipes and write them in pipesmodule. We will import only PipesModule instead of all pipes.
4) You do not have to import PipesModule in app.module.ts
5) Now go to page which you want to use pipe and open for example "anasayfa.module.ts"
and import "PipesModule" and write it in #ngModel imports(it will be created automatically)
Please be careful you will import PipesModule to something.MODULE.TS not something.page.ts

Answer 3

Ionic 4 Solution:
This is how I got custom pipe working in Ionic 4:
Created custom pipe in pipes folder in the app directory using:
ionic g pipe plural-singular
NOTE: You can create the pipe wherever you please in your project directory, although I recommend placing it in pipes directory for the sake of organization.
In the module of the page where I wanted to use this pipe, I imported the pipe and specified it under providers and declarations, like so:
all.module.ts
import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
providers: [
PluralSingularPipe //---> Here
],
declarations: [PluralSingularPipe] //---> And here
})
Imported the pipe in the TS file of the page where I wanted to use the pipe, like so:
all.page.ts
import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';
Declared the pipe in the constructor of the same page, like so:
all.page.ts
constructor(public pluralSingular: PluralSingularPipe) {}
Used it in my HTML file, like so:
all.page.html
{{ numberOfRecords | pluralSingular: 'coupon' : 'coupons' }}
That's it!
FOR THE CURIOUS: If it helps, here are my versions from package.json file:
"#ionic/angular": "^4.7.1",
"#angular/core": "~8.1.2",

Answer 4

I realized I forgot to import PipesModule for child components in homepage. Problem solved after i imported

Answer 5

save a lot of reading and experiments by just importing the pipe on every module that you need to use it in.
For example if you have a page called home and you want to use the pipe here, go to home.module.ts and import it there, add the pipe in declarations and in exports and you are done!
Now if you have multiple pipes create a module, you can even call it allmypipes.module.ts.
import all the relevant pipes into this module and add them to declarations and exports, then import this module to every page (page.module.ts) you want to use any of the pipes and you are done!