2018-04-09

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

#angular #angular-cli
This post is possibly out of date.

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 はこのようになります。

この時点ではプロジェクトローカルの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 はこのようになります。

このコマンドを一度実行すれば、以降は 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
このエントリーをはてなブックマークに追加
comments powered by Disqus