Angular2: пользовательский канал не может быть найден

Встроенный канал работает, но все пользовательские каналы, которые я хочу использовать, имеют одну и ту же ошибку:

канал actStatusPipe не найден

[ОШИБКА ->] {{data.actStatus | actStatusPipe}}

Я пробовал два способа объявить это в объявлениях app.module:

app.module.ts:

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

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

или используйте другой модуль для объявления и экспорта всех моих pipe: // 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, мне нужно объявить мой pipe / s и экспортировать его.

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 (модульный подход).

У меня это не сработало. (Я использую 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 ищет каналы по имени, заданному в декораторе Pipe. Итак, в моем примере канал должен называться следующим образом:

{{ myData | doSomething }}

Глупая ошибка, но она стоила мне изрядного количества времени. Надеюсь это поможет!

Действительно глупый ответ (я проголосую за себя через минуту), но это сработало для меня:

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

Для меня ни одно из других предложений не сработало, но простой остановки, а затем перезапуска " ng serve" было достаточно, чтобы ошибка исчезла.

Странный.

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

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

Если вы объявляете свой канал в другом модуле, обязательно добавьте его в массив объявлений и экспорта этого модуля, а затем импортируйте этот модуль в любой модуль, который использует этот канал.

убедитесь, что если объявления для канала выполняются в одном модуле, в то время как вы используете канал внутри другого модуля, вы должны предоставить правильные импорты / объявления в текущем модуле, в котором находится класс, в котором вы используете канал. В моем случае это было причиной промаха трубы

Я столкнулся с аналогичной проблемой, но поместить ее в модуль моей страницы не удалось.

Я создал компонент, которому нужна была труба. Этот компонент был объявлен и экспортирован в файл ComponentsModule, который содержит все настраиваемые компоненты приложения.

Мне пришлось поместить свой PipesModule в свой ComponentsModule в качестве импорта, чтобы эти компоненты могли использовать эти каналы, а не в модуле страницы, использующем этот компонент.

Кредиты: введите описание ссылки здесь Ответ от: tumain