Angular 2项目无法在Safari 5.7.1运行，求技术解决方案

嘿，咱们来搞定你的Angular 2项目在Safari 5.7.1里打不开的问题——这个浏览器版本确实太老了，对ES6+特性支持很差，光加你提到的那些polyfill可能还不够，咱们一步步来排查：

1. 先确认Polyfill的加载顺序 #

这一点很关键！必须保证所有polyfill代码在Angular主代码之前加载。打开你的index.html，检查脚本引入顺序，应该是这样的：

<script src="polyfills.bundle.js"></script>
<script src="vendor.bundle.js"></script>
<script src="main.bundle.js"></script>

如果Angular的代码先跑起来，那些没被polyfill的特性直接就会抛出错误，你之前看到的TypeError很可能就是这个原因。

2. 补充ES5级别的Polyfill #

Safari 5.7.1甚至对部分ES5特性支持都不全，比如Object.defineProperty的某些用法、Function.prototype.bind这些。你需要在polyfills.ts里额外加上这些：

// ES5基础特性补全
import 'core-js/es5/object';
import 'core-js/es5/function';
import 'core-js/es5/array';
import 'core-js/es5/date';
import 'core-js/es5/regexp';

另外，你加的intl polyfill最好带上本地化数据，不然在某些场景下也会出错：

import 'intl';
import 'intl/locale-data/jsonp/en.js'; // 按需添加你需要的语言包

3. 把TypeScript编译目标设为ES5 #

打开tsconfig.json，确保compilerOptions里的target是es5：

{
  "compilerOptions": {
    "target": "es5",
    // 其他配置保持不变
  }
}

这样TypeScript会把所有代码转成ES5语法，减少对浏览器原生ES6支持的依赖，这对老浏览器来说至关重要。

4. 排查第三方库的兼容性 #

如果你的项目用了第三方依赖，有些库可能没做旧浏览器兼容，直接写了ES6代码。可以这么排查：

• 查看package.json里的依赖，有没有标注不支持旧浏览器的库；
• 用webpack-bundle-analyzer分析打包后的文件，找出可能引入ES6代码的模块；
• 要么给这些库单独加polyfill，要么换成兼容旧浏览器的版本。

5. 针对Safari 5.7.1的特定Bug打补丁 #

这个版本的Safari有一些已知的坑，比如Array.prototype.forEach的实现有问题，或者JSON.parse的兼容性bug。你可以在polyfills.ts里加针对性的补丁：

// 修复Safari 5.7.1的forEach兼容问题
if (typeof Array.prototype.forEach !== 'function') {
  Array.prototype.forEach = function(callback, thisArg) {
    for (let i = 0; i < this.length; i++) {
      callback.call(thisArg, this[i], i, this);
    }
  };
}

6. 定位具体错误的根源 #

你提到的TypeError: Type error in script.bundle.js和Assertion failed: (Anonymous function)，可以通过这几步定位：

• 打开Safari的开发者工具，查看错误的完整栈信息，找到具体出错的代码行；
• 如果是生产环境的压缩代码，先关掉代码压缩（在angular.json里把optimization设为false），这样能看到未压缩的代码，更容易找到问题点。

按照这些步骤一步步来，应该能解决Safari 5.7.1里的兼容问题。

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