Angular中如何在多个模块使用指令？解决NG6007报错

错误原因 #

Angular明确规定：组件、指令、管道只能被单个NgModule声明。你将UppercaseInputDirective同时添加到了OrganizationRegisterModule和其他模块的declarations数组中，触发了NG6007编译错误。

错误信息 #

Error: src/app/core/directives/uppercase-input.directive.ts:8:14 - error NG6007: The Directive 'UppercaseInputDirective' is declared by more than one NgModule.
8 export class UppercaseInputDirective {

× Failed to compile.

解决方案 #

方式一：利用现有CoreModule统一管理指令 #

你的项目已经引入CoreModule，可以用它统一声明并导出全局共享的指令：

1. 修改core.module.ts，将指令加入declarations和exports：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UppercaseInputDirective } from './directives/uppercase-input.directive';

@NgModule({
  declarations: [
    UppercaseInputDirective
  ],
  exports: [
    UppercaseInputDirective
  ]
})
export class CoreModule { }

2. 从所有其他模块的declarations中移除该指令
   以OrganizationRegisterModule为例，删除declarations里的UppercaseInputDirective：

@NgModule({
  declarations: [
    OrganizationRegisterComponent,
    AddOrganizationComponent
    // 移除 UppercaseInputDirective
  ],
  imports: [
    // 确保已导入CoreModule（未添加则补充）
    CoreModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    CommonModule,
    OrganizationRegisterRoutingModule,
    MatCardModule,
    MatButtonModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatIconModule,
    MatMenuModule,
    GlobalTableComponent,
    MatTooltipModule
  ]
})
export class OrganizationRegisterModule { }

方式二：创建SharedModule（适用于多共享元素场景） #

如果后续有更多共享指令、管道或组件，可创建SharedModule统一管理：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UppercaseInputDirective } from '../core/directives/uppercase-input.directive';

@NgModule({
  declarations: [
    UppercaseInputDirective
  ],
  exports: [
    UppercaseInputDirective
  ],
  imports: [
    CommonModule
  ]
})
export class SharedModule { }

之后在需要使用指令的模块中导入SharedModule即可。

额外优化 #

你的OrganizationRegisterModule中重复导入了MatDialogModule，建议删除其中一个，减少冗余。

内容的提问来源于stack exchange，提问作者The Losers Club