Pipa '' tidak bisa ditemukan pipa custom angular2

Sepertinya saya tidak bisa memperbaiki kesalahan ini. Saya memiliki bilah pencarian dan ngFor. Saya mencoba memfilter array menggunakan pipa khusus seperti ini:

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

import { User } from '../user/user';

@Pipe({
  name: 'usersPipe',
  pure: false
})
export class UsersPipe implements PipeTransform {
  transform(users: User [], searchTerm: string) {
    return users.filter(user => user.name.indexOf(searchTerm) !== -1);
  }
}

Pemakaian:

<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">

<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>

Kesalahan:

zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
    <div  
    [ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">

Versi sudut:

"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"

Pastikan Anda tidak menghadapi masalah "modul silang"

Jika komponen yang menggunakan pipa, bukan milik modul yang telah mendeklarasikan komponen pipa "secara global" maka pipa tidak ditemukan dan Anda mendapatkan pesan kesalahan ini.

Dalam kasus saya, saya telah mendeklarasikan pipa dalam modul terpisah dan mengimpor modul pipa ini ke modul lain yang memiliki komponen menggunakan pipa.

Saya telah menyatakan bahwa komponen yang Anda gunakan adalah pipa

Modul Pipa

 import { NgModule }      from '@angular/core';
 import { myDateFormat }          from '../directives/myDateFormat';

 @NgModule({
     imports:        [],
     declarations:   [myDateFormat],
     exports:        [myDateFormat],
 })

 export class PipeModule {

   static forRoot() {
      return {
          ngModule: PipeModule,
          providers: [],
      };
   }
 } 

Penggunaan di modul lain (mis. App.module)

  // Import APPLICATION MODULES
  ...
  import { PipeModule }    from './tools/PipeModule';

  @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

Anda perlu menyertakan pipa Anda dalam deklarasi modul:

declarations: [ UsersPipe ],
providers: [UsersPipe]

Untuk Ionic, Anda dapat menghadapi banyak masalah seperti yang disebutkan @Karl. Solusi yang bekerja dengan sempurna untuk halaman ionik yang lambat dimuat adalah:

1. Buat direktori pipa dengan file berikut: pipa.ts dan pipa.module.ts

// pipe.ts content (bisa memiliki banyak pipa di dalamnya, ingat saja

use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
  transform(value, args: string[]): any {
    if (!value) return value;
    let keys = [];
    for (let key in value) {
      keys.push({ key: key, value: value[key] });
    }
    return keys;
  }
}

// konten pipa.module.ts

import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";

@NgModule({
  declarations: [toArrayPipe],
  imports: [IonicModule],
  exports: [toArrayPipe]
})
export class PipesModule {}

2. Sertakan PipesModule ke bagian impor app.module dan @NgModule

   import { PipesModule } from "../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] });

3. Sertakan PipesModule di setiap .module.ts tempat Anda ingin menggunakan pipa kustom. Jangan lupa untuk menambahkannya ke bagian impor. // Contoh. file: pages / my-custom-page / my-custom-page.module.ts

   import { PipesModule } from "../../pipes/pipes.module"; @NgModule({ imports: [ PipesModule ] })

4. Itu dia. Sekarang Anda dapat menggunakan pipa kustom Anda di template Anda. Ex.

<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>

Saya menemukan jawaban "modul silang" di atas sangat membantu situasi saya, tetapi saya ingin memperluasnya, karena ada masalah lain yang perlu dipertimbangkan. Jika Anda memiliki submodul, ia juga tidak dapat melihat pipa di modul induk dalam pengujian saya. Untuk alasan itu juga, Anda mungkin perlu memasang pipa ke modul terpisah di sana.

Berikut ringkasan langkah-langkah yang saya lakukan untuk mengatasi pipa yang tidak terlihat di submodule:

1. Keluarkan pipa dari (induk) SharedModule dan masukkan ke PipeModule
2. Di SharedModule, impor PipeModule dan ekspor (untuk bagian lain dari aplikasi yang bergantung pada SharedModule untuk secara otomatis mendapatkan akses ke PipeModule)
3. Untuk Sub-SharedModule, impor PipeModule, sehingga dapat memperoleh akses ke PipeModule, tanpa harus mengimpor ulang SharedModule yang akan membuat masalah dependensi melingkar, di antara masalah lainnya.

Catatan kaki lain untuk jawaban "modul silang" di atas: ketika saya membuat PipeModule saya menghapus metode statis forRoot dan mengimpor PipeModule tanpa itu di modul bersama saya. Pemahaman dasar saya adalah bahwa forRoot berguna untuk skenario seperti lajang, yang tidak berlaku untuk filter.

Menyarankan jawaban alternatif di sini:

Membuat modul terpisah untuk Pipa tidak diperlukan , tetapi jelas merupakan alternatif. Periksa catatan kaki dokumen resmi: https://angular.io/guide/pipes#custom-pipes

Anda menggunakan pipa khusus Anda dengan cara yang sama seperti Anda menggunakan pipa bawaan.
Anda harus memasukkan pipa Anda ke dalam array deklarasi AppModule. Jika Anda memilih untuk menyuntikkan pipa Anda ke dalam kelas, Anda harus menyediakannya dalam larik penyedia NgModule Anda.

Yang harus Anda lakukan adalah menambahkan pipa Anda ke array deklarasi , dan array provider di moduletempat Anda ingin menggunakan Pipe.

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]

Catatan : Hanya jika Anda tidak menggunakan modul sudut

Untuk beberapa alasan ini tidak ada di dokumen tetapi saya harus mengimpor pipa kustom di komponen

import {UsersPipe} from './users-filter.pipe'

@Component({
    ...
    pipes:      [UsersPipe]
})

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

@Pipe({
  name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {

  transform(value: any, args?: any): any {
   var hoursMinutes = value.split(/[.:]/);
  var hours = parseInt(hoursMinutes[0], 10);
  var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
  console.log('hours ', hours);
  console.log('minutes ', minutes/60);
  return (hours + minutes / 60).toFixed(2);
  }
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  order = [
    {
      "order_status": "Still at Shop",
      "order_id": "0:02"
    },
    {
      "order_status": "On the way",
      "order_id": "02:29"
    },
    {
      "order_status": "Delivered",
      "order_id": "16:14"
    },
     {
      "order_status": "Delivered",
      "order_id": "07:30"
    }
  ]
}

Invoke this module in App.Module.ts file.

Saya telah membuat modul untuk pipa di direktori yang sama di mana pipa saya berada

import { NgModule } from '@angular/core';
///import pipe...
import { Base64ToImage, TruncateString} from './'  

   @NgModule({
        imports: [],
        declarations: [Base64ToImage, TruncateString],
        exports: [Base64ToImage, TruncateString]
    })

    export class SharedPipeModule { }   

Sekarang impor modul itu di app.module:

import {SharedPipeModule} from './pipe/shared.pipe.module'
 @NgModule({
     imports: [
    ...
    , PipeModule.forRoot()
    ....
  ],

Sekarang dapat digunakan dengan mengimpor yang sama di modul bersarang