Android 4.x加载Angular 5 SPA出现空白页的问题求助

我太懂这种老浏览器兼容的糟心事了——Android 4.4以下的原生浏览器对ES6+语法支持极差，光开默认polyfills往往不够。结合你已经做的操作，给你几个针对性的排查和修复步骤：

• 检查core-js的版本与导入路径
  不同版本的core-js导入方式差异很大：

  • 如果安装的是core-js@2，你的import 'core-js/es6';和import 'core-js/es7';是有效的，但要确保已经安装了这个版本：npm install core-js@2 --save
  • 如果是core-js@3，则需要改成import 'core-js/stable';（覆盖所有稳定的ES标准polyfill），同时搭配import 'regenerator-runtime/runtime';处理generator函数
    建议锁定core-js@2版本，因为Angular CLI早期版本对它的兼容性更好。

• 确保所有必要的polyfills都已启用
  打开polyfills.ts，除了core-js，还要取消以下关键polyfills的注释并安装对应依赖：

  // 针对classList API的兼容（Android 4.4以下不支持）
  import 'classlist.js';
  
  // 如果使用了动画，需要这个polyfill
  import 'web-animations-js';
  
  // 国际化相关的polyfill（如果项目用到日期/数字格式化）
  import 'intl';
  import 'intl/locale-data/jsonp/en';
  

  对应的安装命令：npm install classlist.js web-animations-js intl --save

• 排查第三方库的未转译问题
  有些第三方依赖可能用了未转译的ES6+语法，老浏览器无法识别。你需要在angular.json的build.options里添加allowedCommonJsDependencies，把这些库列进去：

  "allowedCommonJsDependencies": [
    "lodash", // 举个例子，根据你的实际依赖调整
    "some-other-lib"
  ]
  

  或者如果是更顽固的库，可以在tsconfig.json的compilerOptions里设置"target": "es5"，强制所有代码转译为ES5。

• 用远程调试定位具体报错
  空白页的本质几乎都是代码报错，你可以用Chrome的「远程设备调试」功能连接Android设备：

  1. 打开Chrome浏览器，输入chrome://inspect
  2. 连接你的Android设备（开启USB调试）
  3. 在列表中找到原生浏览器的进程，点击「inspect」查看控制台报错
     比如如果报错Promise is not defined，就说明Promise的polyfill没加载到位，针对性修复即可。

• 补充fetch API的polyfill（如果用到）
  Android 4.4以下原生浏览器不支持fetch，如果你的项目用了它，需要安装whatwg-fetch并导入：

  import 'whatwg-fetch';
  

  安装命令：npm install whatwg-fetch --save

按照这些步骤逐一排查，应该能解决空白页的问题——老浏览器兼容就是要把所有缺失的API都补全，耐心点总能搞定！

内容的提问来源于stack exchange，提问作者Javier Torron Diaz