角度 '予期しないパイプをモジュールでインポートしました'エラー

Question

DecimalPipe transform()メソッドを使用するカスタムパイプを作成しました。以下のようなので、私は、機能モジュールの一つの内側にこのパイプを使用していると私は（MyCustomPipeがDecimalPipeを使用しているため）providers: []にそれらのパイプの両方を追加する必要があります。

index.ts：

@NgModule({ 
    imports: [ 
     MaterialModule, 
     SharedModule 
    ], 
    declarations: [ 
     ... 
    ], 
    providers: [ 
     DecimalPipe, 
     MyCustomPipe 
    ... 

を私の目標は、しかし、ですこのようにDecimalPipeをフィーチャモジュールに追加する必要がなく、MyCustomPipeとDecimalPipeの間に依存関係があるため、MyCustomPipeを消費している人は誰でもMyCustomPipeをSharedModuleからインポートすることができます。私はSharedModuleパターンに従うとSharedModuleからエクスポートDecimalPipeを持ってしようとすることによってこれを解決しようとした（私はMyCustomPipeでやったように）、そのような：

shared.module.ts：

...import { DecimalPipe } from '@angular/common'; 

...export * from '../pipes/index'; 

@NgModule({ 
    imports: [ 
     CommonModule, 
     FormsModule, 
     HttpModule, 
     DecimalPipe 
    ], 
    declarations: [ 
     LoginComponent, 
     ErrorComponent, 
     MyCustomPipe, 
    ], 
    exports: [ 
     CommonModule, 
     HttpModule, 
     LoginComponent, 
     ErrorComponent, 
     DecimalPipe, 
     MyCustomPipe 
    ] 
}) 

しかし、私はこれをしようとするとエラー"Error: (SystemJS) Unexpected pipe 'DecimalPipe' imported by the module 'SharedModule'. Please add a @NgModule annotation."を取得します。今、私はDecimalPipeをSharedModuleのdeclarations: []に追加できますが、DecimalPipeがSharedModuleとCommonModuleの両方で宣言されていることを警告するエラーが表示されます。私はこれがドキュメントに記載されているSharedModuleパターンの理解が不足していると思います。私は100％ではありません。たとえこれが正しいアプローチであっても、フィーチャモジュールを持つAngleパイプを組み込んだカスタムパイプを共有しようとしたことはありません。

Answer 1

下declarationsないの下にパイプを追加する必要があります/それを再利用あなたのアプリの他の場所customPipeだけを宣言してください。カスタムパイプの定義では、

import { DecimalPipe } from '@angular/common'; 

のようなちょうどimportDecimalPipeは、それを使用する機能モジュールでちょうど@NgModuleでdeclarationsアレイの一部としてそれらを定義します。このフィーチャモジュールを他のフィーチャモジュールにインポートすると、その新しいフィーチャモジュールで使用されているこの特定のパイプが識別されるはずです。このカスタムパイプは、再利用されている以前のフィーチャモジュールのexports配列宣言の一部です。

@NgModule({ 
    imports: [ 
    CommonModule, 
    ... 
    ], 
    declarations: [ 
    CustomPipe 
    ], 
    exports: [ 
    CustomPipe // <-- do this only if you need this pipe to be available external to this ReusedFeatureModule when this module is 'imported' to other feature modules 
    ] 
}) 
export class ReusedFeatureModule { } 

CustomPipe

import { Pipe, PipeTransform } from '@angular/core'; 
import { DecimalPipe } from '@angular/common'; 

@Pipe({ 
    name: 'customPipe' 
}) 
export class CustomPipe implements PipeTransform { 
... 
private originalDecimalPipe: DecimalPipe; // this variable will have the inbuilt DecimalPipe inside the constructor body 
constructor() { 
    this.originalDecimalPipe = new DecimalPipe('en-US'); // pass the current locale as the argument 
} 
transform(value: any): any { return <transformed-value>;} // implement your transform 
} 

Answer 2

あなたが/インポートは、使用時にそれを使用して、あなたのcustomPipeと一緒に作り付けのDecimalPipeを宣言心配する必要はありませんインポート

@NgModule({ 
    imports: [ 
     CommonModule, 
     FormsModule, 
     HttpModule 
    ], 
    declarations: [ 
     LoginComponent, 
     ErrorComponent, 
     MyCustomPipe, 
     DecimalPipe 
    ], 
    exports: [ 
     CommonModule, 
     HttpModule, 
     LoginComponent, 
     ErrorComponent, 
     DecimalPipe, 
     MyCustomPipe 
    ] 
})