Angular CLIコマンド一覧｜ng new・ng generate早見表

Angular CLIとは、Angularアプリの作成・開発サーバー起動・ビルド・テスト・コード生成を ng コマンドひとつで行う公式のコマンドラインツールです。 npm install -g @angular/cli で入れ、ng new でプロジェクトを作り、ng serve で動かし、ng generate で部品を足し、ng build で配布用ファイルを作る、という流れが基本です。

この記事では、Angular CLI 22.2.1 で ng new から ng build までを順番に実行し、対話プロンプトの選択肢・生成されるファイル・ビルド出力（チャンクサイズ表）をそのまま載せています。ng generate はすべてのスキーマティック（ひな形の種類）を --dry-run で実行して、短縮形と生成ファイル名を早見表にしました。--prod のように以前使われていたオプションが今どうなっているかの新旧対応表と、ng: command not found などのエラー文と対処もまとめています。

確認環境： Linux（x64）／Node.js 24.21.0／npm 10.9.7／Angular CLI 22.2.1・Angular 22.2.1／TypeScript 6.0.3／Vitest 5.0.3。出力中のパスは /home/taro/ に置き換えています。

Angular CLIコマンドの早見表

ng --help が表示するコマンドを、使う順に並べ替えた一覧です（説明は 22.2.1 のヘルプをもとにしています）。

毎日使うのは ng serve・ng generate・ng test・ng build の4つです。残りは「プロジェクトを作るとき」「ライブラリを足すとき」「バージョンを上げるとき」に使います。

Angular CLIをインストールする

インストールとバージョン確認

公式ドキュメント（Installation）に載っているインストールコマンドは次の1行です。

npm install -g @angular/cli

実行すると次のように表示されました。

added 95 packages in 14s

38 packages are looking for funding
  run `npm fund` for details

入ったかどうかは ng version で確かめます。プロジェクトのフォルダーの中で実行すると、Angular 本体や TypeScript の版まで一覧できます（表は主な行の抜粋です）。

Angular CLI       : 22.2.1
Angular           : 22.2.1
Node.js           : 24.21.0
Package Manager   : npm 10.9.7
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/build            │ 22.2.1            │ ^22.2.1           │
│ @angular/cli              │ 22.2.1            │ ^22.2.1           │
│ @angular/core             │ 22.2.1            │ ^22.2.0           │
│ rxjs                      │ 7.8.2             │ ~7.8.0            │
│ typescript                │ 6.0.3             │ ~6.0.2            │
│ vitest                    │ 5.0.3             │ ^5.0.0            │
└───────────────────────────┴───────────────────┴───────────────────┘

Node.jsのバージョン要件

Angular CLI は Node.js の版を起動時に確認します。 Node.js 22.22.2 で CLI 22.2.1 を動かしたところ、次のメッセージが出て止まりました。

Node.js version v22.22.2 detected.
The Angular CLI requires a minimum Node.js version of v22.22.3 or v24.15.0 or v26.0.0.
Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

Node.js を 24.21.0 にすると、そのまま動きました。公式ドキュメントの Version compatibility には、次の対応が載っています。

最新の CLI が動かないときは、まず node -v を確認するのが近道です。Node.js を上げにくいときは、npm install -g @angular/cli@21 のようにメジャー番号を指定して、手元の Node.js に合う CLI を入れる方法もあります。

ng newでプロジェクトを作る

対話プロンプトの選択肢

ng new shop-app を実行すると、3つの質問が順に表示されました。Enter だけで進めると、いちばん上（または既定）の選択肢になります。

