NX Monorepo构建的Angular站点iOS及Mac Safari无法访问问题

问题现象 #

使用NX monorepo构建的Angular 16应用，访问情况如下：

• Windows系统：所有浏览器正常访问
• Android移动端：所有浏览器正常访问
• Mac系统：仅Chrome可访问，Safari无法加载
• iPad/iOS移动端：所有浏览器均无法访问

在应用模块添加日志后，Mac和iOS的所有浏览器均输出<app-root> not found信息。

环境配置 #

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

ng version信息 #

Angular CLI: 16.1.4
Node: 19.8.1 (Unsupported)
Package Manager: npm 9.6.2
OS: win32 x64

Angular: 16.1.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, platform-browser
... platform-browser-dynamic, pwa, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1601.4
@angular-devkit/build-angular   16.1.4
@angular-devkit/core            16.1.4
@angular-devkit/schematics      16.1.4
@schematics/angular             16.1.4
rxjs                            7.8.1
typescript                      5.1.6

解决方案 #

1. 调整TypeScript编译目标与Lib配置 #

Angular 16默认编译目标为ES2022，部分Safari/iOS版本对ES2022语法支持不完善，导致代码无法执行、Angular无法完成引导。修改tsconfig.json：

"compilerOptions": {
  "target": "ES2020",
  "lib": ["ES2020", "DOM", "DOM.Iterable"],
  // 其他配置保持默认
}

2. 明确Angular构建的浏览器兼容性目标 #

确保构建时应用browserslist配置，或显式指定编译目标：

• 生产构建添加参数：ng build --configuration production --target=es2020
• 或在angular.json的build配置中补充：

  "build": {
    "options": {
      "target": "es2020"
    }
  }
  

3. 修复Zone.js Safari兼容性问题 #

Safari对Zone.js部分API支持有缺陷，添加专用补丁：
在src/polyfills.ts中引入：

import 'zone.js/plugins/zone-patch-safari';

4. 更换Node.js为LTS版本 #

当前使用的Node 19是非官方支持版本，可能引发构建兼容性异常。换成Node 18.x LTS版本，执行以下步骤：

1. 卸载当前Node版本
2. 安装Node 18.x LTS
3. 删除node_modules和package-lock.json
4. 重新执行npm install后构建项目

5. 校验NX monorepo构建配置 #

检查项目project.json中的build配置，确保未覆盖browserslist或编译目标设置，确认构建逻辑继承了Angular默认的兼容性处理。

6. 检查index.html结构 #

确认index.html中存在<app-root></app-root>标签，且脚本加载顺序正确，避免因defer或async导致Angular脚本执行时DOM未就绪。

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