Angular 22新機能まとめ｜22.0〜22.2一覧表とng update実測

Angular 22 とは、2026年6月3日にリリースされた Angular のメジャーバージョンで、Signal Forms と resource の安定版化、OnPush の既定化、@Service デコレーターなどが入ったリリースです。 その後 22.1（7月）、22.2（2026年9月23日）で @boundary や Router resources などが追加されています。

この記事では、22.0〜22.2 の新機能を公式ブログ・公式ドキュメント・npm パッケージの型定義で確認して一覧表にまとめ、さらに Angular 21 のプロジェクトを実際に ng update で 22.2.0 に上げたときのメッセージと差分、新機能をコピペで試せるコードと Playwright（Chromium）での実行結果 を載せています。概要だけでなく「上げると何が変わるか」「どう書くか」まで一度に確認できます。

Angular 22 新機能の早見表（22.0〜22.2）

「安定版」は本番で使ってよい API、「開発者プレビュー」は形が変わる可能性がある API、「実験的」は試用段階の API です。

検証環境と前提

Angular CLI 22.2 は Node.js 22.22.3 以上 / 24.15.0 以上 / 26.0.0 以上が必要です。 22.22.2 で ng new を実行すると、次のメッセージで止まりました。

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.

上げる前に node -v を確認 しておくと、スムーズに進められます。

v21 から v22 へ ng update した実測

手順

Angular 21.2.24 で作ったプロジェクトに、変更検知・HTTP・ルーター・サービス・?. を含む小さなコードを入れてから更新しました。

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

実際に出たメッセージ

The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 22 to perform the update.
...
Updating package.json with dependency @angular/core to version 22.2.0...
Updating package.json with dependency typescript to version 6.0.3...
** Executing migrations of package '@angular/core' **

❯ Adds the required third argument to canMatch callsites.
  Migration completed (No changes made).

❯ Adds `ChangeDetectionStrategy.Eager` to all components.
UPDATE src/app/task-list.ts (520 bytes)
UPDATE src/app/app.ts (352 bytes)
  Migration completed (2 files modified).

❯ Adds 'withXhr' to 'provideHttpClient' function calls when the 'HttpXhrBackend' is used.
UPDATE src/app/app.config.ts (398 bytes)
  Migration completed (1 file modified).

❯ Adds withNoIncrementalHydration() opt out to provideClientHydration() when incremental hydration is not enabled to retain pre-v22 behavior-.
  Migration completed (No changes made).

❯ Migrate broken duplicate outputs.
  Migration completed (No changes made).

❯ Wraps optional chaining expressions in $safeNavigationMigration().
  Migration completed (No changes made).

❯ Disables the 'nullishCoalescingNotNullable & optionalChainNotNullable extended diagnostics.
UPDATE tsconfig.app.json (624 bytes)
  Migration completed (1 file modified).

❯ Adds 'strictTemplates: false' in tsconfig.json when not set.
  Migration completed (No changes made).

自動で入った差分

1. 全コンポーネントに ChangeDetectionStrategy.Eager が付く（動きを v21 と同じに保つため）

