Angular 22+ 教程 04：Angular CLI——工程化的瑞士军刀

如果说 Angular 框架负责”应用怎么跑”，那 CLI 负责”工程怎么转”。创建、生成、开发、构建、测试、集成第三方库、跨版本升级——每一环都有对应的命令与自动化。用熟 CLI，Angular 团队几年来的工程化积累就都是你的生产力。本文基于 v22 CLI。

总览：ng 命令地图

ng new          创建工作区与应用
ng generate     生成代码蓝图（组件/服务/指令……）
ng serve        启动开发服务器
ng build        构建（默认生产配置）
ng test         运行单元测试
ng add          添加第三方库并自动改代码
ng update       升级依赖并执行自动迁移
ng skills       管理可安装的"技能包"
ng version      查看各包版本
ng help         帮助

所有命令都读取工作区的 angular.json（第 5 篇详解），命令行参数可覆盖配置项——这是理解 CLI 的钥匙：配置是基线，参数是覆盖。

ng generate：代码蓝图

ng generate（别名 ng g）按官方蓝图生成符合规范的文件骨架：

蓝图	缩写	生成内容
component	c	组件类 + 模板 + 样式 + spec
service	s	服务类 + spec
directive	d	指令类 + spec
pipe	p	管道类 + spec
guard	g	路由守卫（函数式）
resolver	r	路由解析器
interceptor	i	HTTP 拦截器（函数式）
application	—	在工作区内新增一个应用
library	lib	新建可发布类库

ng g c user-profile
ng g s report
ng g guard auth

v22 生成的服务直接使用 @Service() 装饰器：

import { Service } from '@angular/core';

@Service()
export class ReportService {}

常用定制参数：

ng g c dashboard --skip-tests          # 不生成 spec
ng g c badge -t -s                     # 内联模板与样式（单文件组件）
ng g s api --path=core/api             # 指定目录
ng g c hero --dry-run                  # 只打印将生成的文件，不落盘

蓝图的另一层价值是”永不偏航”：命名、路径、选择器前缀（app-）、spec 组织全部与官方风格一致，团队评审不再为目录结构吵架。

ng serve：开发服务器

ng serve                    # 默认 4200
PORT=4300 ng serve          # 用环境变量改端口
ng serve --host 0.0.0.0     # 局域网可访问，真机调试
ng serve --open             # 启动后自动开浏览器

v22 推荐 PORT 环境变量而不是 --port，便于容器与脚本统一注入。开发服务器基于 Vite，按需转换模块，冷启动与热更新都是毫秒级。

本地 API 代理是日常刚需，在 angular.json 的 serve 目标加：

{
  "serve": {
    "builder": "@angular/build:dev-server",
    "configurations": {
      "development": {
        "buildTarget": "my-app:build:development",
        "proxyConfig": "proxy.conf.json"
      }
    }
  }
}

{
  "/api": {
    "target": "http://localhost:8080",
    "changeOrigin": true
  }
}

ng build：生产构建

ng build                          # 默认 production
ng build --configuration development   # 开发配置（不压缩、带 sourcemap）

v22 构建的几个默认行为值得知道：

AOT 编译 + 代码压缩 + 产物文件名哈希，开箱即得。
chunk 优化默认开启：初始 chunk 与按路由懒加载的 chunk 自动拆分，长缓存友好，不再需要手工配置拆包策略。
超出 budgets 预算直接失败，把”包体积失控”拦截在 CI（第 5 篇讲怎么调）。
产物输出到 dist/<app>/browser/，配合 outputPath 可定制。

ng test：单元测试

v22 的内置测试运行器开箱即用，不再需要自行搭建 Karma/Jest：

ng test                       # watch 模式，改动即重跑
ng test --watch=false         # 单次执行，适合 CI
ng test --quiet               # 精简输出，只显示失败与摘要
ng test --isolate             # 测试文件彼此隔离执行，避免共享状态串扰

