angular-cli

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@angular/cli

Version: Angular 21 (2025) Tags: CLI, Generators, Build, Scaffolding

References: CLI Reference • Generators • Builders

版本： Angular 21 (2025) 标签： CLI, Generators, Build, Scaffolding

参考链接： CLI 参考文档 • 生成器 • 构建器

API Changes

API 变更

This section documents recent version-specific API changes.

NEW: Control flow migration —
```
ng g @angular/core:control-flow
```
for @if/@for migration source
NEW: Signal input migration —
```
ng g @angular/core:signal-input-migration
```
for signal inputs source
NEW: Route lazy loading migration —
```
ng g @angular/core:route-lazy-loading
```
for standalone routes
NEW: Named workspaces — Multiple applications in single angular.json
NEW: esbuild by default — Faster builds with esbuild/Vite

本部分记录了最新版本对应的API变动内容。

新增：控制流迁移 — 执行
```
ng g @angular/core:control-flow
```
可完成@if/@for语法迁移来源
新增：信号输入迁移 — 执行
```
ng g @angular/core:signal-input-migration
```
可迁移到信号输入来源
新增：路由懒加载迁移 — 执行
```
ng g @angular/core:route-lazy-loading
```
可完成独立路由迁移
新增：命名工作区 — 支持在单个angular.json文件中管理多个应用
新增：默认启用esbuild — 基于esbuild/Vite实现更快的构建速度

Best Practices

最佳实践

Use generators for scaffolding

bash

undefined

使用生成器搭建代码骨架

bash

undefined

Generate component

生成组件

ng g c components/my-component

Generate service

生成服务

ng g s services/my-service

Generate guard

生成路由守卫

ng g g guards/auth

Generate interceptor

生成拦截器

ng g interceptor timing

Generate library

生成库

ng g library my-lib

Generate with standalone

生成独立组件

ng g c my-component --standalone


- Use schematics for migrations

```bash

ng g c my-component --standalone


- 使用schematics执行迁移

```bash

Migrate to control flow

迁移到控制流语法

ng g @angular/core:control-flow

Migrate to signal inputs

迁移到信号输入

ng g @angular/core:signal-input-migration

Migrate to lazy loading routes

迁移到路由懒加载

ng g @angular/core:route-lazy-loading


- Use ng add for packages

```bash

ng g @angular/core:route-lazy-loading


- 使用ng add安装依赖包

```bash

Add Angular Material

安装Angular Material

ng add @angular/material

Add SSR

添加SSR支持

ng add @angular/ssr

Add PWA

添加PWA支持

ng add @angular/pwa


- Configure workspace defaults

```json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": true
        }
      }
    }
  }
}

Use ng run for builders

bash

undefined

ng add @angular/pwa


- 配置工作区默认设置

```json
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "standalone": true
        }
      }
    }
  }
}

使用ng run执行构建器

bash

undefined

Run custom builder

运行自定义构建器

ng run my-app:build

Run SSR

运行SSR服务

ng run my-app:serve-ssr

Run prerender

执行预渲染

ng run my-app:prerender


- Use ng config for settings

```bash

ng run my-app:prerender


- 使用ng config修改设置

```bash

Set default style

设置默认样式格式

ng config defaults.style=scss

Enable analytics

启用统计分析

ng analytics enable


- Use ng update for migrations

```bash

ng analytics enable


- 使用ng update执行版本迁移

```bash

Update packages

更新所有依赖包

ng update

Update specific package

更新指定依赖包

ng update @angular/core


- Use ng build with options

```bash

ng update @angular/core


- 搭配参数使用ng build

```bash

Production build

生产环境构建

ng build --configuration=production

Dev build with stats

生成构建统计文件的开发环境构建

ng build --stats-json


- Use standalone by default

```bash

ng build --stats-json


- 默认使用独立组件模式

```bash

New project with standalone

创建默认启用独立组件的新项目

ng new my-app --standalone


- Use functional over class-based

```bash

ng new my-app --standalone


- 优先使用函数式而非类式实现

```bash

Generate functional guard

生成函数式路由守卫

ng g g guards/auth --functional

Generate functional interceptor

生成函数式拦截器

ng g interceptor my-interceptor --functional

undefined

ng g interceptor my-interceptor --functional

undefined