Angular2 : 사용자 지정 파이프를 찾을 수 없습니다.

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 First this is my 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 in pipe module, i need to declare my pipe/s and export it.

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 user this pipe module in any module.

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

you can directly user pipe in this module. but if you feel that your pipe is used with in more than one component i suggest you to follow my approach.

1. create pipe .
2. create separate module and declare and export one or more pipe.
3. user that pipe module.

How to use pipe totally depends on your project complexity and requirement. you might have just one pipe which used only once in the whole project. in that case you can directly use it without creating a pipe/s module (module approach).

---

This didnt worked for me. (Im with Angular 2.1.2). I had NOT to import MainPipeModule in app.module.ts and importe it instead in the module where the component Im using the pipe is imported too.

Looks like if your component is declared and imported in a different module, you need to include your PipeModule in that module too.

---

If you are declaring your pipe in another module, make sure to add it to that module Declarations and Exports array, then import that module in whatever module is consuming that pipe.

---

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

Adding this statement to the pipe module solved my problem.

---

be sure, that if the declarations for the pipe are done in one module, while you are using the pipe inside another module, you should provide correct imports/declarations at the current module under which is the class where you are using the pipe. In my case that was the reason for the pipe miss

참고URL : https://stackoverflow.com/questions/40457744/angular2-custom-pipe-could-not-be-found