TechOverflow Logo
TechOverflow

Comment corriger l'erreur Angular : NG0908: In this configuration Angular requires Zone.js

English Deutsch 简体中文 Français

Problème

Lorsque vous utilisez la détection de changement zoneless avec Angular v17+, lors de l’exécution des tests unitaires, vous rencontrerez souvent l’erreur suivante (alors que l’application principale fonctionne correctement) :

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)

Solution

Vous devez configurer chaque fichier de test (*.spec.ts) individuellement pour utiliser la détection de changement zoneless en ajoutant provideZonelessChangeDetection() au tableau providers dans la configuration TestBed.

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

Prompt Copilot

Un prompt approprié pour GitHub Copilot ou d’autres outils est :

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