Angular 14应用在iPad执行ng build后白屏，ng serve正常求助

1. 定位核心问题 #

报错SyntaxError: Unexpected token '?'是关键——生产构建后的代码里出现了Chrome 80、iOS 12 Safari不支持的ES新语法（大概率是可选链?.或空值合并??）。dev模式正常是因为开发构建不会做激进的语法压缩和优化，生产模式的优化流程没做好语法转译。

2. 调整Angular生产构建配置 #

• 先临时关闭buildOptimizer验证是否是优化器导致的转译不彻底，修改angular.json的production配置：

  "configurations": {
    "production": {
      "buildOptimizer": false,
      // 保留其他原有配置
    }
  }
  

• 确保tsconfig.json的target设置为兼容版本，比如es2015：

  "compilerOptions": {
    "target": "es2015",
    // 其他配置不变
  }
  

3. 优化Browserslist规则 #

当前配置里的last 10 Safari major versions可能覆盖了iOS >=12的规则，导致转译目标不明确。修改为明确指定Safari版本：

"browserslist": [
  "Chrome >= 80",
  "last 10 Firefox versions",
  "last 10 Edge major versions",
  "Safari >= 12",
  "iOS >= 12",
  "Firefox ESR"
]

执行npx browserslist命令，确认输出包含你的目标浏览器（Chrome 80、iOS 12 Safari）。

4. 强制转译第三方依赖 #

有些第三方包的代码可能没做向下兼容转译，需要强制Angular转译这些依赖。可以通过自定义Webpack配置实现：

1. 安装依赖：npm install @angular-builders/custom-webpack babel-loader @babel/preset-env --save-dev
2. 创建extra-webpack.config.js文件：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           // 把需要转译的包名加在(?!(包1|包2)\/)里
           exclude: /node_modules\/(?!(lodash-es|其他问题包)\/)/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env']
             }
           }
         }
       ]
     }
   };
   

3. 修改angular.json的build配置，使用自定义Webpack构建器：

   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./extra-webpack.config.js"
       },
       // 其他原有配置不变
     }
   }
   

5. 验证转译结果 #

构建后打开生成的scripts.js，搜索?.或??，如果还有这些语法，说明转译配置没生效，需要检查Babel规则或Angular的转译流程。

6. 处理Bootstrap CSS警告 #

:lang(en)的警告是旧浏览器不支持该伪类，不影响JS执行但可以解决：要么修改Bootstrap的引入方式，只引入需要的组件；要么自定义CSS覆盖这个规则。

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