Angular2: неможливо знайти власну трубу

Вбудована труба - це робота, але всі власні труби, які я хочу використовувати, мають однакову помилку:

конвеєр 'actStatusPipe' не вдалося знайти

[ПОМИЛКА ->] {{data.actStatus | actStatusPipe}}

Я спробував два способи, оголосити це в деклараціях app.module:

app.module.ts:

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

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

або використовуйте інший модуль для декларування та експорту всіх моїх каналів: // pipe

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

та імпортуйте його в app.module.

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

Але жоден з них не працює в моєму додатку.

Ось мій код труби:

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

Я думаю, це майже те саме з документом (насправді, я щойно скопіював з документа і зробив невелику модифікацію)

І моя версія angular2 - це 2.1.

Багато рішень, які можна шукати в stackOverflow та google, пробуються в моєму додатку, однак вони не працюють.

Це мене дуже спантеличило, дякую за відповідь!

бачите, це працює на мене.

ActStatus.pipe.ts Спочатку це моя труба

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 в модулі pipe, мені потрібно оголосити свою трубу / с та експортувати її.

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 користується цим модулем каналу в будь-якому модулі.

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

Ви можете безпосередньо користуватися конвеєром у цьому модулі. але якщо ви відчуваєте, що ваша труба використовується з кількома компонентами, я пропоную вам дотримуватися мого підходу.

1. створити трубу.
2. створити окремий модуль та оголосити та експортувати один або кілька каналів.
3. користувач модулем труби.

Як використовувати трубу, повністю залежить від складності вашого проекту та вимог. у вас може бути лише одна труба, яка використовувалася лише один раз у всьому проекті. у такому випадку ви можете використовувати його безпосередньо, не створюючи модуля pipe / s (модульний підхід).

Це не спрацювало для мене. (Im з Angular 2.1.2). Мені НЕ довелося імпортувати MainPipeModule в app.module.ts та імпортувати його замість цього в модулі, куди також імпортується компонент Im, який використовує трубу.

Схоже, якщо ваш компонент оголошено та імпортовано в іншому модулі, вам також потрібно включити ваш PipeModule до цього модуля.

Я не сприймаю прийняту відповідь, оскільки це, безсумнівно, мені допомогло. Однак після його реалізації я все одно отримав ту ж помилку.

Виявляється, це було тому, що я також неправильно називав труби в моєму компоненті:

Мій файл custom-pipe.ts:

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

Поки що добре, але у своєму файлі component.html я називав труби так:

{{ myData | doSomethingPipe }}

Це знову призведе до помилки, що трубу не знайдено. Це тому, що Angular шукає труби за назвою, визначеною в декораторі труб. Отже, у моєму прикладі трубу слід натомість називати так:

{{ myData | doSomething }}

Дурна помилка, але це коштувало мені неабиякої кількості часу. Сподіваюся, це допомагає!

Дійсно тупа відповідь (я за хвилину проголосую), але це мені вдалося:

Після додавання конвеєра, якщо ви все ще отримуєте помилки і запускаєте свій сайт Angular, використовуючи "ng serve ", зупиніть його ..., а потім запустіть його знову.

Для мене жодна з інших пропозицій не спрацювала, а просто зупинилася, а потім перезапустила "ng serve " було достатньо, щоб помилка зникла.

Дивно.

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

Додавання цього твердження до модуля pipe вирішило мою проблему.

Якщо ви оголошуєте свою трубу в іншому модулі, не забудьте додати її до цього масиву Декларації та масив експорту, а потім імпортуйте цей модуль у будь-який модуль, який споживає цю трубу.

переконайтеся, що якщо оголошення для конвеєра виконуються в одному модулі, поки ви використовуєте конвеєр всередині іншого модуля, ви повинні надати правильні імпорти / декларації в поточному модулі, під яким знаходиться клас, в якому ви використовуєте конвеєр. У моєму випадку це було причиною пропуску труби

Я зіткнувся з подібною проблемою, але розміщення її в модулі моєї сторінки не спрацювало.

Я створив компонент, який потребував труби. Цей компонент був оголошений та експортований у файл ComponentsModule, який містить усі користувацькі компоненти програми.

Мені довелося розмістити свій PipesModule в моєму ComponentsModule як імпорт, щоб ці компоненти могли використовувати ці канали, а не в модулі сторінки, що використовує цей компонент.

Подяки: введіть тут опис посилання Відповідь: tumain