Angular CLI 工具集完整指南：v20+ 项目创建、代码生成与构建优化

angular-tooling by akappler/angular-skills

1 周安装量

GitHub

安装命令

npx skills add https://github.com/akappler/angular-skills --skill angular-tooling

开发 JavaScript 框架 Angular

🇨🇳中文介绍

Angular 工具集

使用 Angular CLI 和开发工具进行高效的 Angular v20+ 开发。

项目设置

创建新项目

# 创建新的独立项目（v20+ 中的默认方式）
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

项目结构

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── public/                  # 静态资源
├── angular.json             # CLI 配置
├── 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

服务

🇺🇸English

Angular Tooling

Use Angular CLI and development tools for efficient Angular v20+ development.

Project Setup

Create New Project

# Create new standalone project (default in v20+)
ng new my-app

# With specific options
ng new my-app --style=scss --routing --ssr=false

# Skip tests
ng new my-app --skip-tests

# Minimal setup
ng new my-app --minimal --inline-style --inline-template

Project Structure

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.config.ts
│   │   └── app.routes.ts
│   ├── index.html
│   ├── main.ts
│   └── styles.scss
├── public/                  # Static assets
├── angular.json             # CLI configuration
├── package.json
├── tsconfig.json
└── tsconfig.app.json

Code Generation

Components

# Generate component
ng generate component features/user-profile
ng g c features/user-profile  # Short form

# With options
ng g c shared/button --inline-template --inline-style
ng g c features/dashboard --skip-tests
ng g c features/settings --change-detection=OnPush

# Flat (no folder)
ng g c shared/icon --flat

# Dry run (preview)
ng g c features/checkout --dry-run

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

使用路径别名生成

# 在功能文件夹中生成组件
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

# 使用 SSL
ng serve --ssl --ssl-key ./ssl/key.pem --ssl-cert ./ssl/cert.pem

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
│   ├── main-[hash].js
│   ├── polyfills-[hash].js
│   └── styles-[hash].css
└── server/              # 如果启用了 SSR
    └── main.js

# 运行测试
ng test
ng t  # 简写形式

# 单次运行（CI）
ng test --watch=false --browsers=ChromeHeadless

# 带覆盖率
ng test --code-coverage

# 特定文件
ng test --include=**/user.service.spec.ts

# 运行 e2e（如果已配置）
ng e2e

# 运行代码检查器
ng lint

# 修复可自动修复的问题
ng lint --fix

angular.json 关键部分

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["{ \"glob\": \"**/*\", \"input\": \"public\" }"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "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 中配置：

{
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    }
  }
}

# 添加 Angular Material
ng add @angular/material

# 添加 Angular PWA
ng add @angular/pwa

# 添加 Angular SSR
ng add @angular/ssr

# 添加 Angular Localize
ng add @angular/localize

# 安装并配置
npm install @ngrx/signals

# 一些库带有原理图
ng add @ngrx/store

# 检查更新
ng update

# 更新 Angular 核心和 CLI
ng update @angular/core @angular/cli

# 更新所有包
ng update --all

# 强制更新（跳过对等依赖检查）
ng update @angular/core @angular/cli --force

# 构建并生成统计信息
ng build -c production --stats-json

# 分析包（安装 esbuild-visualizer）
npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open

# 启用持久构建缓存（v20+ 默认启用）
# 在 angular.json 中配置：
{
  "cli": {
    "cache": {
      "enabled": true,
      "path": ".angular/cache",
      "environment": "all"
    }
  }
}

# 清除缓存
rm -rf .angular/cache

有关高级配置，请参阅 references/tooling-patterns.md。

# Generate service (providedIn: 'root' by default)
ng g service services/auth
ng g s services/user

# Skip tests
ng g s services/api --skip-tests

# Directive
ng g directive directives/highlight
ng g d directives/tooltip

# Pipe
ng g pipe pipes/truncate
ng g p pipes/date-format

# Guard (functional by default)
ng g guard guards/auth

# Interceptor (functional by default)
ng g interceptor interceptors/auth

# Interface
ng g interface models/user

# Enum
ng g enum models/status

# Class
ng g class models/product

Generate with Path Alias

# Components in feature folders
ng g c @features/products/product-list
ng g c @shared/ui/button

# Start dev server
ng serve
ng s  # Short form

# With options
ng serve --port 4201
ng serve --open  # Open browser
ng serve --host 0.0.0.0  # Expose to network

# Production mode locally
ng serve --configuration=production

# With SSL
ng serve --ssl --ssl-key ./ssl/key.pem --ssl-cert ./ssl/cert.pem

ng build --configuration=production
ng build -c production  # Short form

# With specific options
ng build -c production --source-map=false
ng build -c production --named-chunks

dist/my-app/
├── browser/
│   ├── index.html
│   ├── main-[hash].js
│   ├── polyfills-[hash].js
│   └── styles-[hash].css
└── server/              # If SSR enabled
    └── main.js

# Run tests
ng test
ng t  # Short form

# Single run (CI)
ng test --watch=false --browsers=ChromeHeadless

# With coverage
ng test --code-coverage

# Specific file
ng test --include=**/user.service.spec.ts

# Run e2e (if configured)
ng e2e

# Run linter
ng lint

# Fix auto-fixable issues
ng lint --fix

angular.json Key Sections

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": ["{ \"glob\": \"**/*\", \"input\": \"public\" }"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          }
        }
      }
    }
  }
}

Environment Configuration

// 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',
};

Configure in angular.json:

{
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    }
  }
}

# Add Angular Material
ng add @angular/material

# Add Angular PWA
ng add @angular/pwa

# Add Angular SSR
ng add @angular/ssr

# Add Angular Localize
ng add @angular/localize

Third-Party Libraries

# Install and configure
npm install @ngrx/signals

# Some libraries have schematics
ng add @ngrx/store

# Check for updates
ng update

# Update Angular core and CLI
ng update @angular/core @angular/cli

# Update all packages
ng update --all

# Force update (skip peer dependency checks)
ng update @angular/core @angular/cli --force

Performance Analysis

# Build with stats
ng build -c production --stats-json

# Analyze bundle (install esbuild-visualizer)
npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open

# Enable persistent build cache (default in v20+)
# Configured in angular.json:
{
  "cli": {
    "cache": {
      "enabled": true,
      "path": ".angular/cache",
      "environment": "all"
    }
  }
}

# Clear cache
rm -rf .angular/cache

For advanced configuration, see references/tooling-patterns.md.

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

109,600 周安装

Angular CLI 工具集完整指南：v20+ 项目创建、代码生成与构建优化

🇨🇳中文介绍

Angular 工具集

项目设置

创建新项目

项目结构

代码生成

组件

服务

🇺🇸English

Angular Tooling

Project Setup

Create New Project

Project Structure

Code Generation

Components

相关 Skills

其他原理图

使用路径别名生成

开发服务器

构建

开发构建

生产构建

构建输出

测试

单元测试

E2E 测试

代码检查

配置

angular.json 关键部分

环境配置

添加库

Angular 库

第三方库

更新 Angular

性能分析

缓存

Services

Other Schematics

Generate with Path Alias

Development Server

Building

Development Build

Production Build

Build Output

Testing

Unit Tests

E2E Tests

Linting

Configuration

angular.json Key Sections

Environment Configuration

Adding Libraries

Angular Libraries

Third-Party Libraries

Update Angular

Performance Analysis

Caching

最新 Skills