Angular Playground 实战用 Bazel 构建、服务与端到端测试官方示例【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular在 Angular 官方仓库中modules/playground目录承载着一组用于演示框架核心能力的示例应用组件、模板驱动表单、异步、路由式 Todo 等。官方文档modules/playground/README.md给出的核心信息只有一条所有 playground 示例都通过Bazel 构建并服务例如# e.g. src/zippy_component pnpm bazel run modules/playground/src/zippy_component:devserver这篇指南以这一命令为起点完整还原 playground 的工程体系目录与示例清单、devserver目标背后的 Bazel 构建链optimize_angular_app→genrule→http_server、每个示例的源代码组织方式以及e2e_test/下如何用 Selenium WebDriver 对示例做端到端回归验证。读完本文你可以自行构建并运行任意一个 playground 示例理解其构建产物与测试如何联动并能按照同样的模式为新示例编写 BUILD 规则与 e2e 用例。目录结构示例与应用一一对应playground 目录由三部分组成modules/playground/src/每个子目录是一个独立的小型 Angular 应用共 11 个示例animate、async、hello_world、http、jsonp、key_events、sourcemap、svg、template_driven_forms、todo、zippy_componentmodules/playground/e2e_test/与src/下大部分示例一一对应的端到端测试async、hello_world、http、jsonp、key_events、sourcemap、svg、template_driven_forms、zippy_component根级配置modules/playground/BUILD.bazel 定义了两份 e2e 专用的 TypeScript 配置tsconfig_e2e、tsconfig_e2e_legacy_wd2并通过package(default_visibility [//modules/playground:__subpackages__])对 playground 全部子包开放可见性供各示例的 BUILD 规则引用。构建并服务一个示例以 zippy_component 为例运行 devserver按照 README 的说明执行pnpm bazel run modules/playground/src/zippy_component:devserver该命令会先由 Bazel 完成编译、优化再启动一个本地 HTTP 服务把示例应用发布到浏览器。:devserver目标本身定义在 modules/playground/src/zippy_component/BUILD.bazel 中http_server( name devserver, srcs [index.html], deps [ :app_bundle, //modules:node_modules/zone.js, ], )http_server规则从 tools/defaults.bzl 加载该文件第 6 行通过load(devinfra//bazel/http-server:index.bzl, ...)引入负责把index.html与其依赖应用 bundle、zone.js部署到一个可访问的服务器上。构建链从 optimize_angular_app 到 app_bundle同一个 BUILD 文件还揭示了完整的构建链这是理解 playground 的关键optimize_angular_app( name bundles, srcs glob([**/*.ts]) [ app/zippy.html, index.html, ], include_zonejs True, deps [ //modules:node_modules/angular/build, //modules:node_modules/angular/common, //modules:node_modules/angular/core, //modules:node_modules/angular/platform-browser, //modules:node_modules/rxjs, //modules:node_modules/tslib, //modules:node_modules/zone.js, ], ) # The script needs to be called app_bundle for easier syncing into g3. genrule( name app_bundle, srcs [:bundles], outs [app_bundle.js], cmd cp $/main.js $, )几个值得注意的点optimize_angular_app来自rules_angular//src/optimization:index.bzl在仓库中是rules_angularBazel 模块提供它相当于把angular/build的编译/优化流程封装成 Bazel 规则srcs用glob([**/*.ts])收集全部 TypeScript 源文件并显式追加模板app/zippy.html与入口index.htmlinclude_zonejs True表示 bundle 中直接包含 zone.js因此devserver的 deps 中再次列出//modules:node_modules/zone.js以在页面侧可用genrule重命名优化产物默认叫main.jsgenrule 把它复制为app_bundle.js注释说明这样命名是为了方便同步进 g3Google 内部代码库。从源码结构看这意味着 playground 的构建产物与内部工程保持一致的命名约定http_server的 deps 引用的正是这个重命名后的目标。示例源码经典 NgModule 事件输出模式zippy 示例是一个可折叠组件源码很小但能体现 playground 示例的典型写法modules/playground/src/zippy_component/app/zippy.tsZippy组件声明Input() title与Output() open/Output() close两个EventEmittertoggle()方法切换visible状态并按状态发射open或close事件modules/playground/src/zippy_component/app/zippy.html标题行绑定(click)toggle()并根据visible渲染▾/▸箭头内容区用[hidden]!visible控制ng-content承载投影内容modules/playground/src/zippy_component/main.tsZippyApp根组件监听zippy的open/close事件并把事件名 push 进logs数组用*ngFor列出最后以NgModule({declarations: [ZippyApp, Zippy], bootstrap: [ZippyApp], imports: [BrowserModule]})声明模块并调用platformBrowser().bootstrapModule(ExampleModule)完成引导。两个组件都显式标注standalone: false体现了 playground 示例刻意保留经典 NgModule 写法的定位。运行pnpm bazel run modules/playground/src/zippy_component:devserver后页面中点击标题即可看到内容折叠、箭头切换同时下方列表追加 open/close 日志。端到端测试example_test 宏与 WebDriver 用例playground 的每个示例不只是能跑还配有回归测试来保证示例本身不随框架演进而腐坏。example_test封装 ts_project webdriver_teste2e_test/example_test.bzl 定义了一个宏把编译测试代码 启动示例服务器 跑 WebDriver 测试三步打包def example_test( name, srcs, server, data [], deps [], external [], tsconfig //modules/playground:tsconfig_e2e): ts_project( name %s_lib % name, testonly True, srcs srcs, tsconfig tsconfig, deps deps [ //modules:node_modules/types/jasmine, //modules:node_modules/types/selenium-webdriver, //modules:node_modules/selenium-webdriver, //packages/examples/test-utils:test-utils, ], ) webdriver_test( name name, server server, data data, external external, deps [:%s_lib % name], )要点默认tsconfig指向根 BUILD 中定义的//modules/playground:tsconfig_e2e该配置依赖types/jasmine与types/node见 modules/playground/BUILD.bazel另有tsconfig_e2e_legacy_wd2额外引入types/jasminewd2用于兼容旧版 WebDriver 写法测试代码统一依赖selenium-webdriver与//packages/examples/test-utils:test-utils提供的共享工具webdriver_test同样从 tools/defaults.bzl 引入的server参数直接指向示例的:devserver目标——也就是说e2e 测试复用示例自己的 devserver 作为被测服务构建链与本地手动运行完全一致。以 zippy 为例e2e_test/zippy_component/BUILD.bazel 的全部内容就是example_test( name zippy_component, srcs glob([**/*.ts]), server //modules/playground/src/zippy_component:devserver, )用例内容验证 UI 状态与无浏览器报错e2e_test/zippy_component/zippy_spec.ts 展示了典型的测试结构beforeAll中调用共享工具createWebDriver()创建 WebDriver 并拿到baseUrlafterAll退出 driverafterEach调用verifyNoBrowserErrors(driver)——每个用例后检查页面没有未捕获的 JS 错误beforeEach中driver.get(${baseUrl}/)打开被测页面并用waitForAngular(driver)等待框架就绪具体断言包括初始标题文本为▾ Details点击后变为▸ Details内容区初始文本为This is some content.连续两次点击标题可使内容区显示状态切换。这些工具函数createWebDriver、verifyNoBrowserErrors、waitForAngular来自 packages/examples/test-utils/ 包是仓库内所有示例 e2e 测试共用的基础设施。小结modules/playground是 Angular 仓库中示例即产品的工程范式每个示例都是一个最小可运行的 Angular 应用通过optimize_angular_app走与正式发布一致的编译优化链通过http_server一键服务再通过example_test宏接入 Selenium WebDriver 回归测试。如果你要查看某个具体功能动画、表单、SVG、异步等在当前框架上的行为最快的路径就是找到 modules/playground/src/ 下对应目录用pnpm bazel run modules/playground/src/示例:devserver运行起来再用 modules/playground/e2e_test/ 中的用例作为交互行为的文档。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考