升级Angular 15后动画失效，疑惑关键帧格式变更的影响

问题描述 #

已查阅Angular动画文档及Angular 15的破坏性变更说明，却仍无法理解为何动画停止工作。官方指出，v15中@keyframes名称会添加组件作用域名称前缀（PR #42608），但我的动画代码未使用关键帧，且设置与文档示例一致，想知晓我忽略了该变更的哪一点？

代码示例 #

@Component({
    ...
    animations: [routerAnimation()] // 未使用关键帧
})

<div class="ro-wrapper" [@routerAnimation]="getRouteAnimation(router)">
    <router-outlet #router="outlet"></router-outlet>
</div>

排查方向 #

• 检查routerAnimation()内部实现：哪怕你没直接写@keyframes，如果这个工厂函数内部调用了keyframes()API，或者引用了全局CSS中的@keyframes规则，都会触发Angular 15的作用域前缀逻辑。比如内部用了animate('300ms', keyframes([...]))，生成的关键帧会被加上组件作用域前缀，导致动画找不到正确的关键帧定义。
• 外部动画的作用域适配：如果routerAnimation()是在组件外部（比如共享工具文件）定义的，Angular 15的作用域隔离可能导致组件无法识别动画内的关键帧标识。需要确保外部动画在组件内导入时，关键帧的作用域被正确关联。
• 动画状态匹配验证：确认getRouteAnimation(router)返回的状态值（比如'active'/'inactive'）和routerAnimation()中定义的状态完全一致。Angular 15对状态匹配的严格性有所提升，隐式匹配的场景可能不再生效。
• 动画模块导入检查：确保BrowserAnimationsModule（或NoopAnimationsModule）仅在根模块导入，懒加载模块不要重复导入。重复导入可能导致动画作用域混乱。

内容的提问来源于stack exchange，提问作者Ben Racicot