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/cypress
Angular 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，包管理器固定为yarn@1.22.22。下面按 README 的章节顺序展开各条命令。
二、启动开发服务器：ng serve与构建器@angular/build:dev-server
README「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与可用的 schematics
Angular 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与资源预算（budgets）
README「Building」一节给出的命令：
ng build它会把工程编译并输出到dist/目录；README 特别说明：默认的生产构建会对应用做面向性能与速度的优化。
这条描述对应的配置在 angular.json 中非常具体：
- 第 16–30 行：
build目标使用@angular/build:application构建器，入口browser为src/main.ts，TS 配置为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.0"（jsdom 提供浏览器 DOM 环境），脚本区定义了"test": "ng test"； - angular.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 中<h1>Hello, {{ 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一键驱动 Cypress； - npm/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.ts；
- Cypress 侧接入：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），仅供参考
)