-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { TaskService } from './task.service';

 @Component({
   selector: 'app-task-list',
+  changeDetection: ChangeDetectionStrategy.Eager,
   template: `

2. HttpClient に withXhr() が付く（v22 の既定は Fetch API になったため、従来の XHR を維持）

-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withXhr } from '@angular/common/http';
 ...
-  providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes), provideHttpClient()],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideHttpClient(withXhr()),
+  ],

3. tsconfig.app.json に拡張診断の抑制が入る

+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }

4. package.json：@angular/* が ^22.2.0、typescript が ~6.0.3 に。vitest は ^4.0.8 のまま でした（新規作成した v22 プロジェクトは ^5.0.0）。Vitest 5 にそろえたい場合は別途更新します。

@Injectable({ providedIn: 'root' }) のサービスは ng update では変わりませんでした。@Service() への移行は、22.1 で追加された専用コマンドで行います。

npx ng generate @angular/core:service-migration

-import { Injectable, signal } from '@angular/core';
+import { signal, Service } from '@angular/core';
 ...
-@Injectable({ providedIn: 'root' })
+@Service()
 export class TaskService {

更新後のビルド・テスト

小さなプロジェクトかつ共有環境での参考値のため、数秒のばらつきがあります。 22.2 の「型チェックとバンドルの並列化」は大きなプロジェクトほど効果が出る改善です（Ninja Squad の解説では大規模プロジェクトで約8秒の改善と紹介されています）。

更新時のチェックリスト

新規プロジェクト（v22）で変わった点

ng new で作った v22 プロジェクトと ng generate の出力を確認しました。

// ng g c demo/member-card で生成（changeDetection の指定なし＝OnPush）
import { Component } from '@angular/core';

@Component({
  imports: [],
  selector: 'app-member-card',
  styleUrl: './member-card.css',
  templateUrl: './member-card.html',
})
export class MemberCard {}

// ng g s demo/member で生成（@Service が既定）
import { Service } from '@angular/core';

@Service()
export class Member {}

• コンポーネントは changeDetection を書かない＝OnPush。
• サービスは @Service() で生成 されます。
• tsconfig.json に strictTemplates の行がありません（既定で有効 になったため）。
• devDependencies は typescript ~6.0.2、vitest ^5.0.0、jsdom ^30.0.0 でした。

新機能をコピペで試す

以下は 1 つのコンポーネントにまとめた動作確認用コードです。Angular 22.2.0 でビルドし、Playwright で操作して結果を確認しました。

// src/app/v22/stock-store.ts
import { Service, signal } from '@angular/core';

export interface StockItem { name: string; qty: number }

@Service()
export class StockStore {
  readonly items = signal<StockItem[]>([
    { name: 'ペン', qty: 12 },
    { name: 'ノート', qty: 3 },
  ]);
}

// src/app/v22/report-exporter.ts（injectAsync で遅延読み込みするサービス）
import { Service, inject } from '@angular/core';
import { StockStore } from './stock-store';

@Service()
export default class ReportExporter {
  private readonly store = inject(StockStore); // @Service では inject() を使う
  toCsv(): string {
    return ['name,qty', ...this.store.items().map((i) => `${i.name},${i.qty}`)].join('\n');
  }
}

// src/app/v22/broken-widget.ts（@boundary の確認用に、わざと例外を投げる）
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-broken-widget',
  template: `<p class="widget">在庫: {{ qtyText() }}</p>`,
})
export class BrokenWidget {
  readonly fail = input(false);
  protected qtyText() {
    if (this.fail()) throw new Error('在庫データを読めませんでした');
    return '12個';
  }
}

// src/app/v22/v22-page.ts
import { Component, computed, inject, injectAsync, onIdle, resource, signal } from '@angular/core';
import { StockItem, StockStore } from './stock-store';
import { BrokenWidget } from './broken-widget';

type Status = 'draft' | 'pending' | 'processing' | 'done';

function fetchUser(): Promise<{ id: number; teamId: number }> {
  return new Promise((r) => setTimeout(() => r({ id: 1, teamId: 7 }), 200));
}
function fetchTeam(teamId: number): Promise<string> {
  return new Promise((r) => setTimeout(() => r(`チーム${teamId}`), 200));
}

@Component({
  selector: 'app-v22-page',
  imports: [BrokenWidget],
  template: `
    <!-- 1. スプレッド構文 -->
    <p id="spread" [class]="{ ...baseClasses, highlight: isHot() }">class spread</p>
    <p id="arr-spread">{{ [...baseTags, '新着'].join(' / ') }}</p>

    <!-- 2. アロー関数 -->
    @for (item of store.items(); track item.name) {
      <button
        class="use"
        // 要素の中にもコメントが書ける（v22）
        (click)="store.items.update(list => list.map(i => i.name === item.name ? { ...i, qty: i.qty - 1 } : i))"
      >{{ item.name }}: {{ item.qty }}</button>
    }

    <!-- 3. @switch の複数 @case と @default never -->
    @let s = status();
    @switch (s) {
      @case ('draft') { <p id="sw">下書き</p> }
      @case ('pending')
      @case ('processing') { <p id="sw">処理中</p> }
      @case ('done') { <p id="sw">完了</p> }
      @default never;
    }
    <button id="next" (click)="next()">次の状態</button>

    <!-- 4. private メンバーをテンプレートから参照（v22.2） -->
    <p id="private">{{ secretLabel }}</p>

    <!-- 5. resource の chain() -->
    <p id="chain">user={{ user.status() }} team={{ team.status() }} {{ team.hasValue() ? team.value() : '' }}</p>

    <!-- 6. injectAsync -->
    <button id="export" (click)="exportCsv()">CSV出力</button>
    <pre id="csv">{{ csv() }}</pre>

    <!-- 7. @boundary（v22.2 developer preview） -->
    <button id="break" (click)="fail.set(true)">ウィジェットを失敗させる</button>
    @boundary {
      <app-broken-widget [fail]="fail()" />
    } @error {
      <p id="fallback">表示できませんでした: {{ $error.message }}
        <button id="retry" (click)="fail.set(false); $reset()">再試行</button></p>
    }
  `,
})
export class V22Page {
  protected readonly store = inject(StockStore);
  protected readonly baseClasses = { card: true, rounded: true };
  protected readonly baseTags = ['文具', '備品'];
  protected readonly isHot = computed(() => this.store.items().some((i: StockItem) => i.qty < 3));

  private readonly order: Status[] = ['draft', 'pending', 'processing', 'done'];
  protected readonly status = signal<Status>('draft');
  next() {
    const i = this.order.indexOf(this.status());
    this.status.set(this.order[(i + 1) % this.order.length]);
  }

  private readonly secretLabel = 'private でも表示できます';

  protected readonly user = resource({ loader: () => fetchUser() });
  protected readonly team = resource({
    params: ({ chain }) => {
      const u = chain(this.user); // user が resolved になるまで team は loading のまま
      return u ? { teamId: u.teamId } : undefined;
    },
    loader: ({ params }) => fetchTeam(params.teamId),
  });

  private readonly exporter = injectAsync(() => import('./report-exporter'), { prefetch: onIdle });
  protected readonly csv = signal('');
  async exportCsv() {
    const svc = await this.exporter();
    this.csv.set(svc.toCsv());
  }

  protected readonly fail = signal(false);
}

実行結果（Playwright / Chromium）

injectAsync で読み込むサービスは別チャンクになりました。 ng build の出力に次の行があります。

Lazy chunk files    | Names           |  Raw size | Estimated transfer size
chunk-BHLxGM3m.js   | report-exporter | 310 bytes |               310 bytes

@boundary で捕まえたエラーも、コンソールには ERROR Error: 在庫データを読めませんでした として記録されました。画面は代替表示に切り替わり、ログは残る ので、原因調査もしやすい動きです。

つまずいた点と直し方

1. @default never は、シグナル呼び出しを直接渡すと型が絞り込まれない

@switch (status()) と書いたところ、すべての @case を書いていても次のエラーになりました。

TS2322: Type 'Status' is not assignable to type 'never'.
  Type '"draft"' is not assignable to type 'never'.

@let s = status(); で一度変数に入れ、@switch (s) にすると通ります。 その状態で @case ('done') を消すと、期待どおり抜けを検出しました。

TS2322: Type '"done"' is not assignable to type 'never'.

2. chain() の戻り値は undefined を含む

chain(this.user).teamId と書くと TS2532: Object is possibly 'undefined'. になりました。公式の例と同じく u ? { ... } : undefined で分岐 させると通ります。

主要な新機能の解説

OnPush 既定化と Eager

v22 では changeDetection を書かないコンポーネントは OnPush になります。 OnPush は「入力が変わった・イベントが起きた・読んでいるシグナルが変わった」ときだけ再描画する方式です。シグナルで状態を持っていれば、書き方を変える必要はほとんどありません。既存コードは ng update で Eager（旧 Default）が自動で付くので、動きは変わりません（OnPush の実測は「Angular Signals使い方」の記事で紹介しています）。

@Service と injectAsync

injectAsync は「使うときに初めて読み込む」サービス を作ります。レポート出力や重いライブラリを使う処理など、最初の画面表示に不要なサービスに向いています。prefetch: onIdle を付けるとブラウザが空いたときに先読みします。

Signal Forms の安定版化

form()・FormField（[formField]）・FormRoot（[formRoot]）・required / email / validateAsync などが v22.0 で安定版 になりました。v22 では minDate() / maxDate()、getError()、reloadValidation()、debounce(field, 'blur')、全ルールでの when オプションなどが追加されています。ログイン・会員登録フォームの完成コードは「Angular Signal Forms」の記事で紹介しています。

HttpClient の Fetch 既定化

v22 では provideHttpClient() だけで Fetch API が使われます。 withFetch() は不要になり非推奨です。Fetch ではアップロード進捗が取れないため、進捗が必要な場合は withXhr() を指定します。reportProgress は非推奨になり、reportUploadProgress / reportDownloadProgress が追加されました。

Router resources（22.2、開発者プレビュー）

ルート定義でデータ取得を宣言し、複数ルートのデータを並列に読み込む仕組みです。公式の解説に沿ったコードを示します（この記事では未実行 です）。

provideRouter(routes, withComponentInputBinding(), withRouterResources());

// ルート定義
{
  path: 'races',
  component: Races,
  resources: (context) => {
    const page = computed(() => context.queryParams()['page']);
    const races = httpResource<Array<RaceModel>>(() => `/api/races?page=${page()}`);
    return { races };
  },
}

nonBlocking() で囲むと、読み込みを待たずに画面遷移します。ガードや resource の中から throw new RedirectCommand(...) でリダイレクトできるようにもなりました。

よくある質問

Q. Angular 22 に上げると既存の画面の動きは変わりますか？ A. ng update を使えば、変更検知（Eager の付与）や HttpClient（withXhr の付与）は従来どおりの動きに保たれます。 ただし paramsInheritanceStrategy の既定変更は自動移行されないため、子ルートでパラメーターを読んでいる箇所は確認しておくと安心です。

Q. Node.js と TypeScript はどのバージョンが必要ですか？ A. TypeScript 6 が必須 です。Node.js は 20 が非対応になり、Angular CLI 22.2 では 22.22.3 以上 / 24.15.0 以上 / 26.0.0 以上 が必要でした（22.22.2 では起動時に停止）。

Q. @boundary は本番で使えますか？ A. 22.2 時点では開発者プレビュー です。API が変わる可能性があるため、まずは影響範囲の小さいウィジェットから試すのがおすすめです。

Q. Webpack を使っているプロジェクトはどうなりますか？ A. v22 では Webpack 系のビルダーは非推奨 ですが、まだ動作します。esbuild ベースの @angular/build:application へは ng update @angular/cli --name use-application-builder で移行できます。

まとめ

• Angular 22 は Signal Forms・resource が安定版になり、OnPush が既定 になったリリースです。
• 22.1 で linkedSignal の set・@Service 移行コマンド、22.2 で @boundary・private 参照・Router resources が加わりました。
• ng update は Eager・withXhr・拡張診断の抑制を自動で入れ、動きを保ったまま 上げられます。
• @Service への置き換えは ng g @angular/core:service-migration で別途実行します。
• テンプレートで スプレッド構文・アロー関数・複数 @case・@default never が使え、コードが短くなります。
• Node.js 22.22.3 以上と TypeScript 6 を先に用意しておくと、更新がスムーズです。

株式会社RJCでは、フレームワークの新しいバージョンを実際のプロジェクトで試し、更新の手順や気づきをメンバー同士で共有しています。こうした知識を共有しながら、日々技術を磨いています。

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