升级至Angular 19后测试失败:@flyInOut动画报错排查求助
Angular 19升级后测试套件因动画合成属性错误中断
将项目升级至Angular 19后,测试套件运行失败。项目为大型模块化架构,独立组件本不应影响测试流程,但执行ng test --watch命令时,测试运行至第1096个(共2158个)用例时触发如下错误,导致整个测试套件中断:
Chrome Headless 131.0.0.0 (Windows 10) ERROR An error was thrown in afterAll Error: NG05105: Unexpected synthetic property @flyInOut found. Please make sure that: - Make sure `provideAnimationsAsync()`, `provideAnimations()` or `provideNoopAnimations()` call was added to a list of providers used to bootstrap an application. - There is a corresponding animation configuration named `@flyInOut` defined in the `animations` field of the `@Component` decorator (see https://angular.dev/api/core/Component#animations). error properties: Object({ code: 5105 }) at checkNoSyntheticProp (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:760:15) at NoneEncapsulationDomRenderer.setProperty (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:713:13) at elementPropertyInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13677:18) at Module.ɵɵsyntheticHostProperty (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:28127:9) at hostBindingFn (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-toastr/fesm2022/ngx-toastr.mjs:16:96) at processHostBindingOpCodes (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:13085:17) at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:14932:9) at detectChangesInView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:15098:9) at detectChangesInViewWhileDirty (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:14793:9) at detectChangesInternal (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:14775:9) at detectChangesInViewIfRequired (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:23652:5) at ApplicationRef.synchronizeOnce (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:23483:17) at ApplicationRef.synchronize (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:23450:18) at ApplicationRef._tick (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:23420:18) at apply (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:35125:29) at _ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/fesm2015/zone.js:369:28)
注:仅在一个特定组件中使用@flyInOut动画,且已正确导入相关模块;此前测试运行正常,其他类似警告仅输出日志未引发测试中断。
已执行的排查操作
- 在karma.config中关闭测试随机排序
- 在测试配置中确保导入BrowserAnimationsModule等必要动画模块
求助问题
- 如何定位引发该错误的组件或模块?
- 为何该错误会终止测试而其他类似警告不会?
内容的提问来源于stack exchange,提问作者himtim
相关产品推荐
相关产品推荐

