Angular:如何修复 NG0908: In this configuration Angular requires Zone.js 错误

问题

在 Angular v17+ 中使用 zoneless change detection 时,运行单元测试经常会遇到以下错误(主应用正常运行):

fix_angular_zone_tests.ts
Chrome 139.0.0.0 (Linux 0.0.0) App should create the app FAILED
        Error: NG0908: In this configuration Angular requires Zone.js
        error properties: Object({ code: 908 })
            at new _NgZone (node_modules/@angular/core/fesm2022/debug_node.mjs:16466:19)
            at Object.ngZoneFactory [as useFactory] (node_modules/@angular/core/fesm2022/debug_node.mjs:30575:29)
            at Object.factory (node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:2257:38)
            at node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:2154:47
            at runInInjectorProfilerContext (node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:720:9)
            at R3Injector.hydrate (node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:2152:21)
            at R3Injector.get (node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:2007:33)
            at R3Injector.retrieve (node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:1903:25)
            at injectInjectorOnly (node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:1020:39)
            at ɵɵinject (node_modules/@angular/core/fesm2022/root_effect_scheduler.mjs:1032:42)

解决方案

需要**逐个配置每个测试文件(*.spec.ts)**以使用 zoneless change detection,方法是在 TestBed 配置的 providers 数组中添加 provideZonelessChangeDetection()

app.spec.ts
describe('App', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [App],
      // 在此处添加 provideZonelessChangeDetection()!
      providers: [provideZonelessChangeDetection()]
    }).compileComponents();
  });
  // ...

Copilot 提示词

适用于 GitHub Copilot 或其他工具的提示词:

copilot_prompt.txt
Add provideZonelessChangeDetection() to the providers array of "await TestBed.configureTestingModule" in *.spec.ts in #codebase

Check out similar posts by category: Angular