angular-cli

@angular/cli

バージョン： Angular 21（2025） タグ： CLI、ジェネレーター、ビルド、スキャフォールディング

参考資料： CLI リファレンス • ジェネレーター • ビルダー

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

• NEW：制御フローの移行 — @if/@for への移行には ng g @angular/core:control-flow を使用します source

• NEW：シグナル入力の移行 — シグナル入力には ng g @angular/core:signal-input-migration を使用します source

• NEW：ルートの遅延読み込みへの移行 — スタンドアロンルート向けです

• NEW：名前付きワークスペース — 1 つの angular.json に複数のアプリケーションを配置できます

• NEW：デフォルトで esbuild を使用 — esbuild/Vite によるビルドの高速化

ベストプラクティス

• スキャフォールディングにはジェネレーターを使用します

# 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

• 移行にはスケマティクスを使用します

# 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

• パッケージには ng add を使用します

# Add Angular Material
ng add @angular/material

# Add SSR
ng add @angular/ssr

# Add PWA
ng add @angular/pwa

• ワークスペースのデフォルト値を設定します

{
  "$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 を使用します

# Run custom builder
ng run my-app:build

# Run SSR
ng run my-app:serve-ssr

# Run prerender
ng run my-app:prerender

• 設定には ng config を使用します

# Set default style
ng config defaults.style=scss

# Enable analytics
ng analytics enable

• 移行には ng update を使用します

# Update packages
ng update

# Update specific package
ng update @angular/core

• オプションを指定して ng build を使用します

# Production build
ng build --configuration=production

# Dev build with stats
ng build --stats-json

• デフォルトでスタンドアロンを使用します

# New project with standalone
ng new my-app --standalone

• クラスベースより関数型を使用します

# Generate functional guard
ng g g guards/auth --functional

# Generate functional interceptor
ng g interceptor my-interceptor --functional