Le tuyau «» n'a pas pu être trouvé tuyau personnalisé angular2

Je n'arrive pas à corriger cette erreur. J'ai une barre de recherche et un ngFor. J'essaie de filtrer le tableau en utilisant un tuyau personnalisé comme celui-ci:

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);
  }
}

Usage:

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

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

Erreur:

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)">

Versions angulaires:

"@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"

Assurez-vous que vous n'êtes pas confronté à un problème de "module croisé"

Si le composant qui utilise le tube n'appartient pas au module qui a déclaré le composant de tube "globalement", le tube n'est pas trouvé et vous obtenez ce message d'erreur.

Dans mon cas, j'ai déclaré le tube dans un module séparé et importé ce module de tube dans n'importe quel autre module ayant des composants utilisant le tube.

J'ai déclaré que le composant dans lequel vous utilisez le tuyau est

le module de canalisation

 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: [],
      };
   }
 } 

Utilisation dans un autre module (par exemple app.module)

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

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

Vous devez inclure votre pipe dans la déclaration du module:

declarations: [ UsersPipe ],
providers: [UsersPipe]

Pour Ionic, vous pouvez faire face à plusieurs problèmes comme @Karl l'a mentionné. La solution qui fonctionne parfaitement pour les pages chargées paresseusement ioniques est:

1. Créez un répertoire pipes avec les fichiers suivants: pipes.ts et pipes.module.ts

// contenu pipes.ts (il peut avoir plusieurs tuyaux à l'intérieur, n'oubliez pas de

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;
  }
}

// contenu de pipes.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. Inclure PipesModule dans la section importations app.module et @NgModule

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

3. Incluez PipesModule dans chacun de vos .module.ts où vous souhaitez utiliser des canaux personnalisés. N'oubliez pas de l'ajouter dans la section importations. // Exemple. fichier: pages / ma-page-personnalisée / ma-page-personnalisée.module.ts

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

4. C'est tout. Vous pouvez maintenant utiliser votre tuyau personnalisé dans votre modèle. Ex.

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

J'ai trouvé la réponse «module croisé» ci-dessus très utile à ma situation, mais je voudrais développer cela, car il y a une autre ride à considérer. Si vous avez un sous-module, il ne peut pas non plus voir les tuyaux dans le module parent dans mes tests. Pour cette raison également, vous devrez peut-être insérer des tuyaux dans leur propre module séparé.

Voici un résumé des étapes que j'ai suivies pour traiter les tuyaux qui ne sont pas visibles dans le sous-module:

1. Retirez les tuyaux de SharedModule (parent) et placez-les dans PipeModule
2. Dans SharedModule, importez PipeModule et exportez (pour les autres parties de l'application dépendant de SharedModule pour accéder automatiquement à PipeModule)
3. Pour Sub-SharedModule, importez PipeModule, afin qu'il puisse accéder à PipeModule, sans avoir à réimporter SharedModule, ce qui créerait un problème de dépendance circulaire, entre autres problèmes.

Une autre note de bas de page à la réponse "cross module" ci-dessus: quand j'ai créé le PipeModule, j'ai supprimé la méthode statique forRoot et importé PipeModule sans cela dans mon module partagé. Ma compréhension de base est que forRoot est utile pour des scénarios tels que les singletons, qui ne s'appliquent pas nécessairement aux filtres.

Suggérer une alternative réponse ici:

Il n'est pas nécessaire de créer un module séparé pour le tuyau , mais c'est certainement une alternative. Consultez la note de bas de page officielle de la documentation: https://angular.io/guide/pipes#custom-pipes

Vous utilisez votre tuyau personnalisé de la même manière que vous utilisez des tuyaux intégrés.
Vous devez inclure votre canal dans le tableau des déclarations de l'AppModule. Si vous choisissez d'injecter votre pipe dans une classe, vous devez le fournir dans le tableau des fournisseurs de votre NgModule.

Tout ce que vous avez à faire est d'ajouter votre tube au tableau des déclarations et le tableau des fournisseurs à l' moduleendroit où vous souhaitez utiliser le tube.

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

Remarque : uniquement si vous n'utilisez pas de modules angulaires

Pour une raison quelconque, ce n'est pas dans la documentation mais j'ai dû importer le tuyau personnalisé dans le composant

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.

J'ai créé un module pour les tubes dans le même répertoire où mes tubes sont présents

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

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

    export class SharedPipeModule { }   

Maintenant, importez ce module dans app.module:

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

Maintenant, il peut être utilisé en important le même dans le module imbriqué