html - cómo resolver el error (pipe search no se pudo encontrar o no encontrado) al implementar los pipes para una barra de búsqueda en ionic 3

En mis intentos de implementar funciones de tubería de búsqueda y ordenación para preparar la función de búsqueda en mis proyectos de Ionic 3 para buscar en datos que provienen de la base de datos, obtuve un error que no sé por qué... error como este:

core.js:1350 ERROR Error: Uncaught (in promise): Error: Template parses errors:
The pipe 'sort' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'search' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'sort' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
The pipe 'search' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
Error: Template parse errors:
The pipe 'sort' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'search' could not be found ("
    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="l[ERROR ->]et f of users | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail it"): ng:///SearchPageModule/SearchPage.html@32:27
The pipe 'sort' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
The pipe 'search' could not be found ("

      <ion-list *ngSwitchCase="'places'">
        <ion-item *ngFor="l[ERROR ->]et p of places | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail i"): ng:///SearchPageModule/SearchPage.html@62:27
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24329)
    at JitCompiler._parseTemplate (compiler.js:33757)
    at JitCompiler._compileTemplate (compiler.js:33732)
    at compiler.js:33634
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33634)
    at compiler.js:33504
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33503)
    at syntaxError (compiler.js:466)
    at TemplateParser.parse (compiler.js:24329)
    at JitCompiler._parseTemplate (compiler.js:33757)
    at JitCompiler._compileTemplate (compiler.js:33732)
    at compiler.js:33634
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:33634)
    at compiler.js:33504
    at Object.then (compiler.js:455)
    at JitCompiler._compileModuleAndComponents (compiler.js:33503)
    at c (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4620)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at <anonymous>

el código en el page.html es :

<ion-searchbar [(ngModel)]="terms"></ion-searchbar>
  <button ion-button type="button" (click)="sort()">Sort</button>

    <div [ngSwitch]="pet">
      <ion-list *ngSwitchCase="'users'">
        <ion-item *ngFor="let f of users | search : terms | sort: {property: column, order: order}">
          <ion-thumbnail item-start>
            <img [src]="f.image"/>
          </ion-thumbnail>
          <h2>{{f.name}}</h2>
        </ion-item>
       </ion-list>

el código en el page.ts es:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { SearchPipe } from '../../pipes/search/search';
import { SortPipe } from '../../pipes/sort/sort';

@IonicPage()
@Component({
  selector: 'page-search',
  templateUrl: 'search.html',
})
export class SearchPage {


  descending: boolean = false;
  order: number;
  column: string = 'name';
  users : any ;
  places : any ; 

  constructor(public navCtrl: NavController, public navParams: NavParams , public http: HttpClient) {
    //this.initializeItems();
  }

  ngOnInit(){

    this.http.get("http://localhost/Test1/getCity.php?action=getFriends")
    .subscribe( data =>{
     this.users = data['friends']
      console.log(this.users)
    });

    this.http.get("http://localhost/Test1/getCity.php?action=getDetail")
    .subscribe( data =>{
     this.places = data['detail']
      console.log(this.places)
    });



  }

  sort(){
    this.descending = !this.descending;
    this.order = this.descending ? 1 : -1;
  }

}

y en el app.module.ts allí :

import { SearchPipe } from '../pipes/search/search';
import { SortPipe } from '../pipes/sort/sort';

@NgModule({
  declarations: [
    MyApp,
    TulkarmPage,
    CatDetailsPage,
    ModalsPage,
    DetailsPage,
    SearchPipe,
    SortPipe
  ],

y incluiré la codificación de pipes.ts :

primero : searc.ts tubería :

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


@Pipe({
  name: 'search',
})
export class SearchPipe implements PipeTransform {

  transform(items: any[], terms: string): any[] {
    if(!items) return [];
    if(!terms) return items;
    terms = terms.toLowerCase();
    return items.filter( it => {
      return it.name.toLowerCase().includes(terms); // only filter country name
    });
  }
}

segundo : sort.ts código

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


@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {

  transform(array: Array<string>, args?: any): Array<string> {
    return array.sort(function(a, b){
      if(a[args.property] < b[args.property]){
          return -1 * args.order;
      }
      else if( a[args.property] > b[args.property]){
          return 1 * args.order;
      }
      else{
          return 0;
      }
    });
  }
}

**por favor, antes de su juicio sobre la pregunta de que está duplicada, espero que primero lea la pregunta completamente y me dé una respuesta obvia o una solución para este error, sé que puede haber una pregunta similar pero realmente no tengo una solución para mi problema**

Gracias a todos

Respuesta #1

Cuando quieras usar cualquier componente o Pipe en otros módulos que no sean aquel en el que están declarados, deberías exportarlos.

Ahora, en tu caso, no querrás simplemente exportarlos desde el AppModule, ya que no es una buena idea exportar desde el AppModule

Crea un módulo llamado PipesModule en su lugar

import { SearchPipe } from '../pipes/search/search';
import { SortPipe } from '../pipes/sort/sort';
import { CommonModule } from '@angular/common';

@NgModule({
    imports: [CommonModule],
    declarations: [SearchPipe, SortPipe],
    exports: [SearchPipe, SortPipe]
})
export class PipesModule

Importa este módulo en los módulos en los que quieras usar las tuberías,

app.module.ts

import { PipesModule } from '../pipes/pipes.module';

@NgModule({
  imports: [.., PipesModule],
  declarations: [
    MyApp,
    TulkarmPage,
    CatDetailsPage,
    ModalsPage,
    DetailsPage,
  ],
}

Respuesta #2

Tu problema es que los Pipes no se exportan de un módulo a otro, incluso si el móduloB está importado en el móduloA.

Como puedo ver, estás usando un SearchPageModule y aquí ocurrió el error. Tienes que declarar tus Pipes dentro de este módulo en lugar de ponerlos en tu AppModule, para que funcionen.

PD: Es buena práctica crear un PipesModule y declarar + exportar todos tus pipes compartidos allí. Luego, solo tienes que importar este módulo en el módulo correspondiente donde necesites los pipes.