Angular9、Ionic5のリリースが近づいてきました。どちらもScheduledからは遅延しておりますが、この開発状況をみているとAngular9は2月、Ionic5は3-4月ぐらいでしょうか。どちらも大きなアップデートが予定されています。

本記事は自己責任で行ってください

予定されているアップデートの概要

Angular9

デフォルトレンダリングエンジンがIvyになります。少し古い記事ですが、こちらをご覧ください。

Angularの次世代ビューエンジン「Ivy」とは何か？
https://logmi.jp/tech/articles/302246

Ionic5

Ionicは主にiOS13のデザインまわりの変更が予定されています。カードモーダルであったり、以下のようなヘッダーの拡張、セグメントボタンのデザイン変更が入ります。具体的に知りたい方はマイルストーンをご覧ください。

アイコンが刷新されたりと、v4からより洗練されたUIデザインになります。またバグフィックスやバンドルサイズの縮小なども行われます。

さぁ、アップデートに備えよう

私は、今のところ3つのプロダクションで、Angular9-rc.8とIonic4.11.7での検証が終了してリリースを完了しています。Angular9のリリースがずれ込んだ理由のひとつが「メジャーリリースは年末年始を避ける」だったことを思うと、Angular9は本番利用するのも十分ありだと思います。Ionic5はアイコンまわりがまだ完了していないのでもうちょっと待った方が無難です。

ということで、プロジェクトを Angular9-rc.8 と Ionic4.11.7 にあげるための手順を案内します。

`@ionic/angular@4.7.1` 未満を利用の場合

Ionic 4で4.7.1だったと思うのですが、依存するAngularパッケージが7から8にアップデートされています。また、依存関係がややこしいので、それぞれのバージョンを一度固定化して中継ぎとしてアップデートする必要があります。

$ npm i  @ionic/angular@4.7.1 @ionic/angular-toolkit@2.0.0 -D
$ npm i @angular-devkit/architect@0.801.2 @angular-devkit/build-angular@0.801.2 @angular-devkit/core@8.1.3 @angular-devkit/schematics@8.1.3 @angular/cli@8.1.3 @angular/compiler@8.1.3 @angular/compiler-cli@8.1.3

(場合によってはここでnode_moduleを削除しないといけないかも)

$ npx ng update @angular/core@8.1.3 @angular/cli@8.1.3

アップデート後、一旦これで問題なく起動するか確認してください。

`angular.json` で `workspace-schema.json` を読み込んでる場合

Ionic 4.8.0未満ぐらいまでだったと思うのですが、スターターテンプレートでは以下のような設定になっています。

angular.json で workspace-schema.json読み込み（2行目）
tsconfig.app.json が src フォルダの中にある

こちらテンプレート構造が変わっているので変更する必要があります。

angular.json を現行版に入れ替え
src/tsconfig.app.json をトップディレクトリに移動して現行版と差し替え
src/tsconfig.spec.json をトップディレクトリに移動して現行版と差し替え
e2e/tsconfig.e2e.json を e2e/tsconfig.json に移動して差し替え
tsconfig.json を現行版に差し替え
tslint.json を現行版に差し替え

やったことはこれぐらいだったと思います。完了したら、まずAngularとIonicを現行版の最新までアップデートしましょう。

$ npm i @ionic/angular@latest @ionic/angular-toolkit@latest
$ ng update @angular/core @angular/cli

@angular/core と @angular/cli を ng update コマンドであげておくと、Angularのバージョンに関する問題は大体自動的にあげてくれます。あとは気になるファイルを適当に最新版にしていってください。

また、これが完了したら無事起動するか確認するようにしてください。

Zone.jsのハンドリングを行う

Ionic with Zone.jsで紹介されていますが、現行バージョンだと変更検知が重複して実行されますのでハンドリングを行います。公式のスターターテンプレートでも対応がされていますので、そちらを反映します。

src/zone-flags.ts を用意する（ファイル内容）
polyfills.ts を現行版に更新する

特に polyfills.ts は昔から比べると大きく変更されていますので、一度最新版の見直しを行うことをおすすめします。

`Angular9-rc.8` にする（自己責任）

$ ng update @angular/core @angular/cli --next

を実行してください。次に、 src/main.ts に以下の一行を書き足します。

main.ts

+ import '@angular/compiler';

動作確認は私の環境ではできていますが、あくまで未リリース版なので自己責任で作業ください。あと、NetlifyなどのCI環境ではキャッシュを削除しないとビルドできないかもしれません。

まとめ

IonicもAngularもどんどんよくなっていっていますので、ぜひ2020年は最新版をキャッチアップしつづけてプロダクトリリースしてください！

それではまた！

おまけ

うまくいったそうです。

Ionic/Angular@4のアプリを最新にするための手順