angular-tooling

用途

Angular Tooling 用于在 Angular v20+ 项目中高效使用 Angular CLI 与相关开发工具，覆盖项目搭建、代码生成、构建、测试和配置等日常开发任务。资料以命令与配置示例为主，可作为 Angular CLI 常用操作的速查参考。

主要能力

项目搭建

创建新项目（v20+ 默认 standalone）：

ng new my-app
ng new my-app --style=scss --routing --ssr=false
ng new my-app --skip-tests
ng new my-app --minimal --inline-style --inline-template

典型项目结构包含 src/app（组件、配置、路由）、src/index.html、src/main.ts、src/styles.scss、public/ 静态资源，以及 angular.json、package.json、tsconfig.json、tsconfig.app.json 等配置文件。

代码生成

组件：

ng generate component features/user-profile
ng g c features/user-profile
ng g c shared/button --inline-template --inline-style
ng g c features/dashboard --skip-tests
ng g c features/settings --change-detection=OnPush
ng g c shared/icon --flat
ng g c features/checkout --dry-run

服务（默认 providedIn: 'root'）：

ng g service services/auth
ng g s services/user
ng g s services/api --skip-tests

其他 schematic：

ng g directive directives/highlight
ng g d directives/tooltip
ng g pipe pipes/truncate
ng g p pipes/date-format
ng g guard guards/auth
ng g interceptor interceptors/auth
ng g interface models/user
ng g enum models/status
ng g class models/product

支持路径别名生成：

ng g c @features/products/product-list
ng g c @shared/ui/button

开发服务器

ng serve
ng s
ng serve --port 4201
ng serve --open
ng serve --host 0.0.0.0
ng serve --configuration=production
ng serve --ssl --ssl-key ./ssl/key.pem --ssl-cert ./ssl/cert.pem

构建

ng build
ng build --configuration=production
ng build -c production
ng build -c production --source-map=false
ng build -c production --named-chunks

构建输出位于 dist/my-app/，包含 browser/（index.html、带 hash 的 main/polyfills/styles 文件），若启用 SSR 还包含 server/main.js。

测试与 Lint

ng test
ng t
ng test --watch=false --browsers=ChromeHeadless
ng test --code-coverage
ng test --include=**/user.service.spec.ts
ng e2e
ng lint
ng lint --fix

配置

angular.json 关键部分包括 projects.<name>.architect.build（builder、options、configurations），其中 production 配置可设置 budgets（如 initial 的 maximumWarning 500kB、maximumError 1MB）与 outputHashing: "all"，development 配置可设置 optimization: false、extractLicenses: false、sourceMap: true。

环境配置示例：

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com',
};

在 angular.json 中通过 fileReplacements 替换生产环境文件。

添加依赖库

ng add @angular/material
ng add @angular/pwa
ng add @angular/ssr
ng add @angular/localize
npm install @ngrx/signals
ng add @ngrx/store

更新 Angular

ng update
ng update @angular/core @angular/cli
ng update --all
ng update @angular/core @angular/cli --force

性能分析与缓存

ng build -c production --stats-json
npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open

v20+ 默认启用持久化构建缓存，可在 angular.json 的 cli.cache 中配置 enabled、path、environment；清除缓存可执行 rm -rf .angular/cache。

使用方式

按开发阶段查阅对应命令：搭建项目用 ng new，生成代码用 ng generate，本地调试用 ng serve，产出构建用 ng build，质量保障用 ng test 与 ng lint，依赖与版本管理用 ng add 与 ng update。配置类需求参考 angular.json 与环境文件示例。

适用场景

适用于使用 Angular CLI 开发 Angular v20+ 应用的团队与个人，包括新项目初始化、组件/服务等代码生成、构建与测试流程配置、环境变量管理、依赖库集成、版本升级以及构建体积分析等场景。

限制

资料未提供具体版本兼容范围之外的说明、未提供各命令的完整参数列表、未提供收费或授权信息、未提供性能或效果数据。更高级的配置可参考资料中提到的 references/tooling-patterns.md（该文件内容暂未提供）。