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/[email protected] 未満を利用の場合

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

$ npm i  @ionic/[email protected] @ionic/[email protected] -D
$ npm i @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular-devkit/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected]

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

$ npx ng update @angular/[email protected] @angular/[email protected]

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

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 に以下の一行を書き足します。

+ import '@angular/compiler';

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

まとめ

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

それではまた！

おまけ

うまくいったそうです。