🙋‍♀️

Angularのバージョンアップ

2025/01/31に公開

きっかけ

久々にAngularを触ったら v16のままでした。
なぜv16?と謎ですが、1つ1つアップデートしていかないと行けないので、今回はv17→v19まで更新

Angularにはアップデートガイドがあるので、あなたの使用しているバージョンを検索できます。
https://angular.dev/update-guide

バージョン ステータス リリース済み アクティブ終了 LTS 終了
^19.0.0 Active 2024-11-19 2025-05-19 2026-05-19
^18.0.0 LTS 2024-05-22 2024-11-19 2025-11-19
^17.0.0 LTS 2023-11-08 2024-05-08 2025-05-15

Angularバージョンアップ手順

Angular V17にアップデート

npm install @angular/cli@17 @angular/core@17

手順に沿って入力するとエラー表示が出ました。

メッセージ通りコミットしてもエラーが出るので、コミットしないで実行できるオプションを使用しました。

ng update @angular/cli@17 @angular/core@17 --allow-dirty
allow-dirty

リポジトリに変更されたファイルまたは追跡されていないファイルが含まれている場合に更新を許可するかどうか。
https://angular.jp/cli/update

これを入力してもまだエラー

表示通り、--forceを入力しました

ng update @angular/cli@17 @angular/core@17 --allow-dirty --force
force

ピア依存関係のバージョンの不一致を無視します。

ダウンロード成功!

その後、順番に同じ動作を行いました。
1.@angular/cli@17 @angular/core@17.x
2.@angular/cli@18 @angular/core@18
3.@angular/cli@19 @angular/core@19

V18

Angular v18から聞かれるようになった質問

** Optional migrations of package '@angular/cli' **

This package has 1 optional migration that can be executed.
Optional migrations may be skipped and executed after the update process, if preferred.

 Select the migrations that you'd like to run (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ [use-application-builder] Migrate application projects to the new build system. (https://angular.dev/tools/cli/build-system-migration)

パッケージ '@angular/cli' のオプションの移行 **
このパッケージには、実行可能なオプションの移行が 1 つあります。
オプションの移行はスキップして、必要に応じて更新プロセス後に実行できます。
実行する移行を選択します (選択するには <space>、すべてを切り替えるには <a>、選択を反転するには <i>、続行するには <enter> を押します)
❯◉ [use-application-builder] アプリケーション プロジェクトを新しいビルド システムに移行します。(https://angular.dev/tools/cli/build-system-migration)

V19

Angular v19では上記と同じ質問と、下記の質問がありました。

Select the migrations that you'd like to run (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◉ [provide-initializer] Replaces `APP_INITIALIZER`, `ENVIRONMENT_INITIALIZER` & `PLATFORM_INITIALIZER` respectively with `provideAppInitializer`, `provideEnvironmentInitializer` & `providePlatformInitializer`.

実行する移行を選択します (選択するには <space>、すべてを切り替えるには <a>、選択を反転するには <i>、続行するには <enter> を押します)
❯◯ [provide-initializer] APP_INITIALIZERENVIRONMENT_INITIALIZERPLATFORM_INITIALIZER をそれぞれ provideAppInitializerprovideEnvironmentInitializerprovidePlatformInitializer に置き換えます。

リリーススケジュール

細かくリリース予定が出されているので、アップデートを忘れないようにしないとですね。

バージョン 日付
v19.1 Week of 2025-01-13
v19.2 Week of 2025-02-24
v20.0 Week of 2025-05-19

https://angular.jp/reference/releases

Discussion