Angular2: no se pudo encontrar la tubería personalizada

La tubería incorporada funciona, pero todas las tuberías personalizadas que quiero usar tienen el mismo error:

no se pudo encontrar la tubería 'actStatusPipe'

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

Lo he intentado de dos maneras, lo declaro en las declaraciones de app.module:

app.module.ts:

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

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

o use otro módulo para declarar y exportar todas mis tuberías: // tubería

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

e importarlo en app.module.

//pipe
import {MainPipe} from '../pipe/pipe.module'
    
@NgModule({
    declarations:[...],
    imports:[...,MainPipe],
})

Pero ninguno de ellos funciona en mi aplicación.

Aquí está mi código de la tubería:

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

Creo que es casi lo mismo con el documento (de hecho, acabo de copiar del documento e hice una pequeña modificación)

Y la versión de mi angular2 es 2.1.

Muchas de las soluciones que se pueden buscar en stackOverflow y google se prueban en mi aplicación, sin embargo, no funcionan.

Esto me confundió mucho, ¡gracias por tu respuesta!

veo que esto está funcionando para mí.

ActStatus.pipe.ts Primero esta es mi pipa

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 en el módulo de tubería, necesito declarar mi tubería y exportarla.

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 usa este módulo de tubería en cualquier módulo.

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

Puede utilizar directamente la tubería en este módulo. pero si cree que su tubería se usa en más de un componente, le sugiero que siga mi enfoque.

1. crear tubería.
2. cree un módulo separado y declare y exporte una o más tuberías.
3. usuario ese módulo de tubería.

La forma de utilizar la tubería depende totalmente de la complejidad y los requisitos de su proyecto. es posible que tenga solo una tubería que se use solo una vez en todo el proyecto. en ese caso, puede usarlo directamente sin crear un módulo de tubería / s (enfoque de módulo).

Esto no funcionó para mí. (Estoy con Angular 2.1.2). NO tuve que importar MainPipeModule en app.module.ts e importarlo en su lugar en el módulo donde también se importa el componente que estoy usando la tubería.

Parece que si su componente se declara e importa en un módulo diferente, también debe incluir su PipeModule en ese módulo.

No tengo ningún problema con la respuesta aceptada, ya que ciertamente me ayudó. Sin embargo, después de implementarlo, sigo teniendo el mismo error.

Resulta que esto se debió a que también estaba llamando incorrectamente a las tuberías en mi componente:

Mi archivo custom-pipe.ts:

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

Hasta ahora, todo bien, pero en mi archivo component.html estaba llamando a las tuberías de la siguiente manera:

{{ myData | doSomethingPipe }}

Esto arrojará nuevamente el error de que no se encuentra la tubería. Esto se debe a que Angular busca las tuberías por el nombre definido en el decorador de tuberías. Entonces, en mi ejemplo, la tubería debería llamarse así:

{{ myData | doSomething }}

Error tonto, pero me costó bastante tiempo. ¡Espero que esto ayude!

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

Agregar esta declaración al módulo de tubería resolvió mi problema.

Una respuesta realmente tonta (me votaré en contra en un minuto), pero esto funcionó para mí:

Después de agregar su tubería, si aún recibe los errores y está ejecutando su sitio Angular usando " ng serve", deténgalo ... luego inícielo nuevamente.

Para mí, ninguna de las otras sugerencias funcionó, pero simplemente detener y luego reiniciar " ng serve" fue suficiente para que el error desapareciera.

Extraño.

Si está declarando su tubería en otro módulo, asegúrese de agregarlo a esa matriz de declaraciones y exportaciones del módulo, luego importe ese módulo en cualquier módulo que esté consumiendo esa tubería.

asegúrese de que si las declaraciones para la tubería se realizan en un módulo, mientras usa la tubería dentro de otro módulo, debe proporcionar importaciones / declaraciones correctas en el módulo actual bajo el cual se encuentra la clase donde está utilizando la tubería. En mi caso, esa fue la razón por la que se perdió la pipa.

Encontré un problema similar, pero ponerlo en el módulo de mi página no funcionó.

Había creado un componente que necesitaba una tubería. Este componente se declaró y se exportó en un archivo ComponentsModule, que contiene todos los componentes personalizados de la aplicación.

Tuve que poner mi PipesModule en mi ComponentsModule como una importación, para que estos componentes usen estas tuberías y no en el módulo de la página que usa ese componente.

Créditos: ingrese la descripción del enlace aquí Respuesta de: tumain