Angular Tooling

Angular 工具使用

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

在Angular v20+开发中高效使用Angular CLI及开发工具。

Project Setup

项目搭建

Create New Project

创建新项目

bash

undefined

bash

undefined

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

undefined

ng new my-app --minimal --inline-style --inline-template

undefined

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

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

组件

bash

undefined

bash

undefined

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

undefined

ng g c features/checkout --dry-run

undefined

Services

服务

bash

undefined

bash

undefined

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

undefined

ng g s services/api --skip-tests

undefined

Other Schematics

其他原理图

bash

undefined

bash

undefined

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

undefined

ng g class models/product

undefined

Generate with Path Alias

使用路径别名生成

bash

undefined

bash

undefined

Components in feature folders

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

undefined

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

undefined

Development Server

开发服务器

bash

undefined

bash

undefined

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

undefined

ng serve --ssl --ssl-key ./ssl/key.pem --ssl-cert ./ssl/cert.pem

undefined

Building

构建

Development Build

开发环境构建

bash

ng build

bash

ng build

Production Build

生产环境构建

bash

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

bash

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

undefined

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

undefined

Build Output

构建输出

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

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

Testing

测试

Unit Tests

单元测试

bash

undefined

bash

undefined

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

undefined

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

undefined

E2E Tests

E2E 测试

bash

undefined

bash

undefined

Run e2e (if configured)

ng e2e

undefined

ng e2e

undefined

Linting

代码检查

bash

undefined

bash

undefined

Run linter

ng lint

Fix auto-fixable issues

ng lint --fix

undefined

ng lint --fix

undefined

Configuration

配置

angular.json Key Sections

angular.json 核心配置段

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
            }
          }
        }
      }
    }
  }
}

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
            }
          }
        }
      }
    }
  }
}

Environment Configuration

环境配置

typescript

// 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:

json

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

typescript

// 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中配置：

json

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

Adding Libraries

添加依赖库

Angular Libraries

Angular 官方库

bash

undefined

bash

undefined

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

undefined

ng add @angular/localize

undefined

Third-Party Libraries

第三方库

bash

undefined

bash

undefined

Install and configure

npm install @ngrx/signals

Some libraries have schematics

ng add @ngrx/store

undefined

ng add @ngrx/store

undefined

Update Angular

Angular 版本升级

bash

undefined

bash

undefined

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

undefined

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

undefined

Performance Analysis

性能分析

bash

undefined

bash

undefined

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

undefined

npx esbuild-visualizer --metadata dist/my-app/browser/stats.json --open

undefined

Caching

缓存配置

bash

undefined

bash

undefined

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](references/tooling-patterns.md).

rm -rf .angular/cache


如需高级配置，请参阅 [references/tooling-patterns.md](references/tooling-patterns.md)。

angular-tooling

Original

Translation

Angular Tooling

Angular 工具使用

Project Setup

项目搭建

Create New Project

创建新项目

Create new standalone project (default in v20+)

Create new standalone project (default in v20+)

With specific options

With specific options

Skip tests

Skip tests

Minimal setup

Minimal setup

Project Structure

项目结构

Code Generation

代码生成

Components

组件

Generate component

Generate component

With options

With options

Flat (no folder)

Flat (no folder)

Dry run (preview)

Dry run (preview)

Services

服务

Generate service (providedIn: 'root' by default)

Generate service (providedIn: 'root' by default)

Skip tests

Skip tests

Other Schematics

其他原理图

Directive

Directive

Pipe

Pipe

Guard (functional by default)

Guard (functional by default)

Interceptor (functional by default)

Interceptor (functional by default)

Interface

Interface

Enum

Enum

Class

Class

Generate with Path Alias

使用路径别名生成

Components in feature folders

Components in feature folders

Development Server

开发服务器

Start dev server

Start dev server

With options

With options

Production mode locally

Production mode locally

With SSL

With SSL

Building

构建

Development Build

开发环境构建

Production Build

生产环境构建

With specific options

With specific options

Build Output

构建输出

Testing

测试

Unit Tests