Angular13运行Karma测试报错MatTimepickerModule缺少@NgModule注解

Angular 13项目执行npm run test-headless运行Karma单元测试时，src/app/req-form-body/req-form-body.component.spec.ts中ReqFormBodyComponent › should create用例失败，抛出如下错误：

Unexpected value 'MatTimepickerModule' imported by the module 'DynamicTestModule'. Please add an @NgModule annotation.

• 错误触发点：spec文件第51行fixture = TestBed.createComponent(ReqFormBodyComponent);语句
• 错误栈指向：Angular核心包NgModule语义校验、TestBed动态测试模块编译逻辑
• 现有TestBed配置：imports已引入mat-timepicker包导出的MatTimepickerModule，同时引入FormsModule、ReactiveFormsModule、MaterialModule、BrowserAnimationsModule，配置了CUSTOM_ELEMENTS_SCHEMA，已声明FormBuilder依赖。

根因分析 #

该报错本质是TestBed编译动态测试模块时，无法识别导入的MatTimepickerModule为合法的、带@NgModule装饰器的Angular模块，常见触发场景共3种：

1. 导入路径错误：直接从mat-timepicker包根路径导入时，拿到的是未经过Angular编译的类型定义或源文件，而非编译完成后携带NgModule元数据的模块类
2. 版本不兼容：当前安装的mat-timepicker版本与Angular 13不匹配，6.x及以上版本的mat-timepicker基于Angular 14+的Ivy编译规则构建，无法在Angular 13的测试环境中被正确识别
3. 包入口配置异常：本地安装的mat-timepicker包package.json中module、es2020等入口字段配置错误，导致模块导出异常

修复方案 #

按优先级依次尝试即可：

1. 修正模块导入路径
   不要从包根路径导入模块，替换为次级入口路径：

   // 错误导入
   import { MatTimepickerModule } from 'mat-timepicker';
   // 修正为第三方mat-timepicker的正确次级入口
   import { MatTimepickerModule } from 'mat-timepicker/timepicker';
   

2. 安装兼容版本
   Angular 13仅兼容mat-timepicker5.x版本，先执行命令查看当前安装版本：

   npm ls mat-timepicker
   

   如果版本高于5.x，卸载后安装兼容版本：

   npm uninstall mat-timepicker
   npm install mat-timepicker@5.2.2 --save
   

   安装完成后删除node_modules/.cache目录，重新执行测试命令即可。
3. Mock第三方模块兜底
   单元测试仅需验证业务组件自身逻辑，不需要真实加载第三方控件模块，可以直接移除imports中的MatTimepickerModule，在declarations中声明mock组件替代即可：

   // TestBed配置中添加mock组件声明
   @Component({
     selector: 'mat-timepicker',
     template: ''
   })
   class MockMatTimepicker {}
   
   TestBed.configureTestingModule({
     declarations: [
       ReqFormBodyComponent,
       MockMatTimepicker
       // 其他组件声明
     ],
     imports: [
       FormsModule,
       ReactiveFormsModule,
       MaterialModule,
       BrowserAnimationsModule
       // 移除MatTimepickerModule
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     providers: [FormBuilder]
   })
   

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