升级至Angular 5后IE 11报“对象不支持属性或方法”错误

兄弟，我之前也踩过这个坑——Angular 升级后 Chrome 跑的好好的，到 IE11 直接页面崩了，十有八九是polyfills 配置不全的锅，毕竟 IE11 对 ES6+ 新特性的支持实在拉胯。咱们一步步来排查修复：

一、先把核心 polyfills 补全 #

打开你的 polyfills.ts，把以下这些注释掉的 polyfill 全部取消注释（删掉前面的 //），这些是 IE11 运行 Angular 5 必须的基础依赖：

// IE9, IE10 and IE11 requires all of the following polyfills.
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

// IE10 and IE11 requires the following for NgClass support on SVG elements
import 'classlist.js';  // 记得执行 npm install --save classlist.js 安装依赖

// IE10 and IE11 requires the following for the Reflect API.
import 'core-js/es6/reflect';

// 运行时需要 Reflect API 的话必须加这个
import 'core-js/es7/reflect';

// 支持 Angular 动画的话需要这个，IE11 不自带 Web Animations 支持
import 'web-animations-js';  // 执行 npm install --save web-animations-js 安装

注意：标注了需要安装的包，一定要在终端执行对应的 npm install 命令，升级后这些依赖大概率没自动装上。

二、检查 tsconfig.json 编译配置 #

确保你的 tsconfig.json 里把编译目标设为 ES5，IE11 只认 ES5 代码：

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

三、清理缓存重新构建 #

IE11 的缓存简直是顽固分子，有时候改了配置旧缓存还在，导致问题没解决：

• 先执行 npm run clean（如果项目有这个脚本），或者手动删除 dist 文件夹
• 重新构建项目：npm run build
• 打开 IE11 按下 Ctrl+Shift+Delete，清空所有缓存和历史记录，再重新加载页面

四、根据具体错误补漏 #

如果还是报错，打开 IE11 的开发者工具（F12）看控制台的具体错误信息：

• 比如提示 Object doesn't support property or method 'assign'，就补 import 'core-js/es6/object';
• 提示 Promise is undefined，就补 import 'core-js/es6/promise';
  根据错误信息对应添加缺失的 polyfill 就行。

按照上面的步骤来，基本能解决 IE11 无法加载的问题，我当时就是这么搞定的，祝你顺利！

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