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 #codebaseCheck out similar posts by category:
Angular
If this post helped you, please consider buying me a coffee or donating via PayPal to support research & publishing of new posts on TechOverflow