angular-tooling

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

服務

# 產生服務（預設 providedIn: 'root'）
ng g service services/auth
ng g s services/user

# 跳過測試
ng g s services/api --skip-tests

其他藍圖

# 指令
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

# 使用 SSL
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
│   ├── 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 測試

# 執行 e2e（若已設定）
ng e2e

Lint

# 執行 lint
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 函式庫

# 新增 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

更新 Angular

# 檢查更新
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。