多个模块中的管道重用，NG6007（由多个 NgModule 声明）或 NG6002（无法解析为 NgModule 类），

Question

我的管道位于apps\administrator\src\app\modules\messenger\pipes\custom-message.pipe.ts

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

/**
 * Pipe for Custom Message for boolean
 */
@Pipe({
  name: 'customMessage',
})
export class CustomMessagePipe implements PipeTransform {
  public transform(value: boolean, trueString: string, falseString: string): string {
    //The code
  }
}

在主模块apps\administrator\src\app\app.module.ts文件中：

import { CustomMessagePipe } from './modules/messenger/pipes/custom-message.pipe';
...
@NgModule({
  declarations: [..., CustomMessagePipe],
  providers: [...],
})
export class AppModule {}

现在，我有两个FormSmsModule模块FormSmtpModule

FormSmsModule位于apps\administrator\src\app\modules\messenger\form-sms

FormSmtpModule位于apps\administrator\src\app\modules\messenger\form-smtp

按照这个答案/sf/answers/4372816381/

在数组上使用的文件apps\administrator\src\app\modules\messenger\form-sms\form-sms.module.ts中，我有：CustomMessagePipeimports

import { CustomMessagePipe } from '../pipes/custom-message.pipe';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    CustomMessagePipe,
    FormSmsRoutingModule,
  ],
  providers: [...],
})
export class FormSmsModule {}

在文件apps\administrator\src\app\modules\messenger\form-smtp\ form-smtp.module.tsCustomMessagePipe在imports数组上使用时，我有：

import { CustomMessagePipe } from '../pipes/custom-message.pipe';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    CustomMessagePipe,
    FormSmtpRoutingModule,
  ],
  providers: [...],
})
export class FormSmtpModule {}

在这种形式中，我遇到类似错误NG6002 的错误：出现在 AppModule 的 NgModule.imports 中，但无法解析为 NgModule 类

ERROR in apps/administrator/src/app/modules/messenger/pipes/custom-message.pipe.ts:10:14 - error NG6002: Appears in the NgModule.imports of FormSmsModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

10 export class CustomMessagePipe implements PipeTransform {
                ~~~~~~~~~~~~~~~~~
apps/administrator/src/app/modules/messenger/pipes/custom-message.pipe.ts:10:14 - error NG6002: Appears in the NgModule.imports of FormSmtpModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

10 export class CustomMessagePipe implements PipeTransform {
                ~~~~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **

使用替代方法/sf/answers/2801055981/

在数组上使用的文件apps\administrator\src\app\modules\messenger\form-sms\form-sms.module.ts中，我有：CustomMessagePipedeclarations

import { CustomMessagePipe } from '../pipes/custom-message.pipe';

@NgModule({
  declarations: [..., CustomMessagePipe],
  imports: [
    ...,
    FormSmsRoutingModule,
  ],
  providers: [...],
})
export class FormSmsModule {}

在文件apps\administrator\src\app\modules\messenger\form-smtp\form-smtp.module.ts中使用CustomMessagePipe数组declarations，我有：

import { CustomMessagePipe } from '../pipes/custom-message.pipe';

@NgModule({
  declarations: [..., CustomMessagePipe],
  imports: [
    ...,
    FormSmtpRoutingModule,
  ],
  providers: [...],
})
export class FormSmtpModule {}

我有这个问题中描述的错误 error Angular 2 - Pipe reuse in multiple module - error not found or duplicatedDefinition

ERROR in apps/administrator/src/app/modules/messenger/pipes/custom-message.pipe.ts:10:14 - error NG6007: The Pipe 'CustomMessagePipe' is declared by more than one NgModule.

10 export class CustomMessagePipe implements PipeTransform {
                ~~~~~~~~~~~~~~~~~

  apps/administrator/src/app/modules/messenger/form-sms/form-sms.module.ts:47:84
    47   declarations: [..., CustomMessagePipe],
                             ~~~~~~~~~~~~~~~~~
    'CustomMessagePipe' is listed in the declarations of the NgModule 'FormSmsModule'.
  apps/administrator/src/app/modules/messenger/form-smtp/form-smtp.module.ts:47:85
    47   declarations: [..., CustomMessagePipe],
                             ~~~~~~~~~~~~~~~~~
    'CustomMessagePipe' is listed in the declarations of the NgModule 'FormSmtpModule'.
  apps/administrator/src/app/app.module.ts:36:112
    36   declarations: [..., CustomMessagePipe],   
                             ~~~~~~~~~~~~~~~~~
    'CustomMessagePipe' is listed in the declarations of the NgModule 'AppModule'.

** Angular Live Development Server is listening on localhost:4202, open your browser on http://localhost:4202/ **

正如您所看到的，这两个解决方案隐含着另一个问题。

怎么解决呢？

Answer 1

您当前面临的问题是您尝试在多个模块中声明或导入管道，这是 Angular 不需要的。正如编译器所说，您只需声明一次组件和管道。

现在的困难是您想在多个模块中使用管道。在这种情况下，您应该使用“共享”模块。该模块包含您想要跨模块使用的每个组件和管道。

您的共享模块将如下所示：

import { CustomMessagePipe } from '../pipes/custom-message.pipe';

@NgModule({
  declarations: [..., CustomMessagePipe],
  // exports is required so you can access your component/pipe in other modules
  exports: [..., CustomMessagePipe]
})
export class SharedModule{}

在其他模块中，您只需添加SharedModule到imports数组中即可。

有关更多详细信息，请参阅此处。