尧图网站建设 
Angular Components 官方文档站docs/开发指南本地运行、构建、测试与场景截图工作流【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本指南以仓库docs/目录为核心系统讲解 Angular Material 与 CDK 官方文档站material.angular.dev在本地仓库中的工程组织、文档内容来源、开发服务器、生产构建、单元/端到端测试以及独特的 Scenes 组件场景截图子系统。读完本文你将能够基于 docs/README.md 给出的命令在本地启动并构建这套文档站并理解其背后由 Bazel Angular CLI 驱动的构建、测试与截图流水线。文档站是什么docs/ 目录的定位docs/目录是 Angular ComponentsAngular Material 与 CDK / src/cdk官方文档网站的源代码仓库。该站点用于承载组件文档、指南、示例与 API 文档并对外发布为 material.angular.dev。根据 docs/README.md该站还维护着多个历史版本入口v5、v6、v7、v8、v9、v10、v11以及当前主版本对应 v12 及以后直接指向主站。也就是说同一套工程结构会被复用到不同历史版本的文档站发布中。从工程结构看docs/是一个双应用工程详见 docs/angular.jsonAngular CLI 项目定位说明material-angular-io主文档站应用组件文档、指南、示例、API 浏览包含多套可切换的自定义主题scenes场景截图应用为每个组件渲染统一的展示场景供截图流水线产出缩略图两个应用共用一套 Bazel 宏封装ng_app()定义于 docs/defs.bzl该宏把ng build、ng serve、ng test等 Angular CLI 命令逐一映射为 Bazel target这正是 README 中所有命令都以pnpm bazel run/pnpm bazel test形式给出的原因。文档内容从哪里来内容管线与资源注入README 明确说明了文档站的内容来源指南、示例与文档内容由一个独立的“docs content”仓库维护内容则来源于本仓库的Angular Material 与 CDK 的Guides即仓库根目录的 guides/ 目录如 theming.md、using-component-harnesses.mdMaterial 组件、服务与指令src/material如 button、datepicker、tableCDK 组件、服务与指令src/cdk如 a11y、overlay、drag-drop。在实际构建时这部分内容通过依赖注入与资源拷贝进入应用。查看 docs/BUILD.bazel 中ng_app(name app, ...)的deps可以看到它链接了angular/components-examples本地 workspace 包即 src/components-examples 的产物而 docs/angular.json 的assets配置进一步把node_modules/angular/components-examples/docs-content整体拷贝到输出目录的/docs-content下同时将src/assets映射到/assets、把src/robots.txt与src/sitemap.xml一并发布。主应用入口 docs/src/main.ts 通过bootstrapApplication(MaterialDocsApp, ...)引导应用启用PathLocationStrategy、provideRouter(MATERIAL_DOCS_ROUTES, withInMemoryScrolling(...))路由定义见 docs/src/app/routes.ts并接入AnalyticsErrorReportHandler做错误上报启动时还会调用unregisterServiceWorkers()清理旧版文档站遗留的 Service Worker。本地开发服务器README 给出的开发服务器命令是pnpm bazel run //docs:serve启动后访问http://localhost:4200/。其底层逻辑在 docs/BUILD.bazel 中alias(name serve, actual :build.serve)即serve只是build.serve的别名而build.serve/build等 target 均由ng_app宏docs/defs.bzl依据 docs/angular.json 中material-angular-io项目的architect配置动态生成。开发模式下serve配置会注入一组与线上保持一致的安全响应头见 docs/angular.json 中Content-Security-Policy的注释 “Keep in sync withfirebase.json”用于本地预览时模拟线上 CSP 策略。如果希望绕过 Bazel、直接用 Angular CLI 启动docs/package.json 也提供了等价的 npm scriptspnpm startng serve、pnpm start:jitng serve --aotfalse关闭 AOT 便于调试、pnpm start:prodng serve --configuration production。注意该工程的engines字段要求 Node^20.11.1 || 22.0.0并明确提示应使用 pnpm 而非 npm 安装依赖。生产构建README 给出的构建命令pnpm bazel build //docs:build.productionng_app宏docs/defs.bzl会为每个应用生成两套构建 target默认的build对应ng build与带productionconfiguration 的build.production对应ng build --configuration production并额外创建server这样的http_server测试服务器docs/BUILD.bazel 中servertarget 以:build.production为依赖将_main/docs/dist/browser作为附加根路径。生产构建的关键配置可在 docs/angular.json 中看到budgetsanyComponentStyle警告阈值为 6kb超限即告警optimization: true、outputHashing: all、namedChunks: false生产包做完整压缩与哈希命名fileReplacements将src/environments/environment.ts替换为src/environments/environment.prod.ts样式系统内置 4 套不注入、按需加载的自定义主题magenta-violet、rose-red、azure-blue、cyan-orange源文件位于 docs/src/styles/custom-themes/并启用angular/localize与 zone.js polyfills。此外 docs/BUILD.bazel 还暴露了//docs:build.production产物被同文件中的 Lighthouse 审计 targetaudit与审计工具audit_tool依赖chromium工具链、light-server、lighthouse、puppeteer-core消费用于对构建产物做性能与可访问性审计。运行单元测试README 给出的单元测试命令pnpm bazel test //docs/...该命令通过 Karma 执行material-angular-io应用的全部单元测试。在ng_app宏docs/defs.bzl内部_architect_test会生成testtarget并注入浏览器可执行文件环境变量CHROME_BIN指向 Bazel 工具链提供的 Chromium Headless ShellCHROMEDRIVER_BIN指向对应的 ChromeDriver。测试依赖TEST_DEPS同时注册了 Chromium 与 Firefox 两套浏览器 launcherkarma-chrome-launcher、karma-firefox-launcher以及karma-coverage覆盖率支持。Karma 配置位于 docs/karma.conf.js 与 docs/karma-custom-launchers.js入口测试文件为 docs/src/test.ts测试用 tsconfig 为 docs/tsconfig.spec.json。等价的原生命令是pnpm testng test。运行端到端e2e测试README 给出的 e2e 测试命令pnpm bazel test //docs/e2e:e2e_tests该测试基于Selenium WebDriver对文档站做真实浏览器层面的交互验证。测试配置见 docs/e2e/BUILD.bazelwebdriver_test规则以//docs:server前面提到的http_server作为被测服务器测试用例位于 docs/e2e/src/如 app.e2e-spec.ts、app.po.ts它们依赖src/e2e-app提供的createE2eWebDriver公共测试基建。对应 npm script 为pnpm test:e2e。Scenes 子系统组件场景截图工作流README 用了一半篇幅介绍//docs/scenes这一独立应用它是文档站很具特色的部分为每个 Material 组件生成统一规格的场景截图这些截图正是文档站中组件卡片/列表所用的缩略图资源。Scenes 应用的开发与构建开发服务器pnpm bazel run //docs/scenes:build.serve访问http://localhost:4200/生产构建pnpm bazel build //docs/scenes:build.production单元测试pnpm bazel test //docs/scenes/...同样走 Karma场景截图 e2e 测试pnpm bazel test //docs/scenes/e2e:e2e_tests。对应 npm scripts 为pnpm start:scenesng serve scenes、pnpm build:scenesng build scenes、pnpm test:e2e:scenes。Scenes 应用的 Bazel 定义在 docs/scenes/BUILD.bazel其 Angular CLI 配置在 docs/angular.json 的scenes项目下输出目录为dist/scenes生产构建设置了initial2mb/5mb 与anyComponentStyle6kb/10kb 的预算阈值。截图是如何产生的场景截图的 e2e 测试定义在 docs/scenes/e2e/src/app.e2e-spec.ts。它本质上“不做断言只为给不同页面拍快照”遍历autocomplete、badge、button、datepicker、dialog、menu、select、table、tabs、tree等 36 个组件逐个导航到对应场景页并调用screenshot(comp, wd)截取页面。截图工具类 docs/scenes/e2e/screenshot.ts 的实现揭示了输出规范通过 Selenium 定位app-scene-viewer元素并对其调用takeScreenshot()输出文件命名规则id小写化 → 空格替换为下划线 → 剔除[^/a-z0-9_-]之外的字符 → 追加.scene.png后缀输出目录固定为docs/src/assets/screenshots/即path.join(__dirname, .., .., src, assets, screenshots)写入时对异常做了容错——在只读测试沙箱环境中无法写源码树时静默跳过避免测试失败。运行后产出的正是仓库中已提交的 360×200 组件缩略图例如 button.scene.png、datepicker.scene.png、table.scene.png这些截图统一尺寸、统一背景、聚焦单个组件的主视觉形态为文档站提供了低成本、可批量再生的视觉素材——修改组件视觉后只需重跑pnpm bazel test //docs/scenes/e2e:e2e_tests即可重新生成全部组件缩略图。常见命令速查表目的命令文档站开发服务器pnpm bazel run //docs:serve文档站生产构建pnpm bazel build //docs:build.production文档站单元测试pnpm bazel test //docs/...文档站 e2e 测试pnpm bazel test //docs/e2e:e2e_testsScenes 开发服务器pnpm bazel run //docs/scenes:build.serveScenes 生产构建pnpm bazel build //docs/scenes:build.productionScenes 单元测试pnpm bazel test //docs/scenes/...组件场景截图生成pnpm bazel test //docs/scenes/e2e:e2e_tests小结docs/目录是一个典型的“文档站即工程”实践一方面通过ng_appBazel 宏把 Angular CLI 的构建、测试能力无缝映射进 Bazel 目标图配合http_server、WebDriver 测试规则与 Lighthouse 审计形成完整的开发—构建—测试—审计闭环另一方面通过独立的 Scenes 应用把组件展示与截图生成纳入自动化流水线让文档站的视觉素材可以随组件演进持续再生成。无论你是想为文档站修复导航与布局问题、扩展指南内容还是想复刻一套“组件文档站 场景截图”的工程方案本文梳理的命令与源码路径都能作为直接入口。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Angular Components 官方文档站（docs/）开发指南：本地运行、构建、测试与场景截图工作流
Angular Components 官方文档站docs/开发指南本地运行、构建、测试与场景截图工作流【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components本指南以仓库docs/目录为核心系统讲解 Angular Material 与 CDK 官方文档站material.angular.dev在本地仓库中的工程组织、文档内容来源、开发服务器、生产构建、单元/端到端测试以及独特的 Scenes 组件场景截图子系统。读完本文你将能够基于 docs/README.md 给出的命令在本地启动并构建这套文档站并理解其背后由 Bazel Angular CLI 驱动的构建、测试与截图流水线。文档站是什么docs/ 目录的定位docs/目录是 Angular ComponentsAngular Material 与 CDK / src/cdk官方文档网站的源代码仓库。该站点用于承载组件文档、指南、示例与 API 文档并对外发布为 material.angular.dev。根据 docs/README.md该站还维护着多个历史版本入口v5、v6、v7、v8、v9、v10、v11以及当前主版本对应 v12 及以后直接指向主站。也就是说同一套工程结构会被复用到不同历史版本的文档站发布中。从工程结构看docs/是一个双应用工程详见 docs/angular.jsonAngular CLI 项目定位说明material-angular-io主文档站应用组件文档、指南、示例、API 浏览包含多套可切换的自定义主题scenes场景截图应用为每个组件渲染统一的展示场景供截图流水线产出缩略图两个应用共用一套 Bazel 宏封装ng_app()定义于 docs/defs.bzl该宏把ng build、ng serve、ng test等 Angular CLI 命令逐一映射为 Bazel target这正是 README 中所有命令都以pnpm bazel run/pnpm bazel test形式给出的原因。文档内容从哪里来内容管线与资源注入README 明确说明了文档站的内容来源指南、示例与文档内容由一个独立的“docs content”仓库维护内容则来源于本仓库的Angular Material 与 CDK 的Guides即仓库根目录的 guides/ 目录如 theming.md、using-component-harnesses.mdMaterial 组件、服务与指令src/material如 button、datepicker、tableCDK 组件、服务与指令src/cdk如 a11y、overlay、drag-drop。在实际构建时这部分内容通过依赖注入与资源拷贝进入应用。查看 docs/BUILD.bazel 中ng_app(name app, ...)的deps可以看到它链接了angular/components-examples本地 workspace 包即 src/components-examples 的产物而 docs/angular.json 的assets配置进一步把node_modules/angular/components-examples/docs-content整体拷贝到输出目录的/docs-content下同时将src/assets映射到/assets、把src/robots.txt与src/sitemap.xml一并发布。主应用入口 docs/src/main.ts 通过bootstrapApplication(MaterialDocsApp, ...)引导应用启用PathLocationStrategy、provideRouter(MATERIAL_DOCS_ROUTES, withInMemoryScrolling(...))路由定义见 docs/src/app/routes.ts并接入AnalyticsErrorReportHandler做错误上报启动时还会调用unregisterServiceWorkers()清理旧版文档站遗留的 Service Worker。本地开发服务器README 给出的开发服务器命令是pnpm bazel run //docs:serve启动后访问http://localhost:4200/。其底层逻辑在 docs/BUILD.bazel 中alias(name serve, actual :build.serve)即serve只是build.serve的别名而build.serve/build等 target 均由ng_app宏docs/defs.bzl依据 docs/angular.json 中material-angular-io项目的architect配置动态生成。开发模式下serve配置会注入一组与线上保持一致的安全响应头见 docs/angular.json 中Content-Security-Policy的注释 “Keep in sync withfirebase.json”用于本地预览时模拟线上 CSP 策略。如果希望绕过 Bazel、直接用 Angular CLI 启动docs/package.json 也提供了等价的 npm scriptspnpm startng serve、pnpm start:jitng serve --aotfalse关闭 AOT 便于调试、pnpm start:prodng serve --configuration production。注意该工程的engines字段要求 Node^20.11.1 || 22.0.0并明确提示应使用 pnpm 而非 npm 安装依赖。生产构建README 给出的构建命令pnpm bazel build //docs:build.productionng_app宏docs/defs.bzl会为每个应用生成两套构建 target默认的build对应ng build与带productionconfiguration 的build.production对应ng build --configuration production并额外创建server这样的http_server测试服务器docs/BUILD.bazel 中servertarget 以:build.production为依赖将_main/docs/dist/browser作为附加根路径。生产构建的关键配置可在 docs/angular.json 中看到budgetsanyComponentStyle警告阈值为 6kb超限即告警optimization: true、outputHashing: all、namedChunks: false生产包做完整压缩与哈希命名fileReplacements将src/environments/environment.ts替换为src/environments/environment.prod.ts样式系统内置 4 套不注入、按需加载的自定义主题magenta-violet、rose-red、azure-blue、cyan-orange源文件位于 docs/src/styles/custom-themes/并启用angular/localize与 zone.js polyfills。此外 docs/BUILD.bazel 还暴露了//docs:build.production产物被同文件中的 Lighthouse 审计 targetaudit与审计工具audit_tool依赖chromium工具链、light-server、lighthouse、puppeteer-core消费用于对构建产物做性能与可访问性审计。运行单元测试README 给出的单元测试命令pnpm bazel test //docs/...该命令通过 Karma 执行material-angular-io应用的全部单元测试。在ng_app宏docs/defs.bzl内部_architect_test会生成testtarget并注入浏览器可执行文件环境变量CHROME_BIN指向 Bazel 工具链提供的 Chromium Headless ShellCHROMEDRIVER_BIN指向对应的 ChromeDriver。测试依赖TEST_DEPS同时注册了 Chromium 与 Firefox 两套浏览器 launcherkarma-chrome-launcher、karma-firefox-launcher以及karma-coverage覆盖率支持。Karma 配置位于 docs/karma.conf.js 与 docs/karma-custom-launchers.js入口测试文件为 docs/src/test.ts测试用 tsconfig 为 docs/tsconfig.spec.json。等价的原生命令是pnpm testng test。运行端到端e2e测试README 给出的 e2e 测试命令pnpm bazel test //docs/e2e:e2e_tests该测试基于Selenium WebDriver对文档站做真实浏览器层面的交互验证。测试配置见 docs/e2e/BUILD.bazelwebdriver_test规则以//docs:server前面提到的http_server作为被测服务器测试用例位于 docs/e2e/src/如 app.e2e-spec.ts、app.po.ts它们依赖src/e2e-app提供的createE2eWebDriver公共测试基建。对应 npm script 为pnpm test:e2e。Scenes 子系统组件场景截图工作流README 用了一半篇幅介绍//docs/scenes这一独立应用它是文档站很具特色的部分为每个 Material 组件生成统一规格的场景截图这些截图正是文档站中组件卡片/列表所用的缩略图资源。Scenes 应用的开发与构建开发服务器pnpm bazel run //docs/scenes:build.serve访问http://localhost:4200/生产构建pnpm bazel build //docs/scenes:build.production单元测试pnpm bazel test //docs/scenes/...同样走 Karma场景截图 e2e 测试pnpm bazel test //docs/scenes/e2e:e2e_tests。对应 npm scripts 为pnpm start:scenesng serve scenes、pnpm build:scenesng build scenes、pnpm test:e2e:scenes。Scenes 应用的 Bazel 定义在 docs/scenes/BUILD.bazel其 Angular CLI 配置在 docs/angular.json 的scenes项目下输出目录为dist/scenes生产构建设置了initial2mb/5mb 与anyComponentStyle6kb/10kb 的预算阈值。截图是如何产生的场景截图的 e2e 测试定义在 docs/scenes/e2e/src/app.e2e-spec.ts。它本质上“不做断言只为给不同页面拍快照”遍历autocomplete、badge、button、datepicker、dialog、menu、select、table、tabs、tree等 36 个组件逐个导航到对应场景页并调用screenshot(comp, wd)截取页面。截图工具类 docs/scenes/e2e/screenshot.ts 的实现揭示了输出规范通过 Selenium 定位app-scene-viewer元素并对其调用takeScreenshot()输出文件命名规则id小写化 → 空格替换为下划线 → 剔除[^/a-z0-9_-]之外的字符 → 追加.scene.png后缀输出目录固定为docs/src/assets/screenshots/即path.join(__dirname, .., .., src, assets, screenshots)写入时对异常做了容错——在只读测试沙箱环境中无法写源码树时静默跳过避免测试失败。运行后产出的正是仓库中已提交的 360×200 组件缩略图例如 button.scene.png、datepicker.scene.png、table.scene.png这些截图统一尺寸、统一背景、聚焦单个组件的主视觉形态为文档站提供了低成本、可批量再生的视觉素材——修改组件视觉后只需重跑pnpm bazel test //docs/scenes/e2e:e2e_tests即可重新生成全部组件缩略图。常见命令速查表目的命令文档站开发服务器pnpm bazel run //docs:serve文档站生产构建pnpm bazel build //docs:build.production文档站单元测试pnpm bazel test //docs/...文档站 e2e 测试pnpm bazel test //docs/e2e:e2e_testsScenes 开发服务器pnpm bazel run //docs/scenes:build.serveScenes 生产构建pnpm bazel build //docs/scenes:build.productionScenes 单元测试pnpm bazel test //docs/scenes/...组件场景截图生成pnpm bazel test //docs/scenes/e2e:e2e_tests小结docs/目录是一个典型的“文档站即工程”实践一方面通过ng_appBazel 宏把 Angular CLI 的构建、测试能力无缝映射进 Bazel 目标图配合http_server、WebDriver 测试规则与 Lighthouse 审计形成完整的开发—构建—测试—审计闭环另一方面通过独立的 Scenes 应用把组件展示与截图生成纳入自动化流水线让文档站的视觉素材可以随组件演进持续再生成。无论你是想为文档站修复导航与布局问题、扩展指南内容还是想复刻一套“组件文档站 场景截图”的工程方案本文梳理的命令与源码路径都能作为直接入口。【免费下载链接】componentsComponent infrastructure and Material Design components for Angular项目地址: https://gitcode.com/GitHub_Trending/co/components创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考