Angular2应用在IE11运行时vendor.bundle.js报错求助

这种问题在IE11里太常见了——毕竟IE11对ES6+语法的支持非常有限，而Angular 2及依赖库很多默认用了现代JS特性。我来给你一步步拆解排查方案：

1. 补全IE11必需的Polyfills #

Angular要在IE11跑起来，必须加载对应的polyfill来填补API缺口。打开你的src/polyfills.ts，确保以下导入没有被注释掉（如果没有就加上）：

// 基础ES6 API polyfill
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';

// Zone.js及IE补丁
import 'zone.js/dist/zone';
import 'zone.js/dist/zone-patch-ie';

如果还没装依赖，执行npm install core-js zone.js --save安装。

2. 确保TypeScript编译目标是ES5 #

IE11不认识ES6+语法，所以必须把TS代码编译成ES5。打开tsconfig.json，检查这两个配置：

{
  "compilerOptions": {
    "target": "es5", // 必须设为es5
    "lib": ["es2015", "dom"], // 包含ES2015和DOM类型定义
    // 其他配置保持不变
  }
}

3. 配置构建工具转译第三方依赖 #

很多时候报错来自node_modules里的第三方库——它们可能用了ES6语法，但Angular CLI默认不会转译这些库。如果用Angular CLI，修改angular.json的build配置：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他配置...
    "allowedCommonJsDependencies": [
      "rxjs", // 举个例子，根据你的实际依赖添加
      "lodash"
    ]
  },
  "configurations": {
    "production": {
      // 生产环境也要指定target为es5
      "target": "es5"
    },
    "development": {
      "target": "es5"
    }
  }
}

如果是自定义Webpack配置，要确保ts-loader或babel-loader把node_modules中需要转译的库包含进来（注意不要转译所有库，否则会拖慢构建速度）。

4. 精准定位eval里的错误代码 #

你说替换eval内的代码定位错误有问题？试试这两个方法：

• 开启Source Map：开发环境默认开启Source Map，在IE11开发者工具的"调试器"面板里，找到对应的原始TS文件（而不是打包后的vendor.bundle.js），就能看到具体哪行代码报错了。
• 直接跑开发环境：不要先build成bundle，直接用ng serve启动，然后在IE11里打开，控制台会输出更清晰的错误信息——毕竟开发环境的代码没被压缩合并，错误行一目了然。

5. 排查第三方依赖兼容性 #

如果上面几步都没解决，大概率是某个第三方库用了IE11不支持的特性（比如箭头函数、Array.prototype.includes这类新API）。你可以：

• 暂时移除最近添加的依赖，看应用是否能正常运行，逐步排查出问题库。
• 给问题库找ES5版本的替代包，或者查看它的文档是否有IE11兼容方案。

6. 关闭IE11兼容性视图 #

最后确认IE11没有运行在兼容性视图下——这个模式会模拟旧版IE，导致更多奇怪的问题。可以在IE的"工具"→"兼容性视图设置"里关闭，或者在HTML头部添加强制标签：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

按照这些步骤一步步来，应该能解决IE11下的空白和eval语法错误问题。

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