? Which stylesheet system would you like to use?
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Tailwind CSS    [ https://tailwindcss.com                                        ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N)

? Which AI tools should Angular integrate with? https://angular.dev/ai/develop-with-ai
>(*) None
 ( ) Claude Code   [ `CLAUDE.md` + Angular MCP server config ]
 ( ) Cursor        [ `AGENTS.md` + Angular MCP server config ]
 ( ) Gemini CLI    [ `GEMINI.md` + Angular MCP server config ]
 ( ) Open AI Codex [ `AGENTS.md` + Angular MCP server config ]
 ( ) VSCode        [ `AGENTS.md` + Angular MCP server config ]

質問を飛ばしたいときは、オプションで答えを先に渡します。 すべて既定値でよければ --defaults が使えます。

ng new shop-app --style=css --ssr=false --ai-config=none

生成されるファイル

CSS・SSR なし・AI 設定なしで作ると、22個のファイルが作られ、続けて npm パッケージが入りました。

CREATE shop-app/.prettierrc (161 bytes)
CREATE shop-app/README.md (1460 bytes)
CREATE shop-app/.editorconfig (314 bytes)
CREATE shop-app/.gitignore (622 bytes)
CREATE shop-app/angular.json (1909 bytes)
CREATE shop-app/package.json (783 bytes)
CREATE shop-app/tsconfig.json (908 bytes)
CREATE shop-app/tsconfig.app.json (398 bytes)
CREATE shop-app/tsconfig.spec.json (409 bytes)
CREATE shop-app/.vscode/extensions.json (130 bytes)
CREATE shop-app/.vscode/launch.json (470 bytes)
CREATE shop-app/.vscode/tasks.json (978 bytes)
CREATE shop-app/src/main.ts (222 bytes)
CREATE shop-app/src/index.html (293 bytes)
CREATE shop-app/src/styles.css (80 bytes)
CREATE shop-app/src/app/app.css (0 bytes)
CREATE shop-app/src/app/app.spec.ts (682 bytes)
CREATE shop-app/src/app/app.ts (291 bytes)
CREATE shop-app/src/app/app.html (20144 bytes)
CREATE shop-app/src/app/app.config.ts (312 bytes)
CREATE shop-app/src/app/app.routes.ts (77 bytes)
CREATE shop-app/public/favicon.ico (15086 bytes)
√ Packages installed successfully.

ツリーにすると次の形です。

shop-app/
├── angular.json          … ワークスペースの設定（ビルド・serve・test の定義）
├── package.json          … 依存パッケージと npm スクリプト
├── tsconfig.json         … TypeScript の共通設定
├── tsconfig.app.json     … アプリ用
├── tsconfig.spec.json    … テスト用
├── public/
│   └── favicon.ico       … そのまま配信される静的ファイル
└── src/
    ├── index.html        … ページの土台
    ├── main.ts           … 起動処理（bootstrapApplication）
    ├── styles.css        … 全体に効くスタイル
    └── app/
        ├── app.ts        … ルートコンポーネント
        ├── app.html      … そのテンプレート
        ├── app.css       … そのスタイル
        ├── app.spec.ts   … そのテスト
        ├── app.config.ts … アプリ全体の設定（providers）
        └── app.routes.ts … ルーティングの定義

生成された src/app/app.ts は次のとおりです。ファイル名は app.component.ts ではなく app.ts、クラス名は App で、standalone の指定も NgModule もありません。

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  imports: [RouterOutlet],
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {
  protected readonly title = signal('shop-app');
}

package.json の scripts には、次の5つが入っていました。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test"
}

ng newの主なオプション

ng new --help に出てくるオプションのうち、よく使うものです。

--ssr --style=scss を --dry-run で試すと、src/styles.scss・src/app/app.scss と、サーバー用の src/server.ts・src/main.server.ts・src/app/app.config.server.ts・src/app/app.routes.server.ts が追加されることを確認できました。迷ったら --dry-run を付けて、作られるファイルを先に見ると安心です。

ng serveで開発サーバーを起動する

プロジェクトのフォルダーで ng serve を実行すると、ビルドのあとに URL が表示されます。ポートを 8730 に変えて起動した出力です。

ng serve --port 8730

❯ Building...
✔ Building...
Initial chunk files | Names         | Raw size
main.js             | main          | 47.94 kB | 
styles.css          | styles        | 95 bytes | 

                    | Initial total | 48.03 kB

Application bundle generation complete. [2.541 seconds] - 2026-10-03T10:23:47.098Z

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:8730/

