Angular をアップデートしたら iOS16 で動かなくなった話

はじめに

ある Angular アプリケーションが、一部端末で画面が表示されなくなる不具合が発生した。 アクセスログを解析したところ、 iOS16 のユーザーでエラーが発生していることが判明した。

原因と対応

Angular のバージョンを v15 から v17 にアップデートしたことで、iOS16 のブラウザががサポート対象外になってしまったことが原因だった。 当該アプリケーションでは Angular のデフォルト設定をサポート対象としていたため、Browserslistを、iOS16 をサポートするよう修正することで対応した。

Browserslist

Angular はBrowserslistを使って、サポートブラウザをビルドツールに伝えている。Browserslistは、クエリによって該当するブラウザのリストを取得する。

例えば、0.2% 以上のシェアがあり、メンテナンスが行われているブラウザは次のクエリで取得できる。

> 0.2%, not dead

このサイトでクエリの確認ができる。

クエリはpackage.jsonのbrowserslistとして指定するか、.browserslistrcを作成して記述すると認識される。Angular は、 v15 から.browserslistrcが削除されてオプトインとなり、何も設定しなければ、デフォルトの設定が適用される。

デフォルト設定はng g config browserslistで出力できる。また、公式サイトでも公表されている。

last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

caniuse-lite

Browserslistはクエリを用いて、caniuse-liteから、ブラウザの一覧とそのバージョンを取得している。caniuse-liteはバージョニングされた静的データであるため、バージョンが異なると、Browserslistのクエリで取得される一覧も変わる。

そのため、Angular のバージョンがあがると、依存するcaniuse-liteのバージョンがあがり、デフォルトでBrowserslistに設定されているlast 2 iOS major versionsクエリによって取得できる一覧から、iOS16 が削除されたことにより、サポート対象外となってしまった。

browserslistコマンドでサポート対象のブラウザを確認できる。

まず、@angular/cli@15.2.11はcaniuse-lite@1.0.30001618に依存している。 このバージョンでのサポート対象ブラウザは以下のとおり。

% npx browserslist
chrome 124
chrome 123
edge 124
edge 123
firefox 125
firefox 115
ios_saf 17.5
ios_saf 17.4
ios_saf 17.3
ios_saf 17.2
ios_saf 17.1
ios_saf 17.0
ios_saf 16.6-16.7
ios_saf 16.5
ios_saf 16.4
ios_saf 16.3
ios_saf 16.2
ios_saf 16.1
ios_saf 16.0
safari 17.5
safari 17.4
safari 17.3
safari 17.2
safari 17.1
safari 17.0
safari 16.6
safari 16.5
safari 16.4
safari 16.3
safari 16.2
safari 16.1
safari 16.0

一方、@angular/cli@17.3.11はcaniuse-lite@1.0.30001686に依存している。 このバージョンでのサポート対象ブラウザは以下のとおり。 iOS16 が含まれていないことがわかる。

% npx browserslist
chrome 131
chrome 130
edge 131
edge 130
firefox 133
firefox 128
firefox 115
ios_saf 18.1
ios_saf 18.0
ios_saf 17.6-17.7
ios_saf 17.5
ios_saf 17.4
ios_saf 17.3
ios_saf 17.2
ios_saf 17.1
ios_saf 17.0
safari 18.1
safari 18.0
safari 17.6
safari 17.5
safari 17.4
safari 17.3
safari 17.2
safari 17.1
safari 17.0

Browserslistを修正する

次のように、最新の 3 つのメジャーバージョンをクエリで指定することで、iOS16 をサポート対象に含めることができる。

last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
- last 2 iOS major versions
+ last 3 iOS major versions
Firefox ESR

修正後のbrowserslistコマンドの結果は以下のとおり。

% npx browserslist
chrome 131
chrome 130
edge 131
edge 130
firefox 133
firefox 128
firefox 115
ios_saf 18.1
ios_saf 18.0
ios_saf 17.6-17.7
ios_saf 17.5
ios_saf 17.4
ios_saf 17.3
ios_saf 17.2
ios_saf 17.1
ios_saf 17.0
ios_saf 16.6-16.7
ios_saf 16.5
ios_saf 16.4
ios_saf 16.3
ios_saf 16.2
ios_saf 16.1
ios_saf 16.0
safari 18.1
safari 18.0
safari 17.6
safari 17.5
safari 17.4
safari 17.3
safari 17.2
safari 17.1
safari 17.0

さいごに

現状、Angular のデフォルト設定は、ブラウザの最新バージョンがリリースされるたびに、動作しないバージョンが出てくるリスクがある。以下のような Pull Request も提出されているが、Browserslistで明示的に設定する方が安全だろう。

また、Angular を v19 にアップデートすると、Safari < 15で動かなくなる問題があるため、注意が必要である。