Pipe not found (lazy loaded pages - using Josh Morony's checklist example)

Ionic Framework ionic-v3
1

Hi folks, I’m developing an app that is based off Josh Morony’s checklist app that basically uses lazy loading. I’m trying to implement a pipe that I can use in the template, within ngFor but I just can’t get past The pipe could not be found. I’ve followed different sites that talked about changes between various RC versions on how to use pipes - and I think I’ve followed the latest norms. I then came across this thread which seems to conclude if you are using lazy loading, you can’t use pipes. What?!?!? Please tell me this has been solved, or I’m doing something wrong!

Here is my code:

app.module.ts


import { SearchPipe } from '../pipes/search/search';
@NgModule({
  declarations: [
    MyApp,
    SearchPipe,
  ],
// deleted rest of code - no references to SearchPipe beyond this

My search.ts pipe code (currently really a dummy printing logs)

import { Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
  name: 'my_search',
  pure:true
})
@Injectable()
export class SearchPipe implements PipeTransform {
   transform(items:any[], param:string) {
    console.log (" GOT PARAM="+param);
    for (let i=0; i< items.length; i++) {
      console.log ("PIPE GOT: "+items[i].date);
    }
    
    return items;

  }
}

The Component that uses the pipe imports it as such:
import {SearchPipe} from "../../pipes/search/search";

Finally, the template of that component:
<ion-item-sliding *ngFor="let item of selectedCategory.record.items | my_search:'argh'; let i=index">

ionic info:
global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.4.2

System:

    Node       : v8.1.2
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.0 
    ios-sim    : 5.0.2 
    npm        : 5.0.3

Thanks.

2

Try to make a extra pipe.ts like this:

import { NgModule } from '@angular/core';
import {YoutubePipe} from "./youtube/youtube";


@NgModule({
	declarations: [
		YoutubePipe,
	],
	imports: [

	],
	exports: [
		YoutubePipe,
	]
})

export class Pipes { }

image

And add it in the module.ts of the page where you want to use it:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DesignerLabelDetailPage } from './designerlabel-detail';
import { Pipes } from '../../pipes/pipes';

@NgModule({
  declarations: [
	DesignerLabelDetailPage,
  ],
  imports: [
	IonicPageModule.forChild(DesignerLabelDetailPage),
	Pipes,
  ],
  exports: [
	DesignerLabelDetailPage
  ]
})
export class DesignerLabelDetailPageModule {}

image

1 Like
3

Thank you! Works well! (And sheesh - so much work just to get a filter working!)

4

I solved my problem by importing the pipes.module in the module.ts of the page where i wanted to use it… and then in the .ts file of the page I wanted to use I imported the pipe