Angular2: no se pudo encontrar la tubería personalizada

79

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!

rui
fuente
¿Podrías reproducirlo en el plunker?
yurzui
mucha confusión en su código también. Primero intente hacerlo simple, cree una tubería personalizada y agregue declaraciones: [AppComponent, CapitalizePipe] matriz de NgModule (). que me digas que está funcionando?
Vinay Pandya
@yurzui lo intentaría después del trabajo
rui
@VinayPandya el mensaje de error está a continuación: Errores de análisis de plantilla: no se pudo encontrar la tubería 'actStatusPipe'
rui
Acabo de copiar tu tubería y funciona para mí
Vinay Pandya

Respuestas:

98

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

Vinay Pandya
fuente
16
Finalmente descubrí que es porque importé la tubería en el módulo raíz y la uso en una importación de componentes por otro módulo. Creo que funcionará globalmente antes y el error es causado por mi tubería. Tu respuesta me inspira a descubrir esto, ¡gracias por tu ayuda!
rui
@rui Tu comentario me salvó el día ... También estaba teniendo el mismo problema ... jajaja
Shashank Gaurav
@rui igual que arriba, tu comentario me salvó
GBarroso
3
@Rui, ¿puedes ser más claro sobre cómo resolviste esto?
Rhyous
1
No es necesario agregar una tubería a su propio módulo, es solo una alternativa. Los documentos oficiales ( angular.io/guide/pipes#custom-pipes ) dicen que las tuberías deben declararse y proporcionarse , por lo que pueden ser inyectables .
ykadaru
21

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.

Ramón González
fuente
4
¿Qué? Eso no tiene sentido. ¿No hay una importación global para algo como esto?
Phil
pero ¿y si necesita importarlo en 2 módulos? Encuentro que eso no funciona. Recibo un error de consola que dice que lo use en un módulo superior en lugar de 2 módulos, pero el módulo de la aplicación no funciona
SeanMC
sí, esa es la forma en que funciona angular, pero si desea usar ese módulo de tubería en su aplicación angular, puede importar en app.module.ts y si desea usar esa tubería en un módulo específico, debe importar el módulo de tubería en ese módulo solamente.
Vinay Pandya
5

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!

Leonardum
fuente
4
import {CommonModule} from "@angular/common";

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

Anitta Paul
fuente
2
"El 90% de los problemas angulares (materiales) se resuelven importando el módulo correcto"
Valen
2
El 90% de los problemas angulares son causados ​​por una mala documentación
Ray Andison
4

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.

Mike Gledhill
fuente
0

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.

Ross
fuente
0

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.

Ilya Yevlampiev
fuente
0

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

SagitSri
fuente