Angular2 : le custom pipe n'a pas pu être trouvé

Question

Le tuyau intégré fonctionne, mais tous les tuyaux personnalisés que je veux utiliser ont la même erreur :

le tuyau 'actStatusPipe' est introuvable

[ERROR ->]{{data.actStatus | actStatusPipe}}

J'ai essayé deux méthodes, en le déclarant dans les déclarations de app.module :

app.module.ts :

import {ActStatusPipe} from '../pipe/actPipe'

@NgModule({
    declarations: [
        AppComponent,
        HomePage,
        ActivitiesList,
        ActStatusPipe
    ],
    ...
})

ou utiliser un autre module pour déclarer et exporter tous mes tuyaux : //pipe

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

et l'importer dans app.module.

//pipe
import {MainPipe} from '../pipe/pipe.module'

@NgModule({
    declarations:[...],
    imports:[...,MainPipe],
})

Mais aucun d'entre eux ne fonctionne dans mon application.

Voici mon code du tuyau :

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

@Pipe({
    name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
    transform(status:any):any{
        switch (status) {
            case 1:
                return "UN_PUBLISH";
            case 2:
                return "PUBLISH";
            default:
                return status
        }
    }
}

Je pense que c'est en grande partie la même chose que le document (en fait, j'ai juste copié du document et fait une petite modification).

Et la version de mon angular2 est 2.1.

Beaucoup de solutions qui peuvent être recherchées dans stackOverflow et google sont essayées dans mon application, mais elles ne fonctionnent pas.

Cela m'a beaucoup perturbé, merci pour votre réponse !

Answer 1

Je vois que ça marche pour moi.

ActStatus.pipe.ts Voici d'abord ma pipe

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

@Pipe({
  name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
  transform(status:any):any{
    switch (status) {
      case 1:
        return "UN_PUBLISH";
      case 2:
        return "PUBLISH";
      default:
        return status
    }
  }
}

main-pipe.module.ts dans le module pipe, je dois déclarer mon/ses pipe/s et l'exporter.

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";

import {ActStatusPipe} from "./ActStatusPipe.pipe"; // <---

@NgModule({
  declarations:[ActStatusPipe], // <---
  imports:[CommonModule],
  exports:[ActStatusPipe] // <---
})

export class MainPipe{}

app.module.ts utiliser ce module de tuyauterie dans n'importe quel module.

@NgModule({
  declarations: [...],
  imports: [..., MainPipe], // <---
  providers: [...],
  bootstrap: [AppComponent]
})

vous pouvez utiliser directement le pipe dans ce module. mais si vous pensez que votre pipe est utilisé dans plus d'un composant, je vous suggère de suivre mon approche.

1. créer un tuyau .
2. créer un module séparé et déclarer et exporter un ou plusieurs tuyaux.
3. utilisateur de ce module de tuyauterie.

La façon d'utiliser les tuyaux dépend totalement de la complexité et des exigences de votre projet. Vous pouvez avoir un seul tuyau qui n'est utilisé qu'une seule fois dans tout le projet. Dans ce cas, vous pouvez l'utiliser directement sans créer de module(s) de tuyaux (approche module).

Answer 2

Cela n'a pas fonctionné pour moi. (J'utilise Angular 2.1.2). Je n'ai PAS importé MainPipeModule dans app.module.ts et je l'ai importé dans le module où le composant que j'utilise est également importé.

Il semble que si votre composant est déclaré et importé dans un autre module, vous devez inclure votre PipeModule dans ce module également.

Answer 3

Une réponse vraiment stupide (je vais me voter dans une minute), mais cela a marché pour moi :

Après avoir ajouté votre tuyau, si vous obtenez toujours les erreurs et que vous exécutez votre site Angular en utilisant " ng serve ", l'arrêter... puis le redémarrer.

Pour moi, aucune des autres suggestions n'a fonctionné, mais le simple fait d'arrêter, puis de redémarrer " ng serve "a suffi pour faire disparaître l'erreur.

Étrange.

Answer 4

Je ne conteste pas la réponse acceptée, car elle m'a certainement aidé. Cependant, après l'avoir mise en œuvre, j'ai toujours obtenu la même erreur.

Il s'est avéré que c'était parce que j'appelais les tuyaux de manière incorrecte dans mon composant également :

Mon fichier custom-pipe.ts :

@Pipe({ name: 'doSomething' })
export class doSomethingPipe implements PipeTransform {
    transform(input: string): string {
        // Do something
    }
}

Jusqu'ici, tout va bien, mais dans mon fichier component.html, j'appelais les pipes comme suit :

{{ myData | doSomethingPipe }}

Le message d'erreur "pipe introuvable" s'affiche à nouveau. Cela est dû au fait qu'Angular recherche les tuyaux par le nom défini dans le décorateur Pipe. Ainsi, dans mon exemple, le pipe devrait plutôt être appelé comme ceci :

{{ myData | doSomething }}

Une erreur stupide, mais qui m'a fait perdre beaucoup de temps. J'espère que cela vous aidera !

Answer 5

import {CommonModule} from "@angular/common";

L'ajout de cette déclaration au module pipe a résolu mon problème.