Angular 17 から Angular 21 への移行: 実践ガイド
Angular アプリケーションを 4 つのメジャー バージョン間で移行することは、大変な作業のように思えるかもしれませんが、 しかし、Angular チームは多額の投資を行ってきました。 下位互換性 そしてで 自動移行ツール。 17 から 21 までのすべてのバージョンで改善が導入されました 重要: 最新の制御フローから安定した信号へ、ゾーンレスな変更検出から TypeScript 5.9 のサポートへ。
このシリーズの 10 回目で最後の記事では、 モダンアンギュラー 私たちは直面します 段階的な移行。Angular 17 からバージョン 21 までのすべてのステップをカバーします。 すべては依存関係を更新することです。各リリースには、新しい API、非推奨、および フレームワークを最大限に活用するために理解することが不可欠なベスト プラクティス。
この記事で学べること
- Angular 18、19、20、21 の新機能のロードマップ
- 移行を開始する前にプロジェクトを準備する方法
- 各バージョンのジャンプ手順 (17→18→19→20→21)
- コマンド
ng update重大な変更の管理 - サードパーティの依存関係の更新 (Angular マテリアル、NgRx など)
- 移行の各段階後にテストする方法
- 移行を検証するための完全なチェックリスト
最新の Angular シリーズの概要
| # | アイテム | 集中 |
|---|---|---|
| 1 | 角度信号 | きめ細かい応答性 |
| 2 | ゾーンレスの変更検出 | Zone.jsを削除する |
| 3 | 新しいテンプレート @if、@for、@defer | 最新の制御フロー |
| 4 | スタンドアロンコンポーネント | NgModule を使用しないアーキテクチャ |
| 5 | 信号形式 | シグナルを使用したレスポンシブフォーム |
| 6 | SSR と増分水分補給 | サーバーサイドレンダリング |
| 7 | Angular におけるコア Web バイタル | パフォーマンスと指標 |
| 8 | 角度のある PWA | プログレッシブ Web アプリ |
| 9 | 高度な依存関係の注入 | DIツリーシェイク可能 |
| 10 | 現在位置 → Angular 17 から 21 への移行 | 移行ガイド |
1. バージョン概要: Angular 17 ～ 21
移行を進める前に、で導入された主な変更点を理解することが重要です。 各バージョン。 Angular は半年ごとにリリースされます。メジャー バージョンごとに新機能が追加されます。 実験的な API の安定化と、場合によっては重大な変更が行われます。
リリースのタイムラインと重要なニュース
| バージョン | リリース | TypeScript | 主なニュース |
|---|---|---|---|
| 角度 17 | 2023 年 11 月 | 5.2 - 5.3 | 制御フロー (@if、@for、@switch)、@defer、Signals 開発者プレビュー、新しいブランディング |
| 角度 18 | 2024年5月 | 5.4 - 5.5 | ゾーンレスの開発者プレビュー、安定した信号入出力、安定した遅延可能なビュー |
| 角度 19 | 2024 年 11 月 | 5.6 - 5.7 | スタンドアロンのデフォルト、増分ハイドレーション、linkedSignal、リソース API |
| 角度 20 | 2025年5月 | 5.8 | 安定したゾーンレス、シグナルフォームプレビュー、改良されたeffect()、オーサリングフォーマット |
| 角度 21 | 2025 年 11 月 | 5.9 | 新しいプロジェクトのゾーンレスデフォルト、TypeScript 5.9、パフォーマンスランタイム |
ご覧のとおり、過去 4 つのバージョンの共通点は明らかです。 中心的なリアクティブプリミティブとしてのシグナル, Zone.js の削除 e アーキテクチャの簡素化 スタンドアロンコンポーネント経由。すべての移行 前のものの基礎の上に構築されます。
2. 移行の準備
成功した移行は、最初の移行よりずっと前から始まります ng update。の段階
予期せぬ問題を回避し、ダウンタイムを短縮するには、準備が重要です。ここにあります
基本的な手順。
互換性の検証
まず、プロジェクトの現在のバージョンとインストールされている依存関係を確認します。毎 Angular バージョンには、Node.js と TypeScript の最小バージョンが必要です。
バージョン別のシステム要件
| 角度のある | Node.js の最小要件 | Node.js 推奨 | TypeScript | RxJS |
|---|---|---|---|---|
| 17.x | 18.13 | 20.x | 5.2 - 5.3 | 7.x |
| 18.x | 18.19 | 20.x / 22.x | 5.4 - 5.5 | 7.x |
| 19.x | 18.19 | 22.x | 5.6 - 5.7 | 7.x |
| 20.x | 20.x | 22.x | 5.8 | 7.x |
| 21.x | 20.x | 22.x | 5.9 | 7.x |
移行前チェックリスト
# 1. Verifica la versione corrente di Angular
ng version
# 2. Controlla la versione di Node.js
node --version
# 3. Assicurati che il repository sia pulito
git status
# 4. Crea un branch dedicato alla migrazione
git checkout -b feat/angular-21-migration
# 5. Esegui i test correnti per avere una baseline
npm test -- --watch=false
# 6. Build di produzione per verifica baseline
npm run build
# 7. Verifica le dipendenze obsolete
npm outdated
# 8. Controlla vulnerabilità
npm audit
Angular 移行の黄金律
決してバージョンをスキップしないでください。 Angular は 1 つのメジャーの移行のみをサポートします 一度にバージョンを変更します。 Angular 17 を使用している場合は、18、次に 19、次に 20、最後に 21 を通過する必要があります。 各ステップには、コードを更新する自動回路図が含まれています。 連続するリリース間でのみ動作するように設計されています。
3. Angular 17 → 18: 制御フローと信号入力
多くの場合、最初の飛躍は、コードのリファクタリングという点で最も重要です。角度 18 を安定させた 最新の制御フロー (@if、@for、@switch) が導入されました Angular 17 の開発者プレビューとして、私をもたらしました 信号入力 彼らは 信号出力 安定へ。
更新コマンド
# Aggiorna Angular CLI e Core
ng update @angular/core@18 @angular/cli@18
# Se usi Angular Material
ng update @angular/material@18
# Se usi Angular CDK
ng update @angular/cdk@18
# Risolvi eventuali conflitti peer dependencies
npm install --legacy-peer-deps
制御フローの自動移行
Angular 18 には、構造ディレクティブを自動的に変換する回路図が含まれています
(*ngIf, *ngFor, *ngSwitch) 新しい構文では
ブロックで。
# Migrazione automatica del control flow
ng generate @angular/core:control-flow
# Oppure, per un singolo progetto in un workspace
ng generate @angular/core:control-flow --project=my-app
# Dopo la migrazione, verifica i cambiamenti
git diff
前後: 制御フロー
<!-- *ngIf con else -->
<div *ngIf="user; else noUser">
Benvenuto, {{ user.name }}
</div>
<ng-template #noUser>
<p>Effettua il login</p>
</ng-template>
<!-- *ngFor con trackBy -->
<ul>
<li *ngFor="let item of items; trackBy: trackById">
{{ item.name }}
</li>
</ul>
<!-- *ngSwitch -->
<div [ngSwitch]="status">
<p *ngSwitchCase="'active'">Attivo</p>
<p *ngSwitchCase="'inactive'">Inattivo</p>
<p *ngSwitchDefault>Sconosciuto</p>
</div>
<!-- @if con @else -->
@if (user) {
<div>Benvenuto, {{ user.name }}</div>
} @else {
<p>Effettua il login</p>
}
<!-- @for con track -->
<ul>
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
} @empty {
<li>Nessun elemento</li>
}
</ul>
<!-- @switch -->
@switch (status) {
@case ('active') { <p>Attivo</p> }
@case ('inactive') { <p>Inattivo</p> }
@default { <p>Sconosciuto</p> }
}
信号の入力と出力
// PRIMA (Angular 17) - decoratori classici
@Component({ selector: 'app-user-card' })
export class UserCardComponent {
@Input() name: string = '';
@Input() age: number = 0;
@Output() selected = new EventEmitter<string>();
onClick(): void {
this.selected.emit(this.name);
}
}
// DOPO (Angular 18) - signal inputs/outputs
import { input, output } from '@angular/core';
@Component({ selector: 'app-user-card' })
export class UserCardComponent {
name = input<string>('');
age = input<number>(0);
selected = output<string>();
onClick(): void {
this.selected.emit(this.name());
}
}
Angular 18 の主な機能
- 安定した制御フロー: @if、@for、@switch、@defer は完全に安定しています
- 信号入力/出力: API
input()eoutput()安定した - ゾーンレス開発者プレビュー: Zone.js を使用しないアプリケーションの最初のサポート
- ng-content のフォールバック コンテンツ: 投影用のデフォルトのコンテンツ
- 関数を使用してリダイレクトをルートします。 ロジックベースの動的リダイレクト
- Firebase アプリのホスティング: Angular に最適化された新しいホスティング サービス
4. Angular 18 → 19: スタンドアロンのデフォルトとハイドレーション
Angular 19 では、アーキテクチャに大きな変更が加えられています。 スタンドアロンコンポーネント
デフォルトになる。旗 standalone: true それはもう必要ありません。
すべてのコンポーネントはデフォルトでスタンドアロンです。さらに、追加の水分補給
安定性と、次のような新しいリアクティブ プリミティブを実現します。 linkedSignal そして
resource API 彼らは姿を現します。
更新コマンド
# Aggiorna Angular CLI e Core
ng update @angular/core@19 @angular/cli@19
# Se usi Angular Material
ng update @angular/material@19
# Verifica e correggi i warning di deprecazione
ng build 2>&1 | grep -i "deprecated"
デフォルトでスタンドアロン
Angular 19 の回路図は自動的に削除されます standalone: true 全員から
これがデフォルトの動作となるためです。コンポーネントがスタンドアロンでない場合は、次のようにする必要があります。
今すぐ明示的に宣言する standalone: false.
// PRIMA (Angular 18) - standalone esplicito
@Component({
standalone: true, // Richiesto esplicitamente
selector: 'app-header',
imports: [RouterLink, NgOptimizedImage],
templateUrl: './header.component.html',
})
export class HeaderComponent {}
// DOPO (Angular 19) - standalone per default
@Component({
// standalone: true è implicito, rimosso dalla schematica
selector: 'app-header',
imports: [RouterLink, NgOptimizedImage],
templateUrl: './header.component.html',
})
export class HeaderComponent {}
linkedSignal とリソース API
import { signal, linkedSignal, resource } from '@angular/core';
@Component({ selector: 'app-product-list' })
export class ProductListComponent {
// linkedSignal: signal derivato con possibilità di override
selectedCategory = signal('electronics');
currentPage = linkedSignal(() => {
// Resetta a pagina 1 quando cambia la categoria
this.selectedCategory();
return 1;
});
// resource API: caricamento dati asincrono reattivo
products = resource({
request: () => ({
category: this.selectedCategory(),
page: this.currentPage()
}),
loader: async ({ request }) => {
const response = await fetch(
`/api/products?cat=${request.category}&page=${request.page}`
);
return response.json();
}
});
changePage(page: number): void {
this.currentPage.set(page);
}
}
Angular 19 の主な機能
- スタンドアロンのデフォルト: すべてのコンポーネントはデフォルトでスタンドアロンです
- 安定した増分水分補給: トリガーベースのプログレッシブハイドレーション (ビューポート、ホバー、タイマー)
- リンクされたシグナル: 上書き可能な値を持つ派生信号 (開発者プレビュー)
- API リソース: Signals と統合された非同期読み込み
- 厳密なスタンドアロンの強制: インポートが欠落しているためコンパイル エラーが発生する
- SSRの改善: 水分補給中のインタラクションのためのイベントリプレイ
5. Angular 19 → 20: ゾーンレス安定フォームとシグナルフォーム
Angular 20 は歴史的なマイルストーンをマークします。 ゾーンレス変更検出が安定する。 約 2 年間の開発者プレビューを経て、Angular アプリケーションは正式に廃止される可能性があります 完全な安定性が保証された Zone.js。さらに、 信号形式 彼らは自分たちのことをする 開発者プレビューとして登場し、完全にベースでフォームを管理する新しい方法を提案します シグナルについて。
更新コマンド
# Aggiorna Angular CLI e Core
ng update @angular/core@20 @angular/cli@20
# Se usi Angular Material
ng update @angular/material@20
# Dopo l'aggiornamento, avvia il server di sviluppo
ng serve
ゾーンレス変更検出の採用
Angular 20 を使用すると、Zone.js を安全に削除できます。回路図ではこれが自動的に行われません 破損を避けるためですが、ゾーンレスをまだ導入していない場合は、今が導入するのに最適な時期です。
// app.config.ts - Abilitare zoneless
import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
// Sostituisce provideZoneChangeDetection()
provideZonelessChangeDetection(),
provideRouter(routes),
provideClientHydration(),
]
};
# 1. Rimuovi zone.js dalle dipendenze
npm uninstall zone.js
# 2. Rimuovi il polyfill da angular.json
# Cerca e rimuovi "zone.js" dall'array "polyfills"
# 3. Verifica che non ci siano import diretti
grep -r "zone.js" src/
警告: コードはゾーンレスと互換性がありません
一部の一般的なパターンは、Zone.js がないと機能しません。 非同期 API のモンキーパッチ。コード内で次のパターンを探して修正します。
- 後でコンポーネントのプロパティを直接変更する
setTimeoutosetInterval: アメリカsignal()彼らの代わりに - の使用
Promise.then()UI 状態を更新するには: に変換しますresource()または使用しますsignal.set() - Angular の外部で状態を変更するサードパーティ ライブラリ: を使用します。
inject(ChangeDetectorRef)一時的な回避策として - でテストします
fakeAsync/tick: と置き換えますawait fixture.whenStable()
Angular 20 の主な機能
- 安定したゾーンレス変更検出:
provideZonelessChangeDetection()完全に安定した - シグナルフォーム (開発者プレビュー): 新しいシグナルベースのフォーム API
- 改善された効果(): オプションの同期実行、より優れたライフサイクル統合
- 安定したリンクされたシグナル: オーバーライドを伴う派生信号が完全に安定しました
- 実験的なオーサリング形式: コンポーネントを定義するための新しい形式 (.ng ファイル)
- 非推奨の API の削除: Angular 16-17 で非推奨としてマークされた API のクリーンアップ
6. Angular 20 → 21: TypeScript 5.9 およびデフォルトでゾーンレス
Angular 21 は、以前のバージョンのすべての作業を統合したバージョンです。新しいもの
で生成されたプロジェクト ng new 私は デフォルトではゾーンレス、TypeScript
5.9 では、型チェック、開発者のエクスペリエンス、およびパフォーマンスが向上しています。
ランタイムはさらに最適化されます。
更新コマンド
# Aggiorna Angular CLI e Core
ng update @angular/core@21 @angular/cli@21
# Se usi Angular Material
ng update @angular/material@21
# Aggiorna TypeScript a 5.9
npm install typescript@5.9 --save-dev
# Verifica la build
ng build
TypeScript 5.9: Angular の関連ニュース
// 1. Miglioramenti al type narrowing nei template
// TypeScript 5.9 migliora il supporto per il narrowing
// nei blocchi @if dei template Angular
// 2. Import attributes stabili
import data from './config.json' with { type: 'json' };
// 3. Miglioramento delle performance del compiler
// Build più veloci grazie al caching migliorato
// e alla riduzione delle allocazioni di memoria
// 4. Utility types migliorati per i Signals
import { Signal, WritableSignal } from '@angular/core';
// NoInfer<T> previene inferenza indesiderata
function createState<T>(
initial: T,
validator: (value: NoInfer<T>) => boolean
): WritableSignal<T> {
const state = signal(initial);
// ...logica di validazione
return state;
}
Angular 21 の主な機能
- デフォルトではゾーンレス:
ng newZone.js を使用せずにプロジェクトを生成する - TypeScript 5.9: 型チェックの改善による完全なサポート
- 実行時のパフォーマンス: 変更の検出とレンダリングの最適化
- 改善された信号形式: より成熟した完全な API
- 安定した API リソース: 完全に安定した非同期データ読み込み
- NgModule ベースのコードを削除します。 フォームベース API のさらなる非推奨化
7. ng アップデートのステップバイステップ: 完全な手順
管理を含む、バージョン 17 から 21 に移行するための完全な手順を見てみましょう。 破壊的な変更と依存関係の競合。各ステップを完了する必要があり、 次に進む前に確認してください。
#!/bin/bash
# Script di migrazione Angular 17 -> 21
echo "=== STEP 1: Angular 17 -> 18 ==="
ng update @angular/core@18 @angular/cli@18
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 18"
echo "=== STEP 2: Angular 18 -> 19 ==="
ng update @angular/core@19 @angular/cli@19
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 19"
echo "=== STEP 3: Angular 19 -> 20 ==="
ng update @angular/core@20 @angular/cli@20
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 20"
echo "=== STEP 4: Angular 20 -> 21 ==="
ng update @angular/core@21 @angular/cli@21
npm install
ng build
npm test -- --watch=false
git add -A && git commit -m "chore: migrate to Angular 21"
echo "=== Migrazione completata! ==="
ng version
重大な変更の管理
いつ ng update 破壊的な変更に遭遇すると、プロセスは次のように停止します。
エラーメッセージ。ここでは、最も一般的な問題を解決するための戦略を示します。
重大な変更 自治体とソリューション
| バージョン | 重大な変化 | 解決 |
|---|---|---|
| 17→18 | の除去 ViewEngine 残りの API |
Ivy の同等のものに置き換えます |
| 18→19 | standalone: true デフォルトになる |
追加 standalone: false 非スタンドアロンコンポーネントへ |
| 18→19 | 除去 @angular/http 遺産 |
アメリカ合衆国 @angular/common/http |
| 19→20 | 一部の内部サービスのオブザーバブルベースのパターンの非推奨 | 信号ベースの同等のものに移行する |
| 20→21 | TypeScript 5.9が必要です | TypeScript を更新し、型エラーを修正する |
| 20→21 | 非推奨の API を v17 から削除する | Angular 非推奨ガイドを参照してください。 |
ピア依存関係の競合の解決
# Se ng update fallisce per peer dependencies
# Strategia 1: Forza l'aggiornamento
ng update @angular/core@21 @angular/cli@21 --force
# Strategia 2: Aggiorna manualmente le dipendenze in conflitto
npm install @angular/core@21 @angular/cli@21 --legacy-peer-deps
npm install
# Strategia 3: Usa --allow-dirty se hai modifiche non committate
ng update @angular/core@21 --allow-dirty
# Strategia 4: Pulisci e reinstalla da zero
rm -rf node_modules package-lock.json
npm install
# Verifica lo stato delle dipendenze
npm ls @angular/core
8. サードパーティの依存関係の移行
多くの場合、サードパーティの依存関係が主なボトルネックになります。 移住。すべてのライブラリが Angular の新しいバージョンをすぐにサポートするわけではありません。 大幅なアップデートが必要なものもあります。ここでは、最も一般的なライブラリのガイドを示します。
主要なライブラリの互換性マトリックス
| 本棚 | 角度 18 | 角度 19 | 角度 20 | 角度 21 |
|---|---|---|---|---|
| @angular/マテリアル | 18.x | 19.x | 20.x | 21.x |
| @ngrx/ストア | 18.x | 19.x | 20.x | 21.x |
| @angular/fire | 18.x | 19.x | 18.x+ | 19.x+ |
| ng-ブートストラップ | 16.x | 17.x | 18.x | 19.x |
| ngx翻訳 | 15.x | 16.x | 16.x+ | 16.x+ |
| 呼び水 | 17.x | 18.x | 19.x | 19.x+ |
| @ng-icons | 27.x | 28.x | 29.x | 30.x+ |
依存症戦略
# 1. Lista tutte le dipendenze Angular-related
npm ls | grep angular
# 2. Controlla le versioni disponibili
npm view @angular/material versions --json | tail -20
npm view @ngrx/store versions --json | tail -20
# 3. Aggiorna le dipendenze principali
ng update @angular/material@21
ng update @ngrx/store@21
# 4. Per librerie senza ng update schematic
npm install ngx-translate@latest
npm install primeng@latest
# 5. Verifica compatibilità dopo l'aggiornamento
ng build
npm test -- --watch=false
依存関係はまだ更新されていません
サードパーティのライブラリが Angular のターゲット バージョンをまだサポートしていない場合は、次のものがあります。 オプション:
- 待って： ライブラリのリリースを追跡し、その依存関係の移行を延期します。
- 一時フォーク: 必要に応じて、必要最小限の変更を加えてフォークします
- --legacy-peer-deps: ライブラリが動作する場合は競合を無視します (テストで確認してください)。
- 交換する： 互換性のある代替品を評価します。たとえば、から
ngx-translateAngular のネイティブ i18n へ - 貢献する： ライブラリの PR を開いて、新しいバージョンのサポートを追加します
9. 移行後のテスト
各移行手順の後に、アプリケーションが動作することを確認することが重要です 正しく。自動テストはセーフティ ネットですが、移行自体は次のような可能性があります。 既存のテストを中断します。このフェーズに対処する方法は次のとおりです。
テストスイートを実行する
# 1. Esegui tutti gli unit test
npm test -- --watch=false --browsers=ChromeHeadless
# 2. Esegui i test e2e (se presenti)
npm run e2e
# 3. Build di produzione (cattura errori AOT)
ng build --configuration=production
# 4. Avvia il server SSR e verifica manualmente
npm run serve:ssr:portfolio
# 5. Controlla che non ci siano warning di deprecazione
ng build 2>&1 | grep -i "warning\|deprecated"
# 6. Verifica le performance con Lighthouse
npx lighthouse http://localhost:4200 --output=json --output-path=./lighthouse-report.json
壊れたテストの一般的な修正
// PRIMA: TestBed con NgModule-style
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [MyComponent], // deprecato con standalone
imports: [HttpClientTestingModule],
providers: [MyService]
}).compileComponents();
});
// DOPO: TestBed con standalone components
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [MyComponent], // standalone component va in imports
providers: [
provideHttpClientTesting(), // nuovo provider-based testing
MyService
]
}).compileComponents();
});
// PRIMA: fakeAsync con Zone.js
it('should load data', fakeAsync(() => {
component.loadData();
tick(1000);
expect(component.data).toBeTruthy();
}));
// DOPO: async/await senza Zone.js
it('should load data', async () => {
component.loadData();
await fixture.whenStable();
fixture.detectChanges();
expect(component.data()).toBeTruthy(); // signal()
});
移行後に頻繁に発生するテスト エラー
| 間違い | 原因 | 解決 |
|---|---|---|
NullInjectorError: No provider for HttpClient |
HttpClientTestingModule が非推奨になりました | アメリカ合衆国 provideHttpClientTesting() |
Component is not a known element |
スタンドアロンコンポーネントはインポートされません | コンポーネントを追加する imports テストベッドで |
Cannot read property of signal |
シグナルが関数として呼び出されない | 変化 component.value in component.value() |
fakeAsync timer not cleared |
Zone.js が削除されました | に変換 async/await |
Expression has changed |
ゾーンレス変更検出 | アメリカ合衆国 fixture.detectChanges() それぞれの変更の後 |
10. 移行の最終チェックリスト
移行が完了し、何も忘れていないことを確認するには、次の手順に従ってください。 詳細なチェックリストは、移行前、移行中、移行の 3 つのフェーズに分かれています。 移行後。
フェーズ 1: 移行前
- クリーンなリポジトリ: コミットされていない変更はありません
- 専用ブランチが作成されました:
feat/angular-21-migration - グリーン テスト スイート: すべてのテストは現在のバージョンで合格します
- 動作する本番ビルド:
ng buildエラーなく完了しました - Node.js が必要最小限に更新されました (Angular 20/21 の場合は 20.x)
- のバックアップ
package.jsonepackage-lock.json - サードパーティの依存関係とそのバージョンのドキュメント
- 各ターゲット バージョンの重大な変更のレビュー
update.angular.io
フェーズ 2: 移行中
- 一度に 1 つのバージョンを移行します: 17→18→19→20→21
- 各ステップについて:
ng update,npm install,ng build,npm test - 移行が成功するたびにコミットする
- 自動移行図の実行 (制御フロー、スタンドアロンなど)
- 次のステップに進む前に、非推奨の警告を解決してください。
- Angular マテリアルとその他の Angular 依存関係を同じメジャー バージョンにアップグレードする
- AOT コンパイルを確認します。
ng build --configuration=production - ブラウザコンソールに実行時エラーがないか確認してください
フェーズ 3: 移行後
- すべてのテスト (ユニット + e2e) に合格します
- 実稼働ビルドはエラーや警告なしで完了しました
- 動作しているSSR: で確認してください
npm run serve:ssr - 検証済みのパフォーマンス: すべてのカテゴリで Lighthouse スコア ≥ 90
- ビルドログに非推奨の警告が表示されない
- サードパーティの依存関係はすべて互換性があり、最新です
- ゾーンレス変更検出採用（推奨）
- 構造ディレクティブの代わりに最新の制御フロー (@if、@for)
- @Input/@Output デコレータの代わりに信号の入力/出力を行う
- 新しい API の更新されたテスト (provideHttpClientTesting など)
package-lock.json献身的でクリーン- 実稼働前の手動テストのためにステージング環境にデプロイします
シリーズの概要と結論
Angular 17 から 21 への移行は単なるバージョンアップグレードではなく、進化です アプリケーションのアーキテクチャ全体の。旧モデルからの乗り換え Zone.js と NgModules は、新しいシグナルファーストおよびデフォルトでスタンドアロンのパラダイムを表します パフォーマンス、保守性、開発者のエクスペリエンスの点で大幅な向上が見られます。
成功の鍵は 漸進性: 一度に 1 つのバージョンを移行します。 各ステップでテストし、新しい API を段階的に採用します。角度のあるデザインです 自動回路図のおかげで、このプロセスをできるだけ簡単に行うことができます 優れた下位互換性があります。
この記事の重要な概念
- 段階的な移行: 常に一度に 1 つのメジャー バージョン (17→18→19→20→21)
- NG アップデート: 依存関係を更新し、自動回路図を適用するメイン ツール
- 最新の制御フロー: @if、@for、@switch は *ngIf、*ngFor、*ngSwitch を置き換えます
- 信号入力/出力:
input()eoutput()@Input と @Output を置き換えます - スタンドアロンのデフォルト: Angular 19 以降、すべてのコンポーネントはデフォルトでスタンドアロンです
- 安定したゾーンレス: Angular 20 からは Zone.js を安全に削除できます
- TypeScript 5.9: Angular 21 の新機能には TypeScript 5.9 が必要です
- テスト: テストを NgModule スタイルからスタンドアロンに、fakeAsync から async/await にアップグレードします
- 依存関係: Angular マテリアル、NgRx、およびサードパーティのライブラリを同じメジャーに更新します
Modern Angular シリーズの完全な概要
| # | アイテム | メインコンセプト |
|---|---|---|
| 1 | 角度信号 | signal()、computed()、effect() によるきめ細かい応答性 |
| 2 | ゾーンレスの変更検出 | パフォーマンスを向上させるには、Zone.js を削除してください |
| 3 | テンプレート @if、@for、@defer | 最新の制御フローと宣言型遅延読み込み |
| 4 | スタンドアロンコンポーネント | NgModule を使用しないアーキテクチャ、ツリーシェイキング可能 |
| 5 | 信号形式 | シグナルに基づくレスポンシブフォーム |
| 6 | SSR と増分水分補給 | プログレッシブハイドレーションによるサーバーサイドレンダリング |
| 7 | コアウェブバイタル | Google ランキングの LCP、INP、CLS の最適化 |
| 8 | 角度のある PWA | Service Worker を使用したプログレッシブ Web アプリ |
| 9 | 高度な依存関係の注入 | DI ツリーシェイク可能、トークンインジェクション、マルチプロバイダー |
| 10 | Angular 17 から 21 への移行 | 完全なステップバイステップの移行ガイド |
この記事でシリーズは終了です モダンアンギュラー。全員に対応しています リアクティブ プリミティブ (シグナル) からの管理まで、フレームワークの基本的な側面 状態（シグナルフォーム）、レンダリング戦略（SSR、ハイドレーション）から最適化まで パフォーマンス (Core Web Vitals、PWA)、アーキテクチャ (スタンドアロン、高度な DI) から移行まで 練習する。このシリーズが Angular をマスターする上で役立つことを願っています。 よりモダンで高性能な化身です。