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

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

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

# 予定されているアップデートの概要
## Angular9
デフォルトレンダリングエンジンがIvyになります。少し古い記事ですが、こちらをご覧ください。


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

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

https://github.com/ionic-team/ionic/milestone/69?closed=1

アイコンが刷新されたりと、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` を [現行版](https://github.com/ionic-team/starters/blob/master/angular/base/angular.json) に入れ替え
- `src/tsconfig.app.json` をトップディレクトリに移動して [現行版](https://github.com/ionic-team/starters/blob/master/angular/base/tsconfig.json) と差し替え
- `src/tsconfig.spec.json` をトップディレクトリに移動して [現行版](https://github.com/ionic-team/starters/blob/master/angular/base/tsconfig.spec.json) と差し替え
- `e2e/tsconfig.e2e.json` を [`e2e/tsconfig.json`](https://github.com/ionic-team/starters/blob/master/angular/base/e2e/tsconfig.json) に移動して差し替え
- `tsconfig.json` を [現行版](https://github.com/ionic-team/starters/blob/master/angular/base/tsconfig.json) に差し替え
- `tslint.json` を[現行版](https://github.com/ionic-team/starters/blob/master/angular/base/tslint.json) に差し替え

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

```bash
$ 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](https://qiita.com/Jialipassion/items/71fde9031e9a45ea1689)で紹介されていますが、現行バージョンだと変更検知が重複して実行されますのでハンドリングを行います。公式のスターターテンプレートでも対応がされていますので、そちらを反映します。

- `src/zone-flags.ts` を用意する（ [ファイル内容](https://github.com/ionic-team/starters/blob/master/angular/base/src/zone-flags.ts) ）
- `polyfills.ts` を [現行版](https://github.com/ionic-team/starters/blob/master/angular/base/src/polyfills.ts) に更新する

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

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

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

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

```main.ts
+ import '@angular/compiler';
```

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

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

それではまた！

# おまけ
うまくいったそうです。

https://twitter.com/scrpgil/status/1217478677346181121