この状態で curl を使ってアクセスすると、ステータス 200 で index.html が返りました。返ってきた HTML には /@vite/client の読み込みが差し込まれていて、開発サーバーは Vite の仕組みで動いていることがわかります。

止めるときは、ターミナルで Ctrl + C を押します。

ng buildで配布用ファイルを作る

ビルド出力とチャンクサイズ表

ng build は、オプションなしで production 設定（最適化あり）のビルドになります。ng new 直後のプロジェクトでの出力です。

❯ Building...
✔ Building...
Initial chunk files | Names         |  Raw size | Estimated transfer size
main-NDN6ABXX.js    | main          | 216.46 kB |                59.45 kB
styles-5INURTSO.css | styles        |   0 bytes |                 0 bytes

                    | Initial total | 216.46 kB |                59.45 kB

Application bundle generation complete. [7.342 seconds] - 2026-10-03T10:19:01.978Z

Output location: /home/taro/shop-app/dist/shop-app

出力先の中身は次のとおりでした。配信するのは dist/shop-app/browser/ の中身です。

dist/shop-app/3rdpartylicenses.txt
dist/shop-app/browser/favicon.ico
dist/shop-app/browser/index.html
dist/shop-app/browser/main-NDN6ABXX.js
dist/shop-app/browser/styles-5INURTSO.css

development設定との違い

--configuration development を付けると、最適化なし・ソースマップありのビルドになります。同じプロジェクト（コンポーネントをいくつか足したあと）での出力です。

ng build --configuration development

Initial chunk files | Names         | Raw size
main.js             | main          |  1.39 MB | 
styles.css          | styles        | 95 bytes | 

                    | Initial total |  1.39 MB

この違いは、angular.json の build.configurations（production と development）に書かれています。

ng buildの主なオプション

ng generateでコードのひな形を作る

スキーマティックの早見表

ng generate（短縮形 ng g）に続けて種類と名前を書きます。22.2.1 の ng generate --help に出るスキーマティックをすべて --dry-run で実行し、生成されるファイル名を確かめました。

ファイル名に .component や .service が付かないのが、現在の既定（2025 年版スタイルガイド）です。パイプ・ガード・インターセプター・リゾルバーは price-pipe.ts のようにハイフンで種類が付きます。

--dry-runで作られるファイルを先に見る

--dry-run（短縮形 -d）を付けると、ファイルを書き込まずに結果だけ表示します。

ng g component product-list --dry-run

CREATE src/app/product-list/product-list.css (0 bytes)
CREATE src/app/product-list/product-list.spec.ts (568 bytes)
CREATE src/app/product-list/product-list.ts (208 bytes)
CREATE src/app/product-list/product-list.html (27 bytes)

NOTE: The "--dry-run" option means no changes were made.

設定ファイルを書き換えるスキーマティックでは、UPDATE の行も出ます。

ng g environments --dry-run

CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (2134 bytes)

NOTE: The "--dry-run" option means no changes were made.

生成されるコード

--dry-run を外して実行し、中身を確認しました。

コンポーネント（ng g c product-list）

import { Component } from '@angular/core';

@Component({
  imports: [],
  selector: 'app-product-list',
  styleUrl: './product-list.css',
  templateUrl: './product-list.html',
})
export class ProductList {}

サービス（ng g s product）。22.2.1 では @Service() デコレーターで生成されました。--injectable を付けると @Injectable で生成する、とヘルプに書かれています。

import { Service } from '@angular/core';

@Service()
export class Product {}

ディレクティブ（ng g d highlight）

import { Directive } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class Highlight {}

パイプ（ng g p price）

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'price',
})
export class PricePipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

ガード（ng g g auth）と インターセプター（ng g interceptor logging）は、クラスではなく関数で生成されます。

import { CanActivateFn } from '@angular/router';

export const authGuard: CanActivateFn = (route, state) => {
  return true;
};

import { HttpInterceptorFn } from '@angular/common/http';

export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req);
};

ng generate componentの主なオプション

オプションを組み合わせた結果です。

ng g c ui/badge -t -s --skip-tests --dry-run

