はじめに
Angularのリリーススパンは6ヶ月で（メジャーバージョンが上がる）、アクティブなその期間を過ぎると、今度は1年間LTSとしてリリースが継続されるってことになっているので、18ヶ月はサポート内ということになりましょうか。
18ヶ月ってこの世界では割と長いのでそのままでもいいかって思ったりもするのですけど、割と3年は使う（予算を組む予定がある）みたいな案件も多くて少し微妙なところ。とはいえまぁ、2年になったところで3年には太刀打ちできないのですけど。あと、基本的に辞めたがりなので、2年だ、3年だってそんな先に居るはずがないので、後任の方の為にもできる限り新しい方がよかろうと。まぁ、自分で作った5年前のやつを作り直した気がしますけど（
だからまぁ、できる限りメジャーバージョンについて行こうかなって思っていて、できる限りサポート切れを後倒しにしたいなと、大きな変更が入って大変な目に合わないならやっておくよと。
作業にかかるその前に
まずは概要やら変更点やら手順やらを確認しておくとよいでしょう。Angular公式のガイドアプリがあるので、各バージョンを入力してどんな具合か見ておきます。基本的にはメジャー番号飛ばしは推奨されていませんが、結果としてちゃんとでますよ。
追記: 2020/11/13
上記のページ、日本語翻訳版も登場しました。
現在のバージョンの最新に
基本的には上記サイトにあるようにやればいいのですけど、私は一応上げる前のバージョンの最新版にしてから行うようにしています。
ng update @angular/core@9 @angular/cli@9
各パッケージの後ろの@9の数字の部分がバージョン番号ですね。一応この段階でもビルド等が通るか確認した方が良いかもしれないですねー、ボクは確認してます。
最新バージョンへ
いよいよメジャーアップグレードとなるわけですが、ng updateコマンドは設定ファイル等の記述の変更や、コード中の機械的な変更であれば自動的にやってくれますので、npmとかyarnとか直でやってもいいですが、是非活用しましょう。というかこれ以外非推奨です。
ng update @angular/core @angular/cli
** Executing migrations of package '@angular/cli' ** ❯ Update Browserslist configuration file name to '.browserslistrc' from deprecated 'browserslist'. RENAME browserslist => .browserslistrc Migration completed. ❯ Update tslint to version 6 and adjust rules to maintain existing behavior. UPDATE tslint.json (3241 bytes) Migration completed.
一例をあげますが適当にごにょごにょMigrateしてくれます。やった！
これでbuildやテストがすんなり通れば終了ですが、そうでない場合はそうでない場合の対応をしましょう。
日頃のアップデート
マイナーバージョンアップはちょいちょい行われるので、こちらにもついて行きたいところです。その際にもng updateコマンドを使うと便利です。
tac@yuki arts-client % npx ng update The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via npm. Installed packages for tooling via npm. Using package manager: 'npm' Collecting installed dependencies... Found 38 dependencies. We analyzed your package.json, there are some packages to update: Name Version Command to update ---------------------------------------------------------------------------------- @angular/cli 9.1.12 -> 10.0.5 ng update @angular/cli @angular/core 9.1.12 -> 10.0.7 ng update @angular/core rxjs 6.5.5 -> 6.6.2 ng update rxjs
先日アップデートを行ったときのものですが、ng updateだけを実行すると利用可能なアップデートが表示されます。たまに実行して、表示されたコマンドを実行するとよいでしょう。
yarnとの関係
ng updateコマンドはnpmを利用するので、他のパッケージやらなんやらをyarnで管理していると相性悪いです。というか私、割とyarn派なのですけど、手軽だし。必要に応じてyarn installを実行して備えましょう。少しだけ余計に時間がかかりますが、二度手間感半端ないですが。
まぁ、別にこちらもnpmで管理してもいいかなーって気がしてきてます。ng updateに対応しているパッケージも増えてきているので、そうするとこちらの方が劣勢になりますよね。
さいごに
少し前までは割と大きな変更も多くてちょっと大変だったこともありましたが、最近ではそんなこともなくて簡単に、気軽に行えています。前のバージョンで固定もありっちゃありですが、対外的にもいろいろありますから新しいのにするのもいいかも知れませんよ。