--quiet 让本地盯屏更清爽，--isolate 则解决”单独跑通过、全量跑挂掉”的经典问题——多用于大型仓库的 CI。生成的 spec 骨架长这样：

import { TestBed } from '@angular/core/testing';
import { CounterStore } from './counter-store';

describe('CounterStore', () => {
  let store: CounterStore;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    store = TestBed.inject(CounterStore);
  });

  it('increment 应将计数加一', () => {
    store.increment();
    expect(store.count()).toBe(1);
  });
});

信号让服务测试异常直白：调用方法、读信号、断言，没有异步夹具。

ng add：带代码修改的安装

ng add <包名> 不只是 npm install，它会执行库方提供的安装 schematic：改配置、注入 Provider、写示例代码。

ng add @angular/material

执行后 Material 的主题样式、字体、动画 Provider 都已就位。判断一个 Angular 第三方库是否”官方级”，看它有没有提供 ng-add schematic 就是重要信号。

ng update：升级与自动迁移

Angular 每 6 个月发布一个 major，而 ng update 是跨版本升级的核心武器：

ng update @angular/core@22 @angular/cli@22

它会：

升级 package.json 中相关依赖到目标版本；
逐条运行内置迁移脚本（codemods），把废弃 API 自动改写为新写法；
打印无法自动处理的手工清单。

实践建议：一个 major 一个 major 地升，不要跳级；升级前提交干净的工作区，迁移产生的改动单独提交，方便回溯与评审。从 v17 到 v22 的路上，控制流、standalone、Signal API 的迁移几乎全部由 codemods 代劳。

ng skills：可安装的技能包

v22 引入了 ng skills：Angular 团队把”如何写某类代码""如何迁移某种写法”打包成可安装的技能（skills），仓库在 https://github.com/angular/skills：

npx skills add https://github.com/angular/skills

安装后，ng skills 能列出并运行已安装的技能——例如生成符合当前最佳实践的样板、执行针对性的迁移。可以把 skills 理解为”官方专家系统”：把文档里的操作步骤变成可执行命令。

自定义 schematics

当团队有自己的组件模板、目录约定时，自定义 schematic 能把 ng generate 变成内部脚手架。最小组成：

my-schematics/
├── collection.json          # 蓝图清单
└── hello/
    ├── schema.json          # 参数定义（命令行提示由它生成）
    └── index.ts             # 工厂函数

import { Rule, SchematicsException, Tree } from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';

export function hello(options: { name: string }): Rule {
  return (tree: Tree) => {
    if (!options.name) {
      throw new SchematicsException('必须提供 name');
    }
    tree.create(
      `src/app/${strings.dasherize(options.name)}.component.ts`,
      `// 自动生成的组件：${strings.classify(options.name)}Component`
    );
    return tree;
  };
}

在项目中安装后即可 ng generate my-schematics:hello --name=user-card。Rule 返回的是”对文件树的变换”，dry-run、diff 展示等能力全部继承自 CLI。

命令速查表

命令	高频场景
`ng version`	排查环境、贴 issue 模板
`ng g c xxx --skip-tests`	快速建组件
`PORT=4300 ng serve`	多项目并行开发
`ng build --configuration development`	复现开发构建问题
`ng test --watch=false --quiet`	CI 单测
`ng update @angular/core @angular/cli`	每半年一次的大版本升级
`ng add @angular/material`	引入官方组件库
`npx skills add https://github.com/angular/skills`	安装官方技能包

小结

CLI 的一切行为以 angular.json 为基线，命令行参数做覆盖。
ng generate 蓝图保证代码骨架永不偏航，v22 生成的服务直接带 @Service()。
PORT 环境变量改端口；build 默认生产配置与 chunk 优化。
ng test --quiet/--isolate 分别解决输出噪音与测试隔离。
ng add 是”会改代码的安装”，ng update 的自动迁移是 Angular 升级体验的护城河。
自定义 schematics 把团队约定固化为命令，skills 则把官方最佳实践变成可执行资产。

CHARLIE SAYS