CREATE src/app/ui/badge/badge.ts (192 bytes)

ng g c ui/card --flat --type=component --dry-run

CREATE src/app/ui/card.component.css (0 bytes)
CREATE src/app/ui/card.component.spec.ts (582 bytes)
CREATE src/app/ui/card.component.ts (206 bytes)
CREATE src/app/ui/card.component.html (19 bytes)

以前の product.service.ts や auth.guard.ts の形でそろえたいときは、次のオプションで生成できました。

ng g s data/order --type=service --dry-run
ng g g admin --type-separator=. --dry-run

CREATE src/app/data/order.service.spec.ts (351 bytes)
CREATE src/app/data/order.service.ts (83 bytes)

CREATE src/app/admin.guard.spec.ts (464 bytes)
CREATE src/app/admin.guard.ts (129 bytes)

ng testで単体テストを実行する

ng new の既定では、テストランナーは Vitest です。コンポーネント・サービス・ディレクティブ・パイプ・ガード・インターセプターを1つずつ生成したあとに実行しました。--watch=false を付けると、1回実行して終了します。

ng test --watch=false

❯ Building...
✔ Building...
Application bundle generation complete. [6.150 seconds] - 2026-10-03T10:22:30.347Z

 RUN  v5.0.3 /home/taro/shop-app

 Test Files  7 passed (7)
      Tests  8 passed (8)
   Start at  19:22:31
   Duration  3.35s (environment 54%, setup 18%, transform 10%, tests 9%, import 8%)

ng addとng updateでライブラリを管理する

ng add

ng add は、パッケージのインストールに加えて、設定ファイルの書き換えまで行います。@angular/material を追加したときの出力です（--skip-confirmation で確認の質問を、--defaults でテーマなどの質問を省いています）。

ng add @angular/material --skip-confirmation --defaults

❯ Determining Package Manager
› Using package manager: npm
✔ Determining Package Manager
❯ Searching for compatible package version
› Found compatible package version: 22.2.1.
✔ Searching for compatible package version
❯ Loading package information
✔ Loading package information
❯ Installing package
✔ Installing package
UPDATE package.json (850 bytes)
√ Packages installed successfully.
CREATE src/material-theme.scss (1179 bytes)
UPDATE angular.json (1950 bytes)
UPDATE src/index.html (637 bytes)

手元の Angular と合うバージョンを自動で選び、テーマファイルの作成・angular.json への登録・index.html へのフォント読み込みの追加までが一度に行われました。

ng update

引数なしの ng update は、更新できるパッケージを調べるだけで、何も書き換えません。最新の状態では次の表示になりました。

Using package manager: npm
Collecting installed dependencies...
Found 15 dependencies.
We analyzed your package.json and everything seems to be in order. Good work!

実際に上げるときは、パッケージ名を並べます。メジャーバージョンは1つずつ上げるのが基本で、手順は Angular Update Guide（update.angular.dev）で元と先のバージョンを選ぶと表示されます。

ng update @angular/core@22 @angular/cli@22

ng config・ng cache・ng runで設定とキャッシュを扱う

ng config は angular.json の値をパスで読み書きします。

ng config projects.shop-app.prefix

app

ng cache info はビルドキャッシュの状態を表示します。ビルド結果がおかしいと感じたら ng cache clean で消せます。

Enabled           : Yes
Environment       : local
Path              : /home/taro/shop-app/.angular/cache
Size on disk      : 739.21 kB
Effective Status  : Enabled (current machine)

ng run は「プロジェクト名:ターゲット名:設定名」を指定して実行します。ng build --configuration development は、次のコマンドと同じ意味です。

ng run shop-app:build:development

以前のオプションとの新旧対応表

検索で見つかる記事には、以前のバージョン向けの書き方も多く残っています。22.2.1 で実行して確かめた対応です。

ng lint と ng e2e を追加設定なしで実行したときの出力は次のとおりで、候補のパッケージ名まで案内してくれます。

Cannot find "lint" target for the specified project.
You can add a package that implements these capabilities.

