Angular 5应用在IE11中白屏：严格模式属性重复定义报错

嘿，这个IE11和Angular 5的兼容性坑我之前也踩过！给你几个实用的排查和解决方法，帮你快速定位问题：

1. 启用Source Map定位真实报错位置 #

编译后的main.bundle.js确实一团糟，根本没法直接分析。你可以通过启用Source Map让IE11的调试器映射回你的原始TypeScript代码：

• 打开项目根目录的.angular-cli.json（Angular 5用的是这个配置文件）
• 找到build配置下的sourceMap选项，确保它设置为true：

  "build": {
    "options": {
      "sourceMap": true,
      // 其他配置...
    }
  }
  

• 重新执行ng build（开发环境用ng serve），然后在IE11里打开F12调试器，找到报错的行，点击行号旁的关联文件链接，就能直接跳转到引发错误的原始代码文件和行号了！

2. 排查第三方依赖的兼容性问题 #

这个报错大概率是某个第三方库在严格模式下写了重复的对象属性（比如{ name: 'foo', name: 'bar' }），现代浏览器会忽略重复项，但IE11会直接报错。你可以这么排查：

• 先临时移除最近添加的第三方依赖，重新编译测试，如果报错消失，那就是这个库的问题——要么升级它的兼容版本，要么替换成其他支持IE11的库。
• 检查你的package.json里的依赖版本，某些老版本的UI组件库、工具库可能没做好IE11适配，优先选择标注支持IE11的版本。

3. 检查自身代码的严格模式问题 #

虽然可能性小，但也别漏了自己的代码：

• 搜索项目中所有对象字面量，看有没有不小心重复定义了同一个属性键。
• 检查是否用Object.defineProperty重复给同一个对象定义了相同属性（且没有设置configurable: true）。

4. 确保Polyfills配置完整 #

你已经更新了Polyfills，但再确认下Angular 5针对IE11的必要polyfill都加了：
打开src/polyfills.ts，确保以下内容都导入了（没装的依赖记得用npm安装）：

// 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';

5. 调整TypeScript编译配置 #

检查tsconfig.json里的编译选项，确保针对IE11做了适配：

• 把target设置为"es5"（IE11不支持ES6+语法）
• 确保strict选项没有开启会导致额外严格检查的子项（比如strictPropertyInitialization如果配置不当也可能引发兼容问题，不过Angular 5默认配置一般没问题）

先从启用Source Map开始，定位到具体的报错代码后，问题就好解决多了！

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