Pipe reuse in multiple modules , NG6007 (is declared by more than one NgModule) or NG6002 (could not-CodePudding

My Pipe located in 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
  }
}

In the main module apps\administrator\src\app\app.module.ts file:

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

Now, I have two modules FormSmsModule and FormSmtpModule

FormSmsModule located in apps\administrator\src\app\modules\messenger\form-sms

FormSmtpModule located in apps\administrator\src\app\modules\messenger\form-smtp

Following this answer https://stackoverflow.com/a/62468805

In the file apps\administrator\src\app\modules\messenger\form-sms\form-sms.module.ts using CustomMessagePipe on imports array, I have:

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

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

In the file apps\administrator\src\app\modules\messenger\form-smtp\ form-smtp.module.ts using CustomMessagePipe on imports array, I have:

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

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

In this form I have this error like 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/ **

Using the alternative method as https://stackoverflow.com/a/40015085

In the file apps\administrator\src\app\modules\messenger\form-sms\form-sms.module.ts using CustomMessagePipe on declarations array, I have:

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

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

In the file apps\administrator\src\app\modules\messenger\form-smtp\form-smtp.module.ts using CustomMessagePipe on declarations array, I have:

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

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

I have the error described in this question error 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/ **

As you can see, The two solutions implies the another problem.

How solve that?

CodePudding user response：

The issue you're currently facing is that you try to declare or import your pipe in several modules which is not wanted by Angular. You need to declare components and pipes only once as the compiler says.

The difficulty right now is that you want to use the pipe in several modules. In this case, you should use a "shared" module. This module contains every component and pipe you want to use across modules.

Your shared module would look something like following:

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

And in your other modules you just add SharedModule to the imports array.

For more details see here.

CodePudding user response：

As @Batajus says. Other related articles https://angular.io/guide/sharing-ngmodules https://www.pluralsight.com/guides/using-shared-modules-in-angular

Create the module, something like:

ng g m shared-messenger

The content of your module

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

In the FormSmtpModule adapt your code

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

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

In the FormSmsModule adapt your code

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

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

In the AppModule remove in the apps\administrator\src\app\app.module.ts file CustomMessagePipe from declarations if don't need.

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