Angular 15兼容iOS 12官方方案咨询：构建后iOS12页面空白

核心原因 #

iOS 12的Safari浏览器仅支持到ES2018的部分特性，你当前项目的编译目标为ES2022，超出了iOS 12的兼容范围，同时缺少必要的Polyfill补全缺失的JS特性，最终导致页面无法正常加载。

具体修复步骤 #

1. 调整TypeScript编译配置（tsconfig.json）

将编译目标降级到iOS 12支持的ES版本，同时补充兼容配置：

{
  "compilerOptions": {
    "importHelpers": true,
    "target": "ES2018",
    "module": "ESNext",
    "useDefineForClassFields": false,
    "lib": ["ES2018", "dom"],
    "downlevelIteration": true
  }
}

• target: ES2018：匹配iOS 12 Safari的ES支持上限
• downlevelIteration：解决for...of等迭代语法在旧浏览器的兼容问题

2. 配置浏览器兼容列表（.browserslistrc）

在项目根目录的.browserslistrc文件（无则新建）中明确兼容规则：

iOS >= 12
last 2 Chrome versions
last 2 Firefox versions

该配置会告知Angular构建工具针对目标浏览器做代码转译和Polyfill自动注入。

3. 添加必要的Polyfill

iOS 12缺少部分ES2018+ API，需手动补充：

1. 安装core-js Polyfill库：

npm install core-js@3 --save

2. 在src/polyfills.ts中添加以下基础Polyfill（可根据后续报错补充更多）：

// 补全Array特性（如flat、flatMap）
import 'core-js/es/array';
// 补全Promise特性（如finally）
import 'core-js/es/promise';
// 补全Object特性（如fromEntries）
import 'core-js/es/object';
// 补全字符串特性（如trimStart、trimEnd）
import 'core-js/es/string';

4. 验证Angular Material兼容

Angular Material 15的组件兼容依赖正确的ES目标和Polyfill，上述配置调整后大部分组件可正常运行。若仍有组件报错，可通过Safari开发者工具连接iOS设备查看控制台信息，针对性补充缺失的Polyfill。

5. 构建并测试

执行生产构建命令：

ng build

将构建产物部署后在iOS 12设备上测试。若仍白屏，打开Safari控制台查看具体报错，按需补充Polyfill或调整代码。

内容的提问来源于stack exchange，提问作者Astrit Shuli