Angular 14小版本升级致MAT_DIALOG_DATA注入组件测试失败

1. 修复MAT_DIALOG_DATA的类型导入问题 #

• 所有注入MAT_DIALOG_DATA的组件，必须显式导入对应的类型（如你的NotificationModel），不能依赖类型推断。升级后Angular测试环境的类型检查更严格，未显式导入的类型会被编译优化，导致运行时出现notification_model_1 is not defined错误。
• 示例修正：

  // 错误写法（依赖类型推断）
  constructor(@Inject(MAT_DIALOG_DATA) public data: NotificationModel) {}
  
  // 正确写法（显式导入类型）
  import { NotificationModel } from '../path/to/notification.model';
  constructor(@Inject(MAT_DIALOG_DATA) public data: NotificationModel) {}
  

2. 调整测试环境的TypeScript配置 #

• 检查tsconfig.spec.json的compilerOptions，确保strict、noImplicitAny等规则和升级前一致。Angular 14.2.x对测试环境的类型检查默认规则有微调，未显式声明的类型会触发错误中断测试。
• 临时可开启skipLibCheck排除库类型冲突：

  {
    "compilerOptions": {
      "skipLibCheck": true
    }
  }
  

3. 关闭测试构建的激进优化 #

• 升级后的@angular-devkit/build-angular（14.2.9）可能启用了更严格的摇树优化，导致未被测试显式引用的类型被移除。在angular.json的test配置中禁用相关优化：

  {
    "projects": {
      "your-project": {
        "architect": {
          "test": {
            "options": {
              "optimization": false,
              "buildOptimizer": false
            }
          }
        }
      }
    }
  }
  

4. 规范测试中的依赖注入配置 #

• 测试时为对话框提供MAT_DIALOG_DATA，必须显式匹配类型。升级后Angular Material的对话框注入逻辑对类型校验更严格，数据类型不匹配会导致组件初始化失败，中断后续测试。
• 示例测试配置：

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [YourDialogComponent],
      providers: [
        { provide: MAT_DIALOG_DATA, useValue: {} as NotificationModel } // 显式断言类型
      ]
    }).compileComponents();
  });
  

5. 重新安装依赖排除缓存问题 #

• 尽管TypeScript版本未变，Angular 14.2.x对TS 4.7的兼容性细节有调整，清除依赖缓存后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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