For example:
  ESLint: ng add angular-eslint

Cannot find "e2e" target for the specified project.
You can add a package that implements these capabilities.

For example:
  Playwright: ng add playwright-ng-schematics
  Cypress: ng add @cypress/schematic
  Nightwatch: ng add @nightwatch/schematics
  WebdriverIO: ng add @wdio/schematics
  Puppeteer: ng add @puppeteer/ng-schematics

エラーメッセージと対処

実際に出したエラー文と、その直し方です。

Windows の PowerShell でスクリプトの実行が止められる場合について、公式ドキュメント（Installation）は次のコマンドを案内しています。表示されるメッセージをよく読んで進めるよう書かれています。

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

同じページには、Linux や macOS でグローバルのインストール先が root の所有になっている場合は sudo を付けて実行する、とも書かれています。

「どのコマンドにどんなオプションがあるか」を忘れたら、--help が確実です。 この記事の表も、ng new --help・ng serve --help・ng build --help・ng generate component --help の出力から作りました。

ng --help
ng generate --help
ng generate component --help

作業の流れで見るコマンド

最後に、プロジェクトを作ってから配布するまでを1本につなげます。上から順にコピーして実行できます。

# 1. CLI を入れる（最初の1回だけ）
npm install -g @angular/cli
ng version

# 2. プロジェクトを作る
ng new shop-app --style=css --ssr=false --ai-config=none
cd shop-app

# 3. 開発サーバーを起動する（http://localhost:4200/）
ng serve --open

# 4. 部品を足す（別のターミナルで）
ng g c product-list
ng g s product
ng g p price
ng g g auth

# 5. テストする
ng test --watch=false

# 6. 配布用にビルドする（dist/shop-app/browser/ を配信）
ng build

よくある質問

Q. ng serve と ng build は何が違いますか？ A. ng serve は開発用で、ファイルを変更するたびに再ビルドしてブラウザーに反映します。ng build は配布用のファイルを dist/ に書き出します。今回の出力では、production ビルドの main が 216.46 kB（転送見積もり 59.45 kB）、最適化なしの development ビルドの main.js が 1.39 MB でした。

Q. ng generate で作ったファイルを取り消すコマンドはありますか？ A. 22.2.1 の ng --help には、取り消し用のコマンドは載っていません。作られたファイルを削除すれば元に戻ります。心配なときは、先に --dry-run で作られるファイルを確認してから実行すると安心です。

Q. app.component.ts という名前で作りたいのですが。 A. プロジェクト全体なら ng new --file-name-style-guide=2016、コンポーネント単位なら ng g c foo --type=component で、以前と同じ形式のファイル名になります。

Q. --dry-run はどのコマンドで使えますか？ A. ng new と ng generate で使えることを確認しました。どちらも CREATE・UPDATE の一覧のあとに NOTE: The "--dry-run" option means no changes were made. と表示され、ファイルは書き込まれません。

まとめ

• 基本の流れは ng new → ng serve → ng generate → ng test → ng build です。
• ng new は3つの質問（スタイル・SSR・AI ツール設定）に答えるだけ。--style などのオプションで先に答えを渡せます。
• ng build は既定で production 設定。--prod は受け付けないので、付けずに実行します。
• ng generate は短縮形が便利（ng g c・ng g s・ng g d・ng g p・ng g g）。--dry-run で先に結果を確認できます。
• ファイル名は product-list.ts・product.ts のように短い形が既定。以前の形にするなら --type や --type-separator を使います。
• ng lint と ng e2e は、対応するパッケージを ng add してから使います。
• 動かないときは node -v と ng version、オプションを忘れたら --help を見ます。

参考・出典

• Angular 公式ドキュメント「CLI Overview and Command Reference」（angular.dev/cli）
• Angular 公式ドキュメント「Installation」（angular.dev/tools/cli/setup-local）
• Angular 公式ドキュメント「Version compatibility」（angular.dev/reference/versions）
• Angular CLI 22.2.1 の ng --help・ng new --help・ng serve --help・ng build --help・ng test --help・ng generate --help の出力

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。