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

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

기본 제공 파이프는 작업이지만 사용하려는 모든 사용자 지정 파이프는 동일한 오류입니다.

'actStatusPipe' 파이프를 찾을 수 없습니다.

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

나는 두 가지 방법을 시도해 보았는데, app.module의 선언에 그것을 선언합니다.

app.vmdk.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.vmdk에서 가져옵니다.

//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와 구글에서 검색할 수 있는 많은 솔루션이 내 앱에서 시도되지만 작동하지 않습니다.

이것은 저를 매우 혼란스럽게 했습니다, 답변해 주셔서 감사합니다!

이것이 나에게 효과가 있다는 것을 보세요.

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.s.pipe.s.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.vmdk.ts는 모든 모듈에서 이 파이프 모듈을 사용합니다.

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

당신은 이 모듈에서 파이프를 직접 사용할 수 있습니다. 하지만 당신의 파이프가 두 개 이상의 구성 요소 내에서 사용되고 있다고 느끼면 저는 당신이 제 접근법을 따를 것을 제안합니다.

1. 파이프를 만들다
2. 별도의 모듈을 만들고 하나 이상의 파이프를 선언하고 내보냅니다.
3. 사용자가 해당 파이프 모듈을 사용합니다.

파이프를 사용하는 방법은 프로젝트의 복잡성과 요구 사항에 따라 완전히 달라집니다.전체 프로젝트에서 단 한 번만 사용한 파이프가 있을 수 있습니다.이 경우 파이프/s 모듈을 작성하지 않고 직접 사용할 수 있습니다.

이것은 저에게 효과가 없었습니다. (Angular 2.1.2를 사용하는 I'm.나는 app.module.ts에서 MainPipeModule을 가져오지 않고 대신 파이프를 사용하는 구성 요소 Im도 가져오는 모듈에서 MainPipeModule을 가져올 필요가 없었습니다.

구성 요소가 선언되어 다른 모듈로 가져온 경우 해당 모듈에도 파이프 모듈을 포함해야 합니다.

정말 바보 같은 대답(나는 잠시 후에 나 자신을 부결시키겠다)이지만, 이것은 나에게 효과가 있었습니다.

"" "Angular" "Angular"ng serve그만해요...그리고 다시 시작합니다.

제안들 중 어느 효과가 없었고,하고, "저는다어제떤없만지었효, 고습니다시했작다시중단하단순른히가과안도ing."▁for.ng serve오류를 제거하기에 충분했습니다.

이상해요.

저는 수락된 답변이 저에게 확실히 도움이 되었기 때문에 문제 삼지 않습니다.하지만, 그것을 구현한 후에도 여전히 같은 오류가 발생했습니다.

이는 구성 요소의 파이프도 잘못 불렀기 때문인 것으로 드러났습니다.

내 custom-pipe.ts 파일:

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

지금까지는 괜찮았지만 component.html 파일에서 다음과 같이 파이프를 부르고 있었습니다.

{{ myData | doSomethingPipe }}

이렇게 하면 파이프를 찾을 수 없다는 오류가 다시 발생합니다.이는 Angular가 파이프 장식가에 정의된 이름으로 파이프를 검색하기 때문입니다.따라서 제 예에서는 파이프를 대신 다음과 같이 불러야 합니다.

{{ myData | doSomething }}

바보 같은 실수입니다만, 꽤 많은 시간이 걸렸습니다.이것이 도움이 되길 바랍니다!

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

파이프 모듈에 이 문장을 추가하여 문제를 해결했습니다.

또한 파이프 이름(데코레이터 내부)이 V̲i̲i̲b̲l̲y camelCased인지 확인합니다.

이것은 작동하지 않습니다.@Pipe({ name: 'plural' })❌,
하지만 이것은 다음과 같습니다.@Pipe({ name: 'pluralForm' })✅

다른 모듈 내부에서 파이프를 사용하는 동안 한 모듈에서 파이프에 대한 선언이 수행된 경우 파이프를 사용하는 클래스인 현재 모듈에서 올바른 가져오기/확인을 제공해야 합니다.내 경우에는 그것이 파이프 미스의 이유였습니다.

다른 모듈에서 파이프를 선언하는 경우 해당 모듈 선언 및 내보내기 배열에 파이프를 추가한 다음 해당 모듈을 해당 파이프를 사용하는 모듈로 가져옵니다.

비슷한 문제가 발생했지만, 페이지 모듈에 넣지 못했습니다.

저는 파이프가 필요한 부품을 만들었습니다.이 구성 요소는 선언되어 앱의 모든 사용자 지정 구성 요소를 포함하는 구성 요소 모듈 파일로 내보냈습니다.

이러한 구성 요소가 해당 구성 요소를 사용하는 페이지의 모듈이 아닌 이러한 파이프를 사용하기 위해 파이프 모듈을 내 구성 요소 모듈에 가져와야 했습니다.

크레딧: 여기에 링크 설명을 입력합니다. 답변 기준: tumain

저도 비슷한 문제에 직면했습니다.내 것은 다음과 같이 해결되었습니다:-

1. 파이프의 모듈(공유 모듈)을 필요한 모듈로 가져오는 중입니다.
2. 공급자 배열에 사용자 지정 파이프를 추가합니다.@NgModule({ imports: [ SharedModule ], providers: [CustomPipe] )}

파이프를 사용하는 동안 '선택기'를 사용하고 있는지 확인하십시오.예:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'removeApos'
})
export class RemoveAposPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

당신은 이것을 사용해야 합니다.

<div>{{someval | removeApos}}</div>

위 eg의 선택기와 div에서의 사용에 주목하십시오.

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