Angular项目IOS16.1.1设备页面空白问题

IOS设备适配

问题与经历
结语

问题与经历

最近遇到一个IOS16.1.1系统访问H5页面空白的问题，一开始MAC上Safari调试时发现main.js报错unexpected token '{', 看似是对ES6特性不支持；故尝试降级成ES5，发现依旧无法访问。

但是由于项目有两个工程，一个是由Angular写的，一个是由Vue写的，其中Angular项目的页面IOS访问不了，而Vue项目的页面却可以访问，于是开始对比两个页面的main.js，发现Angular中有use strict，而Vue中没有，于是产生了去除Angular中严格模式的想法，但咨询后发现尽量不要这样去修改，导致方向又断了。

后面一天，那晚迷迷糊糊做了个梦，梦到有高人指点，解决了这个问题，结果没想到的是第二天，真有高人指点，说可能是browerlist的问题。

于是检查了两个项目的browerlist，Angular如下：

复制代码

and_chr 137
and_ff 139
and_qq 14.9
and_uc 15.5
android 137
chrome 137
chrome 136
chrome 135
chrome 134
chrome 131
chrome 109
edge 137
edge 136
edge 135
firefox 139
firefox 138
firefox 128
ios_saf 18.5
ios_saf 18.4
ios_saf 18.3
ios_saf 17.6-17.7
ios_saf 16.6-16.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 117
opera 116
safari 18.5
safari 18.4
samsung 28
samsung 27

而Vue项目的browerlist如下：

复制代码

and_chr 138
and_ff 140
and_qq 14.9
and_uc 15.5
android 138
chrome 138
chrome 137
chrome 136
chrome 131
chrome 112
chrome 109
edge 138
edge 137
edge 136
firefox 140
firefox 139
firefox 128
ios_saf 18.5
ios_saf 18.4
ios_saf 18.3
ios_saf 17.6-17.7
ios_saf 16.6-16.7
kaios 3.0-3.1
kaios 2.5
op_mini all
op_mob 80
opera 117
opera 116
safari 18.5
safari 18.4
samsung 28
samsung 27

可以看到其实两个项目都只支持IOS16.6 和 16.7，这个时候我去询问发现出问题的设备系统为IOS16.1.1。于是可以下判断大概率是这里出了问题。于是修改了Angular项目的browerlist支持IOS16以上的系统，终于设备中页面可以看到了，此时悬着的心终于是亖了。

不过还有一个问题是，为什么Vue项目也是相同配置，但是却能够显示页面呢。这询问了AI后回答是

复制代码

与 Vue 工程有相同的覆盖不全问题，但 Angular 的构建链更容易因此崩溃

与 Vue 工程的差异对比:

特性	Angular	Vue	对 iOS 16 的影响
构建工具	Webpack	Vite	Webpack 的转译策略更保守
模块系统	UMD/IIFE	原生 ESM	iOS 16 对 ESM 支持更好
Polyfill 注入	手动 (polyfills.ts)	自动 (plugin-legacy)	Angular 更容易遗漏必要补丁
语法转译策略	Webpack 保守转译 + @angular-devkit	Vite 默认使用现代模式 + @vitejs/plugin-legacy	Vue 对未声明版本会降级到 ES2015，而 Angular 可能因配置冲突生成不兼容代码

关键结论：是否由 browserslist 直接导致？

直接原因：否

两者配置几乎相同（均漏配 iOS 16.0-16.5），但仅 Angular 崩溃，说明根本问题不在 browserslist 本身

Vue 能正常运行得益于：

Vite 的现代模式对未声明版本有更安全的降级策略

ESM 原生支持比 Webpack 的 IIFE 更兼容 iOS 的严格模式
间接原因：是

browserslist 的漏配放大了 Angular 构建链的弱点：

Webpack 在无明确版本指令时，默认生成更高版本的 ES 语法（如箭头函数）

Angular 的 Zone.js 对执行环境更敏感（依赖 globalThis 等新 API）

因此可以肯定browserslist 配置缺陷导致的是Angular CLI 认为不需要为 iOS 16.1.1 降级语法，生成 ES2015+ 代码（如箭头函数、class）。

结语

说来也好笑，其实Angular里的browerlist是copy来的：

复制代码

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

而Vue是通过编译配置解决的，因为Angular项目没办法那么配，虽然最后生成的browerlist没什么区别，但是却导致了这种乌龙事件。