本日バージョン6がリリースされたので、さっそく個人プロジェクトのAngularをアップデートしてみました。
この記事では、Angular CLI v6で追加された ng update コマンドを利用してアップデートを行う手順を紹介します。
記事での解説は、バージョン5.1のAngularプロジェクトをバージョン6にアップデートする手順になります。
事前に公式で用意されているツールを使うとアップデート手順を確認できます。
https://update.angular.io/
プロジェクトの現在のバージョンに応じたアップデート方法を確認できるのでとても便利です。
Angular CLI アップデート
はじめにグローバルのAngular CLIをアップデートします。
$ npm uninstall -g @angular/cli $ npm cache verify $ npm install -g @angular/cli@latest
（node v5以上だと、npm cache clean ではなく npm cache verify）
そして次にプロジェクト側（ローカル）のAngular CLIをアップデートします。
$ npm install @angular/cli@latest
Angular 6からは、CLIの設定ファイルが.angular-cli.json から angular.json へ変更されています。
そこで、CLI v6 から利用できるng update を利用できる@angular/cliに対して実行します。
※ng update はパッケージ間の依存関係のチェックや適切なマイグレーションを行ってくれます。
$ ng update @angular/cli
.angular-cli.json が削除され、angular.json が自動生成されます。
Angular本体のアップデート
次にAngular本体のアップデートを行います。
ng update を利用して本体もアップデートします。
$ ng update @angular/core
※ここでエラーが出る場合は記事の最後にあるおまけも参照してください。
続いて @angular/material のアップデートを行います。
$ ng update @angular/material
次にangularfire2などのAngularに依存しているライブラリのアップデートを行います。
ng update や他のパッケージマネージャで依存関係チェックし、手動でアップデートします。
さいごにRxJS6で非推奨になった機能を rxjs-tslint で削除します。
$ npm install -g rxjs-tslint $ rxjs-5-to-6-migrate -p src/tsconfig.app.json
上記の rxjs-5-to-6-migrate コマンドを行うと、rxjs-tslintがプロジェクト内のrxjsのコードを検出して自動で書き換えてくれます。
RxJSのバージョンの違いはこちらを参考にしてください。
RxJS v5.x to v6 Update Guide
そして、RxJSの移行が完了したら rxjs-compat を削除します。
（updateの際に一緒にインストールされるRxJSのバージョン間の差分を埋めるpolyfillライブラリ。）
$ npm uninstall rxjs-compat
簡単ですが、アップデート手順は以上です。
おまけ
その1：@angular/coreがアップデートできない
@angular/coreをアップデートする際に、angularfire2 を利用していたためアップデートが行なえませんでした。
Package "angularfire2" has an incompatible peer dependency to "rxjs" (requires "^5.5.2", would install "6.1.0"). Incompatible peer dependencies found. See above.
angularfire2をアンインストールしてみると、今度はtypescriptのバージョンでアップデートできず。
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=2.7.2 <2.8", would install "2.4.2") Incompatible peer dependencies found. See above.
仕方がないので、ng update に --force オプションをつけて強制アップデートを行いました。
$ ng update @angular/core --force [feature/update-to-angular6 ~/Work/sites/project]
Updating package.json with dependency zone.js @ "0.8.26" (was "0.8.18")...
Updating package.json with dependency rxjs @ "6.1.0" (was "5.5.5")...
Updating package.json with dependency @angular/forms @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/compiler @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/language-service @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/compiler-cli @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/common @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/core @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/platform-browser @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/router @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/animations @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/http @ "6.0.0" (was "5.1.0")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "6.0.0" (was "5.1.0")...
アップデートが実行されました。
その2：src/favicon.ico が無いと怒られる。
fs.js:948 binding.stat(pathModule._makeLong(path)); ^ Error: ENOENT: no such file or directory, stat '/Users/yuhiisk/Work/sites/project/src/favicon.ico'
faviconファイルを置いたら解決しました。
賢くなってます。