lacolaco

Google Developers Expert for Angular / 技術的なことや技術的じゃないことを書きます

Angular CLI v1.7からv6.0へのマイグレーションについて (for v6.0.0-rc.2)

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 ファイルが存在する状態

移行ステップ

1. プロジェクトローカルのAngular CLIのバージョンを更新する

グローバルではなく、プロジェクトローカルのAngular CLIをv6.0系に更新します。 yarnであれば次のコマンドで更新します。

yarn add --dev @angular/cli@^6.0.0-rc.2

diffはこのようになります。

github.com

この時点ではプロジェクトローカルの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.3

diffはこのようになります。

github.com

このコマンドを一度実行すれば、以降はAngular CLI v6による開発をおこなえるようになります。

注意

  • RC.2時点では、ng update後のパッケージインストールがnpmになります。

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