Custom Pipe Ionic 3 | Pipe Not Found

Question

I need help, I have problem with pipe in Ioni 3, I've been following this thread Ionic 3 cant find Pipe and this link Ionic 3 Pipe Globally But still no luck all i Get is The Pipe separator not work, I'm generating my pipe using ionic g pipe separator I use my pipe like this in my html

{{string | separator}}

my separator.ts (custom pipe)

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

/**
 * Generated class for the SeparatorPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'separator',
})
export class SeparatorPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string, ...args) {
    return value.toLowerCase();
  }
}

my pipe.module.ts

import { NgModule } from '@angular/core';
import { SeparatorPipe } from './separator/separator';
@NgModule({
    declarations: [SeparatorPipe],
    imports: [],
    exports: [SeparatorPipe]
})
export class PipesModule {}

my page.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { InfaqPage } from './infaq';
import { PipesModule } from '../../pipes/pipes.module';

@NgModule({
  declarations: [
    InfaqPage,
  ],
  imports: [
    IonicPageModule.forChild(InfaqPage),
    PipesModule
  ],
})
export class InfaqPageModule {}

Any idea why it doesnt work??

@pareshGami i just following instruction from both link i provided , that i must use modules file for pipe , but still no luck cant find a way to call custom pipe in ionic 3 — dmh, Jan 03 '18 at 21:41

score 11 · Accepted Answer · answered Jan 03 '18 at 21:47

11

Step 1: ionic g pipe separator

Here ionic generator src/pipes/pipes.module.ts => Delete that file.

Step 2: Import pipe in app.module.ts file

import { SeparatorPipe } from '../pipes/separator/separator';

declarations: [
    ...
    SeparatorPipe
    ...
  ],

Step 3: Just use pipe in page like

{{'STACKOVERFLOW' | separator}}

answered Jan 03 '18 at 21:47

Paresh Gami

4,777
5
23
41

ITS WORK, OMG , I've been struggle with this for 2 days,, thank's so much, but can you explain it what happen?? – dmh Jan 03 '18 at 22:05
Cool.! Happy to Help.! When you use ionic 3 don't use modular concept because it causes errors when you create build in --prod mode. Ionic generates module but after prod flag not working why really don't know – Paresh Gami Jan 03 '18 at 22:11
aah i see thats why =-="its always causes error ..Thank's for the answer and the explanation – dmh Jan 03 '18 at 22:56
Using pipes in a module, the way `ionic generate` does, works fine even with the `--prod` flag. – Sébastien Jan 03 '18 at 23:31
Thank you! Working like a charm. Anyhow my editor Visual Code still throwing errors... "[Angular] The pipe 'reverse' could not be found". But it's working! :) – FireVortex Oct 29 '18 at 10:04
@FireVortex. Cool. Happy to hear.! – Paresh Gami Oct 31 '18 at 04:19
@Gene. Glad to help you.! – Paresh Gami Dec 11 '18 at 03:32

Custom Pipe Ionic 3 | Pipe Not Found

1 Answers1