Angular フレームワークの v6.0.0 リリースにあわせ、Angular CLI も v1.7 系から v6.0 へメジャーアップデートをおこなう予定です。 この記事では Angular CLI v1.7 系で作成した開発環境から v6.0 系の開発環境へマイグレーションする方法を解説します。
この記事は安定版リリース前の RC バージョンを使用しています。
前提
次のような開発環境を想定しています。
- グローバルに Angular CLI v1.7 系がインストールされている状態
-
ng newが可能な状態
-
- Angular CLI v1.7 系に依存した状態のプロジェクトが存在する状態
- package.json の
@angular/cliが v1.7 系、かつ.angular-cli.jsonファイルが存在する状態
- package.json の
移行ステップ
1. プロジェクトローカルの Angular CLI のバージョンを更新する
グローバルではなく、プロジェクトローカルの Angular CLI を v6.0 系に更新します。 yarn であれば次のコマンドで更新します。
yarn add --dev @angular/cli@^6.0.0-rc.2diff はこのようになります。
この時点ではプロジェクトローカルのngコマンドがアップデートされただけで、プロジェクトのマイグレーションは完了していません。 次のステップで、ng buildなどのコマンドが使用可能な状態にプロジェクトをマイグレーションします。
2. 各種設定ファイルをマイグレーションする
Angular CLI v1.7 から v6.0 へのアップデートのうち、最大の変更は.angular-cli.jsonファイルからangular.jsonファイルへの移行です。 これまで Angular CLI の各種設定を記述していた.angular-cli.jsonファイルは、名前だけでなく内部の JSON 構造も互換性のない新しいangular.jsonに変わります。
とはいえ今までの設定をすべて書き直す必要はなく、Angular CLI v6 には古い形式の.angular-cli.jsonからangular.jsonベースのプロジェクトに自動でマイグレーションしてくれる機能があります。 Angular CLI v1.7.3 のプロジェクトをマイグレーションするには、次のようにコマンドを実行します。
ng update @angular/cli --migrate-only --from=1.7.3diff はこのようになります。
このコマンドを一度実行すれば、以降は Angular CLI v6 による開発をおこなえるようになります。
注意
- RC.2 時点では、
ng update後のパッケージインストールが npm になります。- グローバルの
packageManager設定はマイグレーションされないため。
- グローバルの
TL;DR
- まずプロジェクトローカルの Angular CLI をアップデートする
-
yarn add --dev @angular/cli@^6.0.0-rc.2
-
-
ng updateコマンドでプロジェクトを v6 用にマイグレーションする-
ng update @angular/cli --migrate-only --from=1.7.3
-