TechOverflow Logo
TechOverflow

Wie man den Angular-Fehler behebt: NG0908: In this configuration Angular requires Zone.js

English 简体中文 Deutsch

Problem

Wenn Sie zoneless Change Detection mit Angular v17+ verwenden, werden Sie beim Ausführen der Unit-Tests oft auf den folgenden Fehler stoßen (während die Haupt-App ordnungsgemäß funktioniert):

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)

Lösung

Sie müssen jede Testdatei (*.spec.ts) individuell konfigurieren, um zoneless Change Detection zu verwenden, indem Sie provideZonelessChangeDetection() zum providers-Array in der TestBed-Konfiguration hinzufügen.

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

Copilot-Prompt

Ein geeigneter Prompt für GitHub Copilot oder andere Tools ist:

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