3. Angularバージョン9対応(アプリ)¶

3-1. 概要¶

Angularのバージョンアップとサポートは、下記のルールで行われており、Angularで作成したアプリと開発環境は計画的なバージョンアップ作業が必要です。

Summary

1.半年間隔でメジャーバージョンアップ
2.新バージョンをリリース後の半年間、機能拡張を含むアップデートを提供（Activeサポート期間）
3.Activeサポート期間終了後の半年間、重要なパッチのみ提供(LTS:長期サポート期間）

Angularが互換性100％のバージョンアップであればインストール作業のみで済みます。しかし、Angularのメジャーバージョンアップは、APIの廃止に伴う後継 APIへの置換や依存や依存モジュールの差し換えが必要になります。従って、最新機能を維持するには半年間隔、最低限のサポートを維持するには年1回のバージョンアップ作業が必要になります。

3-2. 移行ツール¶

Angularでは、バージョンアップにかかる時間と労力の負担を軽減するため、2つの公式ツールが提供されています。バージョンアップ作業に必要な情報を提供する「Angular Update Guide」とソースコードの変更やパッケージの置換などを実行するAnglar CLIの「updateコマンド」です。

Angular Update Guide

移行元と移行先のバージョンを指定することで、変更が必要な項目の洗い出しを行います。
Angular CLIの「update」コマンド

バージョンアップに必要なコードの変更や依存パッケージの置換を自動で行います。

3-3. 留意点¶

1. バージョンアップ作業は1バージョンごとに分けて行う

バージョンアップは連続したメジャーバージョンで行うことが推奨されています。例えば、バージョン7.x.xから9.x.xに移行する場合、7.x.から8.x.xへの移行、8.x.xから9.x.xへの移行の2回に分けて実施します。下図は、7.0から9.0へのバージョンアップについて、「Angular Update Guide」で調べた結果です。メジャーバージョンの差が2以上あるバージョンアップは推奨しないという警告(Warining)が表示されています。

2. node.jsのサポート期間にも考慮する
node.jsにも同じようにActiveと長期サポート期間があります。Angularのバージョンアップと併せてバージョンアップ計画を検討すると効率的です。

[参考情報] node.jsのサポート期間について

3. node.jsのインストールにnodeバージョン切替ツールを使用する

Angularのバージョンアップに伴い、依存するnode.jsのバージョンを変更することがあります。バージョンアップ後に、バージョンアップ前のプロジェクトと動作比較を行う場合、複数のバージョンのnode.jsを切り替えて移行前の動作を再現する必要があります。再現して比較するたびに、新しいバージョンのnode.jsをアンインストールして古いバージョンのnode.jsをインストールするのは手間が掛かります。そこで、nodeバージョン切替ツール「nvm-windows」を使用します。nvmはNodeVersionManagementの略です。

[参考情報]
ネイティブ Windows での NodeJS の設定

4. サードパーティーのソフトウェアの対応を確認

Angularのバージョンに依存するサードパーティーのソフトウェア(UIライブラリやデータベースなど）を利用している場合、Angularの移行ツールの対象外ですので、影響と必要なアクションを事前に調査します。

3-4. バージョンアップ手順¶

移行元と移行先のメジャー番号バージョンの差が2以上の時は、下記手順を繰り返します。例えば、バージョン7からバージョン9へ移行する場合、メジャーバージョンの差分が、9-7=2　ですので、2回に分けて移行します。

3-4-1. アプリが利用しているAngularのバージョン確認¶

プロジェクトフォルダ内のnpm_modulesフォルダ>@angularフォルダ>coreフォルダ>package.jsonファイルを開き、「version」の値を確認します。

Info

プロジェクトフォルダ直下のpackage.jsonの@angular/coreのバージョンでは実際にインストールされたバージョンと異なる場合があります。

3-4-2. Angular Update Guideによる変更作業の洗い出し¶

・Angular Update Guideをブラウザで開きます。

・該当する値を設定します。ここでは、移行元のAngularのバージョンが7.1、移行先を8.2に設定。Advanced(複雑なアプリ)、マテリアルUIを使用を選択しています。

・出力されたバージョンアップのガイドを確認します。ガイドは、「Before Updating」「During Updating」「After Updating」3つのブロックに分かれています。順に、ng updateコマンドを実行する前、実行時、完了後に行う作業です。ガイドに従い作業を行います。

3-4-3. node.jsバージョン切り替えツールのインストール¶

1) nvmのインストールネイティブ Windows での NodeJS の設定に従って、windows-nvmをインストールします。

2) 利用するnode.jsのバージョン選択前項ガイドの「Before Updating」に記述された条件にあてはまるnote.jsのバージョンを設定します。 nvmで選択できるバージョンの確認は、コマンドプロンプトから下記のコマンドを入力します。

nvm list available

3) nvmを使ってnode.jsのインストールコマンドプロンプトから下記のコマンドを入力します。x.x.xはインストールするnode.jsのバージョン番号です。既にnvmでインストール済のバージョンを指定するときはuseコマンドを使用します。

nvm install x.x.x

3-4-4. Angular CLIのバージョンアップ¶

インストールコマンドプロンプトから下記のコマンドを入力します。x.x.xは移行先のAngular CLIのバージョン番号です。メジャーバージョン番号のみ指定（例えば@angular/cli@8)すると、そのメジャー番号をもつ最新のバージョンがセットされます。なお、ここでは現行のAngular CLIがローカルインストールされていることを前提としていますので、npxコマンドを使用しています。

npx ng update @angular/cli@x.x.x

Tips

ng updateコマンドが失敗するときは、以下のコマンドでAngular CLIを再インストールしてください。

nmp uninstall @angular/cli
npm uninstall -g @angular/cli
npm cache verify
npm install @angular/cli@x.x.x --save-dev

3-4-5. Angularのバージョンアップ¶

コマンドプロンプトから下記のコマンドを入力します。x.x.xは移行先のAngularのバージョン番号です。指定するバージョンは、前項のAngular CLIで指定したものと同一の値を指定します。

npx ng update @angular/core@x.x.x

3-4-6. その他のパッケージのバージョンアップ¶

1. material UIのバージョンアップ

コマンドプロンプトから下記のコマンドを入力します。x.x.xは移行先のmaterial UIのバージョン番号です。基本的に指定するバージョンは、前項のAngular Coreで指定したものと同一の値を指定しますが、該当するバージョンが存在しない場合は、npm info @angular/material versions コマンドで指定するバージョンの候補を表示し、その中から選択します。

npx ng update @angular/material@x.x.x

2. サードパーティーのソフトウェア

必要なものをバージョンアップします。