Angular 5搭配polyfills.ts在Safari中运行异常：'undefined' is not a function

这种Safari专属的类型错误我碰到过好多次，结合你的场景（AOT编译、其他浏览器正常运行），大概率是ES6+特性的polyfill不全或者编译目标设置不对导致的，给你几个实用的排查和解决方向：

1. 补全polyfills.ts中的关键polyfill #

Safari（尤其是旧版本）对ES6+的部分特性支持滞后，比如Array.prototype.find、Object.entries、Promise.allSettled这些，即使你觉得polyfills配置完成了，可能还是漏了某些细项。建议直接在polyfills.ts顶部添加全量的核心polyfill：

// 覆盖大部分ES6+的稳定特性
import 'core-js/stable';
// 支持async/await这类生成器函数
import 'regenerator-runtime/runtime';

如果不想全量导入，也可以根据报错的具体函数针对性添加，比如如果是数组相关的错误，就加：

import 'core-js/es/array';

如果是对象相关的，加：

import 'core-js/es/object';

2. 调整编译目标为ES5 #

AOT编译时如果目标版本设得太高（比如ES6+），Safari无法识别部分语法。检查两个配置文件：

• tsconfig.json：确保compilerOptions.target设置为es5

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

• angular.json：在build.options里也指定target为es5

  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "target": "es5",
      // 其他配置不变...
    }
  }
  

修改后重启ng serve --aot，让编译生效。

3. 排查第三方库的转译问题 #

如果你的应用依赖了第三方npm包，有些库可能是用ES6+语法编写且未转译为ES5，Safari会无法解析这类代码。你可以：

• 在angular.json的build.options.allowedCommonJsDependencies中添加这些库，允许Angular转译它们：

  "allowedCommonJsDependencies": [
    "你的第三方库名称"
  ]
  

• 或者检查该库是否有ES5版本的分发包，优先安装或导入ES5版本。

4. 定位具体报错函数 #

如果上面的方法都没解决，打开Safari的开发者工具（快捷键Option + Command + I），查看报错的调用栈，找到i(d)对应的实际函数是什么。比如可能是你代码中某个箭头函数被错误编译，或者某个依赖库中的特定方法缺失polyfill，然后针对性补充即可。

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