Angular如何为自定义特性创建测试模块并解决组件重复声明报错？

可行方案整理 #

方案1：避免重复声明组件（最推荐） #

Angular不允许同一个组件/指令/管道被多个NgModule声明，你完全不需要在测试模块里重复写declarations，按如下方式改造测试模块即可：

// drop-zone-testing.module.ts
import { NgModule } from '@angular/core';
import { DropZoneModule } from './drop-zone.module';
// 引入你要替换的mock服务
import { FakeFileUploadService } from './services/fake-file-upload.service';
import { FileUploadService } from './services/file-upload.service';

@NgModule({
  imports: [DropZoneModule], // 直接导入正式模块，自动继承所有declarations、exports配置
  providers: [
    // 仅替换需要mock的依赖
    {
      provide: FileUploadService,
      useClass: FakeFileUploadService
    }
  ]
})
export class DropZoneTestingModule {}

这种方式完全规避了重复声明的问题，同时还能同步正式模块的declarations更新，不需要每次改正式模块还要同步改测试模块。

方案2：修正测试模块排除规则 #

如果确实需要在测试模块单独声明组件，需要确保测试模块完全不被生产构建纳入编译范围：

• 注意修改的是tsconfig.app.json（生产构建专用的TS配置）而非根目录通用tsconfig.json，在其exclude数组中添加规则：

{
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts",
    "**/*testing.module.ts" // 递归匹配所有子目录下的测试模块文件
  ]
}

• 检查所有生产环境代码（组件、服务、正式模块文件），确保没有任何一行导入*testing.module.ts的语句，只要存在导入，就算配置了exclude也会被Angular编译器纳入构建上下文触发报错。

可选的简化方案 #

如果你的mock逻辑不需要跨多个测试用例复用，也可以不用单独编写TestingModule，直接在测试用例的TestBed配置中覆盖依赖即可：

// 组件测试文件示例
TestBed.configureTestingModule({
  imports: [DropZoneModule],
  providers: [
    { provide: FileUploadService, useClass: FakeFileUploadService }
  ]
})

内容的提问来源于stack exchange，提问作者jlang