変更点

Updating to Angular version 9にいろいろ書いてあります

非推奨

削除された非推奨API

自動でマイグレーションされるもの

バージョンアップ手順

Angular Update Guideにアップデート方法が記載されているため、手順に沿ってアップデートします。

バージョン8の最新版へのアップデート

ng update @angular/core@8 @angular/cli@8

Typescript3.7へのアップデート

Angular9ではTypescript3.7以上が必要なため、Typescriptもアップデートします

npm install typescript@latest

※この記事の執筆時点では3.7.5が最新でした

Angular9へのアップデート

ng update @angular/core @angular/cli

→Automated Migrations for Version 9に書いてある内容が自動で変更されます

Multiple Projectゃ複数ライブラリを並列ビルドしている場合はngccコマンドが必要

multi project構成のAngularプロジェクトでnpm-run-allやconcurrentlyを利用して並列ビルドしている場合、ERROR in ngcc is already running at processのようなエラーが出てしまい、1つのプロジェクトしかビルドできません。

これを回避するために、ビルド前にngccでコンパイルしておきます。
参考：https://angular.io/guide/ivy#speeding-up-ngcc-compilation

package.json

"scripts": {
  ・・・
  "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"

余談（PrimeNGについて）

UIフレームワークのPrimeNGもAngular9に対応したバージョンが出ています。
（執筆時点では9.0.0-rc.4）

PrimeNGのV8はIvyに対応しておらず、Angularだけv9にアップデートするとエラーになってしまいます。
そのため、Angular9に上げるならPrimeNGも一緒にアップデートする必要があります。

ただ、こいつが地味に癖があったので、メモっておきます

`primeng/common`ディレクトリがなくなった

コンポーネント以外のクラス（ServiceやMenuItem等）はcommon下にあったのですが、v9からprimeng/api下に移動されていました。
これにより、importのパスを変更する必要があり、ほぼ全画面の修正が必要となりました。。

Stepsの挙動がおかしくなった

これは私の環境が悪いのか、各ステップアイテムにui-steps-itemが付与されないという現象が起きました。。
これにより、CSSが適用されずに画面が崩れてしまいました。

とりあえず、Stepsに渡すMenuItemのstyleClassで{'ui-steps-item':true}を指定することで回避しました。

最後に

無事にAngular9へのアップデートができました。
今回は何といってもIvyでしょう！

気になる効果ですが、ng build --prodで生成されるmain.jsのサイズが450KB→370KBくらいまで小さくなりました。（サーバーでgzipに圧縮して返した状態のサイズです）

初期表示時の全体サイズも2.6MB→2.0MBと、600KBも削減できました！！
Ivyすごい！

ちなみに、今回の手順では@angular/pwaや@angular/cdkは自動でアップデートされなかったため、個別にアップデートする必要がありそうです。

Angular9が正式にリリースされたので、アップデートしてみた

変更点

非推奨