Angular 4.4.5 だったアプリを ng update で 6.0.3 にバージョンアップした

Angular 6 からの新機能で、バージョンアップ時のマイグレーション作業を自動化してくれる ng update コマンドがある。今回はコレを使って、拙作の Angular Utilities を Angular 6 にバージョンアップしてみた。

コマンドに合わせて、公式サイトに Update Guide なるページが登場している。コレは便利。

• Angular Update Guide

以下のように設定した。

• Angular Version : 4.4 to 6.0
• App Complexity : Basic
• ngUpgrade : I use ngUpgrade
• Package Manager : npm

npm の環境は以下のとおり。

$ node -v
v8.11.2

$ npm -v
5.6.0

Update Guide に従って叩いたコマンドは以下のとおり。

# Angular CLI をアップデート (本記事執筆時点の最新版である v6.0.7 にした)
$ npm i -g @angular/cli@6.0.7
$ npm i -D @angular/cli@6.0.7
$ ng update @angular/cli

# @angular/core のアップデートをしようとしたらバージョン不適合というエラーが出たので、
# それぞれ指摘されたパッケージをバージョンアップしたり新たに入れたりした
$ npm i -S @swimlane/ngx-dnd@4.0.2
$ npm i -D codelyzer@4.3.0
$ npm i -D @angular-devkit/schematics
$ ng update @angular/core

# tsconfig.json の日本語コメントが全部数値参照か何かに変換されて狂っていたのでコレだけ元に戻した
# allowJS: false かつ checkJS: true なのがダメと言われたので、checkJs を false にした

# 使ってなかったので不要だった・変化なし
$ ng update @angular/material

# 問題なかったので変化なし
$ npm install -g rxjs-tslint
$ rxjs-5-to-6-migrate -p src/tsconfig.app.json

# 問題なかったので変化なし
$ ng update

これらの操作で、以下のファイルに変更が入った。

• package.json (当たり前)
• tsconfig.json (何か文字化けしたので元に戻し、checkJs の指定のみ手修正)
• karma.conf.js
• .angular-cli.json → angular.json にリネーム・更新
• src/tsconfig.spec.json (files に polyfills.ts が追加された)

実装コード側は大したことやってなかったので変更なし。正常に動作するようになったっぽい。楽勝〜！