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

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

关注这个答案

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

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

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

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

在这个表格中我有这样的错误

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

使用替代方法

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

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 中，在 declarations 数组上使用 CustomMessagePipe，我有：

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

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

我有这个问题中描述的错误错误

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-ngmodules https://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 中从 declarations 中删除 apps\administrator\src\app\app.module.ts 文件中的 CustomMessagePipe。

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

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

Pipe reuse in multiple modules , NG6007 (is declared by more than one NgModule) or NG6002 (could not be resolved to an NgModule class),

angular

typescript

module

angular-pipe