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

Posted 2023-02-19

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

【英文标题】：Pipe reuse in multiple modules , NG6007 (is declared by more than one NgModule) or NG6002 (could not be resolved to an NgModule class),

【发布时间】：2021-12-01 08:31:48

【问题描述】：

我的管道位于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://***.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://***.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/ **

如您所见，这两个解决方案意味着另一个问题。

如何解决？

【参考方案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。

【参考方案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