多个模块中的管道重用，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

按照这个答案https://stackoverflow.com/a/62468805

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

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.ts 中使用CustomMessagePipe imports 数组，我有：

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

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

在这种形式中，我有类似error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class的错误

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/ **

使用替代方法作为https://stackoverflow.com/a/40015085

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

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 {}

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

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 数组即可。

更多详情请见here。

Answer 2

正如@Batajus 所说。其他相关文章https://angular.io/guide/sharing-ngmoduleshttps://www.pluralsight.com/guides/using-shared-modules-in-angular

创建模块，类似于：

ng g m shared-messenger

模块的内容

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

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

/**
 * Shared Messenger Module
 */
@NgModule({
  declarations: [CustomMessagePipe],
  exports: [CustomMessagePipe],
  imports: [CommonModule],
})
export class SharedMessengerModule { }

在FormSmtpModule 修改你的代码

import { SharedMessengerModule } from '../shared-messenger/shared-messenger.module';

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

在FormSmsModule 修改你的代码

import { SharedMessengerModule } from '../shared-messenger/shared-messenger.module';

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

在AppModule 中删除apps\administrator\src\app\app.module.ts 文件中的CustomMessagePipe 从declarations 如果不需要。

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