【Angular】ng updateを使ったv6へのアップデート手順

【Angular】ng updateを使ったv6へのアップデート手順

本日バージョン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ファイルを置いたら解決しました。
賢くなってます。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.