Cypress 仓库中 Angular CLI 21 未配置工程的完整工作流：从 `ng serve` 到 `ng e2e` 实战解析

Cypress 仓库中 Angular CLI 21 未配置工程的完整工作流从ng serve到ng e2e实战解析【免费下载链接】cypressFast, easy and reliable testing for anything that runs in a browser.项目地址: https://gitcode.com/GitHub_Trending/cy/cypressAngular CLI 是创建、开发、构建与测试 Angular 应用的标准命令行工具其生成的每个新工程都会自带一份官方 README按「开发服务器 / 代码脚手架 / 构建 / 单元测试 / 端到端测试 / 附加资源」的脉络交代该工程的全部日常操作命令。本篇技术指南以 Cypress 仓库内system-tests/projects/angular-cli-unconfigured这个真实夹具工程由 Angular CLI 21.2.7 生成为蓝本逐条解读这份 README 中的命令与配置并对照仓库源码angular.json、package.json、应用源码与测试文件还原每条命令背后的构建器、默认配置与产物位置。读完本文你将掌握如何在一个全新的 Angular CLI 工程中启动开发服务器、生成代码、构建产物、用 Vitest 跑单测以及「未配置unconfigured」的工程在端到端测试阶段如何与 Cypress 生态衔接。一、工程概览angular-cli-unconfigured在仓库中的角色该夹具位于 system-tests/projects/angular-cli-unconfigured其 README.md 开头自述This project was generated using Angular CLI version 21.2.7。也就是说它是一份由ng new生成的、未经任何手工改写的标准 Angular 21 工程。目录名中的unconfigured未配置可以从两方面印证整个工程目录下不存在cypress.config.ts、cypress.config.js或cypress/目录属于「Cypress 尚未接入」的原始状态它与system-tests/projects下的angular-21、angular-22、angular-signals、angular-custom-config、angular-custom-root等夹具并列见 system-tests/projects后者会被 system-tests/test/component_testing_spec.ts 中的Angular CLI versions用例与angular 21 custom config、angular signals等用例直接引用——因此从源码结构看angular-cli-unconfigured是 Cypress 系统测试体系中用来代表「刚用 Angular CLI 生成、尚未接入任何 E2E 框架」的基准工程样本用于验证 Cypress 对这类工程的可探测性与接入流程。工程的静态骨架由以下文件构成angular.json —— 工作区/构建器配置package.json —— npm/yarn 脚本与依赖清单src/main.ts —— 应用引导入口src/app/app.ts —— 根组件Angular 17 的 standalone 写法src/app/app.html —— 根组件模板src/app/app.spec.ts —— 单元测试示例src/index.html 与 src/styles.css —— 页面外壳与全局样式。依赖方面package.json显示其运行时依赖为angular/core、angular/common、angular/compiler、angular/forms、angular/platform-browser、angular/router均^21.2.0开发依赖包含angular/cli、angular/build、angular-devkit/build-angular^21.2.7、typescript ~5.9.2、jsdom ^28.0.0与vitest ^4.0.8包管理器固定为yarn1.22.22。下面按 README 的章节顺序展开各条命令。二、启动开发服务器ng serve与构建器angular/build:dev-serverREADME「Development server」一节给出的命令是ng serve并说明服务器启动后浏览器访问http://localhost:4200/任何源文件修改都会触发应用自动重载hot reload。对照 angular.json 第 55–66 行serve目标的架构architect配置为serve: { builder: angular/build:dev-server, configurations: { production: { buildTarget: angular-cli-unconfigured:build:production }, development: { buildTarget: angular-cli-unconfigured:build:development } }, defaultConfiguration: development }几个值得注意的实现细节默认开发配置defaultConfiguration为development即直接运行ng serve时使用开发配置如需模拟生产形态可执行ng serve --configuration production。开发配置的编译差异同文件第 47–52 行optimization: false不做压缩优化、extractLicenses: false、sourceMap: true开启源码映射便于调试。这正是热重载快速生效、报错堆栈可读的原因。两个构建目标serve本身不直接持有编译参数而是通过buildTarget委托给同工程的build:production/build:development目标——这是 Angular 21 基于 application builder 的新式 dev-server 的典型结构。入口为 src/main.ts它调用bootstrapApplication(App, appConfig)以 standalone 方式引导根组件App见 src/app/app.ts该组件以templateUrl引用 src/app/app.html并用signal(angular-cli-unconfigured)声明了页面标题数据。三、代码脚手架ng generate与可用的 schematicsAngular CLI 内置强大的代码生成scaffolding能力README「Code scaffolding」一节给出了两个命令ng generate component component-name用于生成一个新组件以及ng generate --help用于列出全部可用的 schematics如components、directives、pipes等。结合本工程的 angular.json第 12 行schematics: {}表明该工程没有覆盖任何生成器默认值所有ng generate均按 Angular CLI 全局默认规则执行第 14 行prefix: app定义了组件/指令选择器前缀因此生成的选择器形如app-xxx第 7 行newProjectRoot: projects说明若在应用外生成库等项目会落到projects/目录。此外package.json 的脚本区包含ng: ng因此在工程内可直接运行yarn ng generate component ...angular.json 第 4–6 行也把默认包管理器固定为yarn效果与直接调用ng一致。四、生产构建ng build与资源预算budgetsREADME「Building」一节给出的命令ng build它会把工程编译并输出到dist/目录README 特别说明默认的生产构建会对应用做面向性能与速度的优化。这条描述对应的配置在 angular.json 中非常具体第 16–30 行build目标使用angular/build:application构建器入口browser为src/main.tsTS 配置为tsconfig.app.json静态资源来自public/glob: **/*本工程中仅含public/favicon.ico全局样式为src/styles.css第 31–46 行production配置budgets体积预算——initial首包超过500 kB 告警 / 1 MB 报错anyComponentStyle任意组件样式超过4 kB 告警 / 8 kB 报错outputHashing: all——对产物文件名做哈希便于浏览器缓存更新默认配置即production第 53 行defaultConfiguration所以直接执行ng build走的就是上述优化路径。dist/是 Angular CLI 的约定输出目录产物含带哈希的 JS/CSS 与index.html都生成于此。若需带源码映射的开发版中间产物可执行ng build --configuration development对应 package.json 中的watch: ng build --watch --configuration development脚本用于持续监听重建。五、单元测试ng test与 Vitest 运行器README「Running unit tests」一节说明工程的单元测试由Vitest运行器执行命令为ng test工程中的对应证据包括package.json 的 devDependencies 中显式包含vitest: ^4.0.8与jsdom: ^28.0.0jsdom 提供浏览器 DOM 环境脚本区定义了test: ng testangular.json 第 67–69 行的test目标直接指向angular/build:unit-test构建器——这是 Angular 21 中 Vitest 被纳入官方 application builder 生态的体现测试源码见 src/app/app.spec.ts通过TestBed.configureTestingModule注册App组件用例一断言fixture.componentInstance可创建expect(app).toBeTruthy()用例二在whenStable()后断言页面h1文本包含Hello, angular-cli-unconfigured——与 src/app/app.html 中h1Hello, {{ title() }}/h1的模板完全对应验证了 signal 数据能正确渲染到 DOM。配套的 tsconfig.spec.json 为该测试入口提供类型与编译环境。对使用者而言在仓库或本地同名工程中执行yarn test即可跑出上述用例结果。六、端到端测试ng e2e与未配置工程的 Cypress 接入点README「Running end-to-end tests」一节给出了最后一条命令ng e2e并强调了两点事实Angular CLI 默认不捆绑任何 E2E 测试框架需要开发者自行选择适合的方案。这正是「unconfigured」工程的关键分界点。对 E2E 需求而言接入 Cypress 是自然选择而当前仓库恰好提供了完整的接入配套npm/cypress-schematic/README.md 展示了通过 Angular CLI schematic 为工程加入 Cypress 的方式安装后该 schematic 会被注册进 Angular CLI 的default schematic collections此后即可直接执行对应的 CLI 命令而无需带包名前缀实现ng e2e一键驱动 Cypressnpm/angular 等包则为 Angular 组件的mount / 组件级测试提供支撑与 Cypress 的组件测试模式配合在系统测试层system-tests/test/component_testing_spec.ts 中describe(Angular CLI versions)按版本循环指向angular-${version}夹具工程并分别覆盖angular 21 custom config、angular custom root、angular signals等形态——这些用例共同验证 Cypress 在不同 Angular CLI 工程变体含 custom config、custom root、signals 等下的组件测试能力。因此针对angular-cli-unconfigured这类「未配置」工程可预期的落地流程是先用ng serve开发验证用ng generate快速产出页面用ng build出生产包、ng test守住单测最后借助 Cypress 的 schematic/集成能力补齐ng e2e链路把端到端回归纳入同一工作流。README 之所以专门提示「choose one that suits your needs」正是因为在 Angular CLI 生态里 E2E 框架是插拔式的——而 Cypress 即是被本仓库完整实现与验证的选项之一。七、更多学习资源与延伸阅读README 末尾「Additional Resources」指向 Angular CLI 的 Overview 与 Command Reference 页面Angular 官方文档中收录完整的命令参考。若想在本仓库内继续深入建议按以下路径对照研读工程全貌system-tests/projects/angular-cli-unconfigured重点看 angular.json 与 package.json应用源码src/app/app.ts、src/app/app.html 与单元测试 src/app/app.spec.tsCypress 侧接入npm 生态的 cypress-schematic README 以及 angular 集成包如存在系统测试验证矩阵system-tests/test/component_testing_spec.ts 中所有angular前缀用例以及 system-tests/projects 下的angular-21、angular-signals、angular-custom-config等同族夹具便于横向比对「已配置」与「未配置」工程的差异。【免费下载链接】cypressFast, easy and reliable testing for anything that runs in a browser.项目地址: https://gitcode.com/GitHub_Trending/cy/cypress创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考