Angular legacy-animations-async 集成测试应用解析：遗留动画 API 与 provideAnimationsAsync 的验证样本

Angular legacy-animations-async 集成测试应用解析遗留动画 API 与 provideAnimationsAsync 的验证样本【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular这篇文章围绕 Angular 仓库中的 legacy-animations-async 集成测试应用展开它是一个由 Angular CLI 生成的最小化 Web 应用用于验证“旧版 trigger 动画 API 异步动画提供者provideAnimationsAsync”这条组合路径在真实构建与运行环境下是否正常工作。读完本文你将了解该应用如何注册路由与懒加载组件、遗留动画 API 的完整用法、angular.json的构建配置要点以及它如何通过 Bazel 的ng_integration_test规则接入 CI 验证流程。应用定位一个为集成测试而生的最小样本该应用位于仓库的integration/legacy-animations-async/目录下与integration/中的其他独立集成项目如animations、legacy-animations、platform-server等并列。它不是用于发布的产品工程而是作为 集成测试套件 的一部分持续验证当前源码树构建出的angular/animations等包在“遗留动画写法 异步动画提供者”场景下的行为是否稳定。应用名在 package.json 中登记为animations-async并通过 pnpm-workspace.yaml 声明自身属于 pnpm workspace 成员依赖管理锁定在pnpm11.24.0见 package.json 中的packageManager字段实际位置为 package.json。README 中的日常命令与工程实际脚本的对照README.md 是一份标准的 Angular CLI 生成文档覆盖了日常开发的五类操作逐条对照仓库实际配置后信息如下README 命令用途仓库中的实际落点ng serve启动开发服务器访问http://localhost:4200/源码变更自动热重载对应 package.json 中start: ng serve底层走 angular.json 里angular-devkit/build-angular:dev-serverbrowserTarget指向animations:buildng generate component component-name脚手架生成组件也支持directive\|pipe\|service\|class\|guard\|interface\|enum\|module常规 CLI 能力未在本应用内定制ng build构建产物输出到dist/package.json 实际定义为build: ng build --configuration production注意 README 中提到的旧式--prod标志在本仓库已替换为--configuration production的等价写法生产配置定义在 angular.json 的configurations.productionng test通过 Karma 执行单元测试对应 package.json 中test: echo No tests specified即该样本当前没有内置单测pretest会先执行ng version记录版本信息ng e2e通过 Protractor 执行端到端测试对应 package.json 中e2e: echo No e2e tests specified本样本未启用 e2e这里有两个值得注意的“文档与仓库差异”README 是 CLI 模板产物描述的是一般的 CLI 用法而本仓库对test/e2e做了占位处理echo空操作。从源码结构看该集成目标的验证重心并不在应用内的单测而在于“依赖链接 构建产物可生成”这条链路本身是否顺畅——这正是由 package.json 中全部指向link:./in-existing-linked-by-bazel的占位依赖所暗示的下一节会展开。另外karma.conf.js 已按 headless 场景配置好ChromeHeadlessNoSandbox启动器含--no-sandbox、--headless、--disable-gpu、--disable-dev-shm-usage等参数文件内注释还指向 integration/README.md 的 browser-tests 章节说明这些参数的用途。虽然当前test脚本是空操作但 angular.json 中仍保留了完整的karma测试目标含zone.js/testingpolyfill、tsconfig.spec.json随时可以补充测试用例。最小样本的核心遗留动画 API 异步动画提供者入口与路由应用入口 src/main.ts 展示了整个样本最关键的两处 API 组合import {bootstrapApplication} from angular/platform-browser; import {provideAnimationsAsync} from angular/platform-browser/animations/async; import {provideRouter} from angular/router; import {AppComponent} from ./app/app.component; bootstrapApplication(AppComponent, { providers: [ provideAnimationsAsync(), provideRouter([ { path: , loadComponent: () import(./app/open-close.component).then((m) m.OpenCloseComponent), }, ]), ], }).catch((err) console.error(err));要点使用bootstrapApplication的 standalone 引导方式main.ts从angular/platform-browser/animations/async子路径导入provideAnimationsAsync()并放入应用级 providersmain.ts。该提供者的“async”命名表明动画引擎的初始化被推迟为异步路径从源码结构看其设计目标是让未真正用到动画的主包不必同步承担动画引擎的初始化成本根路由通过loadComponent动态import()懒加载 OpenCloseComponent动画组件本身也位于懒加载 chunk 中。根组件 app.component.ts 极简standalone 组件app-root模板只有router-outlet /并显式imports: [RouterModule]。遗留 trigger 动画的完整写法验证目标组件 open-close.component.ts 使用了旧版legacy动画 API 的全套核心函数trigger、state、style、transition、animate见 open-close.component.tsanimations: [ trigger(openClose, [ state(open, style({height: 200px, opacity: 1, backgroundColor: yellow})), state(closed, style({height: 100px, opacity: 0.8, backgroundColor: blue})), transition(open closed, [animate(1s)]), transition(closed open, [animate(0.5s)]), ]), ], template: nav button typebutton (click)toggle()Toggle Open/Close/button /nav div [openClose]isOpen ? open : closed classopen-close-container pThe box is now {{ isOpen ? Open : Closed }}!/p /div,参数逐项说明trigger(openClose, [...])声明一个名为openClose的动画触发器可在模板中以[openClose]引用state(open, style({...}))/state(closed, style({...}))定义两个稳态及各自的终态样式。本例中open为高度 200px、不透明、黄色背景closed为高度 100px、80% 不透明、蓝色背景transition(open closed, [animate(1s)])从open切换到closed时执行 1 秒动画transition(closed open, [animate(0.5s)])反向切换则用 0.5 秒——两个方向时长不对称便于肉眼区分切换方向模板中[openClose]isOpen ? open : closed将组件状态isOpen初始true由toggle()翻转映射到动画状态点击按钮即触发对应 transitionopen-close.component.ts。组件还带有一段内联样式.open-close-container的边框、内边距等见 open-close.component.ts保证动画目标元素有确定的可视区域。这个样本的测试意图可以概括为在应用通过provideAnimationsAsync注册动画能力的前提下遗留 trigger 声明的state/transition仍能正确解析与执行从而保障旧版动画写法向新提供者迁移时的兼容性。构建配置angular.json 的关键点angular.json 定义了名为animations的应用几个与验证相关的配置构建器angular-devkit/build-angular:application新 application builder入口src/main.tsaot: true开启 AOT 编译angular.jsonPolyfill仅zone.js与本仓库正在推进的 Zoneless 方向形成对照angular.json输出outputHashing: none、namedChunks: true产物目录dist便于 CI 中稳定定位文件名生产配置configurations.production开启optimization、extractLicenses关闭 sourceMap并设置了双 budget——initial初始包 2MB 警告 / 5MB 报错anyComponentStyle单组件样式 6KB 警告 / 10KB 报错angular.jsonTypeScripttsconfig.app.json 以src/main.ts为唯一入口types: []避免意外拉入全局类型。依赖方面package.json 显示angular/animations、angular/common、angular/compiler、angular/core、angular/platform-browser、angular/router与 devDependencies 中的angular/compiler-cli全部为link:./in-existing-linked-by-bazel占位链接而angular-devkit/build-angular与angular/cli固定为22.2.0-next.5typescript为6.0.3zone.js为0.16.2。这些占位链接正是 Bazel 集成测试的“挂钩点”。Bazel 集成测试链路ng_integration_test 如何接管本应用BUILD.bazel 只有 4 行load(//integration:index.bzl, ng_integration_test) ng_integration_test( name test, )真正的行为全部来自 integration/index.bzl 中的宏定义逐层拆解源码打包ng_integration_test 先创建一个filegroupglob整个目录排除node_modules作为测试源码集默认命令_ng_integration_test 的默认commands为[pnpm install, pnpm run test]即测试过程 依赖安装 执行package.json的test脚本本样本即echo No tests specified包替换机制index.bzl 遍历 packages.bzl 中定义的INTEGRATION_PACKAGES即PUBLISHED_PACKAGES中剔除angular/language-service、zone.js、angular-in-memory-web-api后的全部发布包把每个包对应的 tgz 归档映射进npm_packages。于是 Bazel 在测试沙箱中用当前源码树构建出的包替换package.json里的link:./in-existing-linked-by-bazel占位依赖——这正是前文那些占位依赖存在的意义也是该集成测试能“测试未发布的源码”的核心工具链与隔离tool_mappings将pnpm//:pnpm与nodejs_toolchains//:resolved_toolchain注入为测试环境可用的pnpm/node标签integrationno-sandbox因为测试可能启动宿主机上的 Chrome 等外部进程index.bzltimeout long15 分钟与size enormous大内存配额index.bzl。因此在仓库根目录运行bazel test //integration/legacy-animations-async:test目标名取自 BUILD.bazel即可在 CI 语义下完整跑一遍“当前源码构建 → pnpm 链接替换 → 安装 → 测试脚本”的链路而本地开发则直接使用pnpm installpnpm start的常规 CLI 流程两者互不干扰。小结这个样本的验证矩阵验证维度依据遗留 trigger 动画 APItrigger/state/transition/animate可解析open-close.component.tsprovideAnimationsAsync作为 standalone 应用级 provider 可用main.ts动画组件经路由loadComponent懒加载后动画仍生效main.tsAOT 构建、budgets 约束下产物可生成angular.json源码树构建的包可完整替代 npm 依赖并通过安装/测试脚本BUILD.bazel integration/index.bzl对维护者而言该应用是“旧写法 × 新提供者”兼容性的常驻回归守卫对使用者而言它是阅读angular/animations遗留 API 时一个带完整构建与 CI 配置的活样本。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考