javascript 角度“由模块导入的意外管道”错误

Angular 'unexpected pipe imported by module' error

提问by MadCatm2

I have created a custom pipe that uses the DecimalPipe transform()method. I am using this pipe inside one of feature modules and I have to add both of those pipes to providers: [](because MyCustomPipe uses DecimalPipe), like so:

我创建了一个使用 DecimalPipetransform()方法的自定义管道。我在功能模块之一中使用此管道，并且必须将这两个管道添加到providers: []（因为 MyCustomPipe 使用 DecimalPipe），如下所示：

index.ts:

索引.ts：

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

My goal however is to not have to add DecimalPipe to a feature module in this way and have that dependence between MyCustomPipe and DecimalPipe 'hidden', so that who ever is consuming MyCustomPipe can just worry about importing MyCustomPipe from SharedModule. I tried to resolve this by trying to follow the SharedModule pattern and have the DecimalPipe exported from SharedModule (as I did with MyCustomPipe), like so:

然而，我的目标是不必以这种方式将 DecimalPipe 添加到功能模块中，并且在 MyCustomPipe 和 DecimalPipe 之间具有“隐藏”的依赖关系，以便使用 MyCustomPipe 的人只需担心从 SharedModule 导入 MyCustomPipe。我试图通过尝试遵循 SharedModule 模式并从 SharedModule 导出 DecimalPipe（就像我对 MyCustomPipe 所做的那样）来解决这个问题，如下所示：

shared.module.ts:

共享.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
    ]
})

However, when I try to do this I get the error "Error: (SystemJS) Unexpected pipe 'DecimalPipe' imported by the module 'SharedModule'. Please add a @NgModule annotation.". Now, I could add DecimalPipe to declarations: []in SharedModule, but then I get the error warning me that DecimalPipe is declared both in SharedModule and CommonModule. I think this stems from my lack of understanding of the SharedModule pattern described in the docs. I am not 100% if this even is the right approach, as I have never tried to share a custom pipe that uses a build-in Angular pipe with feature modules.

但是，当我尝试执行此操作时，出现错误"Error: (SystemJS) Unexpected pipe 'DecimalPipe' imported by the module 'SharedModule'. Please add a @NgModule annotation."。现在，我可以将 DecimalPipe 添加到declarations: []SharedModule 中，但随后我收到错误警告，警告我在 SharedModule 和 CommonModule 中都声明了 DecimalPipe。我认为这源于我对文档中描述的 SharedModule 模式缺乏了解。如果这甚至是正确的方法，我也不是 100%，因为我从未尝试共享使用带有功能模块的内置 Angular 管道的自定义管道。

回答by amal

You don't have to worry about importing/declaring the inbuilt DecimalPipe along with your customPipe that uses it when you use/reuse it elsewhere in your app. Just declare the customPipe only. In your custom pipe's definition, just importthe DecimalPipelike

当您在应用程序的其他地方使用/重用它时，您不必担心导入/声明内置的 DecimalPipe 以及使用它的 customPipe。只需声明 customPipe 即可。在您的自定义管道的定义，只是import在DecimalPipe像

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

Then in the feature module that uses it just define them as part of the declarationsarray in @NgModule. If importing this feature module elsewhere in other feature module is supposed to identify this particular pipe being used in that new feature module, then mention this customPipe also part of the exportsarray declaration of the earlier feature module (that is being reused).

然后使用它只是将它们定义为所述的部分中的特征模块中declarations的阵列@NgModule。如果在其他功能模块的其他地方导入此功能模块应该识别该新功能模块中正在使用的此特定管道，则提及此 customPipe 也是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
}

回答by Sajeetharan

You should add the pipe under declarationsnot under import

您应该在declarationsnot under import下添加管道

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

回答by WasiF

I faced the same issue.

我遇到了同样的问题。

What I was doing wrong?

我做错了什么？

declared pipe-classinstead of pipe-module

声明pipe-class而不是pipe-module

@NgModule({
  declarations: [
    CustomDatePipe, // declaring pipe-class instead of importing pipe module
  ],
  imports: [
  ]
})
export class AppModule { }

How to fix this issue?

如何解决这个问题？

import pipe-modulein AppModulei.e.

进口pipe-module的AppModule即

@NgModule({
  declarations: [
  ],
  imports: [
    CustomDateModule,
  ]
})
export class AppModule { }