Angularのバージョンアップ
きっかけ
久々にAngularを触ったら v16のままでした。
なぜv16?と謎ですが、1つ1つアップデートしていかないと行けないので、今回はv17→v19まで更新
Angularにはアップデートガイドがあるので、あなたの使用しているバージョンを検索できます。
バージョン | ステータス | リリース済み | アクティブ終了 | 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
リポジトリに変更されたファイルまたは追跡されていないファイルが含まれている場合に更新を許可するかどうか。
これを入力してもまだエラー
表示通り、--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_INITIALIZER
、ENVIRONMENT_INITIALIZER
、PLATFORM_INITIALIZER
をそれぞれ provideAppInitializer
、provideEnvironmentInitializer
、providePlatformInitializer
に置き換えます。
リリーススケジュール
細かくリリース予定が出されているので、アップデートを忘れないようにしないとですね。
バージョン | 日付 |
---|---|
v19.1 | Week of 2025-01-13 |
v19.2 | Week of 2025-02-24 |
v20.0 | Week of 2025-05-19 |
Discussion