Angular 4 + MVC Web应用在Internet Explorer中无法运行问题求助

碰到过不少Angular 4项目在IE里掉链子的情况，给你整理几个最常见的修复方向，应该能解决大部分问题：

1. 补全IE兼容的Polyfills #

Angular 4本身不自带IE全版本的兼容支持，需要手动开启polyfills.ts里的相关配置：
打开项目根目录下的src/polyfills.ts，确保以下核心ES6兼容的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';

另外，针对IE 10/11的特有兼容问题，添加以下依赖并引入：

import 'classlist.js'; // 修复IE对DOM classList的支持
import 'web-animations-js'; // 若项目用到动画效果则需添加

执行命令安装对应依赖：

npm install classlist.js --save
npm install web-animations-js --save

2. 调整Angular CLI的浏览器目标配置 #

在angular.json（旧版本为.angular-cli.json）中，确保browserslist包含IE的目标版本：

"browserslist": [
  "IE 9",
  "IE 10",
  "IE 11",
  "last 2 versions",
  "not dead"
]

如果是旧版.angular-cli.json，找到defaults -> build -> browsers节点修改：

"browsers": ["ie 9", "ie 10", "ie 11", "last 2 versions"]

3. 修复MVC视图的HTML头部设置 #

IE对DOCTYPE和兼容标签非常敏感，确保你的MCS视图头部有正确配置：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 强制IE使用最新渲染引擎，避免兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 其他头部资源 -->
</head>

4. 配置TypeScript编译目标 #

IE不支持ES6+语法，所以要确保tsconfig.json里的编译目标设为ES5：

"compilerOptions": {
  "target": "es5",
  // 其他编译配置
}

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

如果项目用到了第三方JS库，部分库可能默认不支持IE。检查这些库的官方文档，确认是否需要额外polyfill，或者是否有IE兼容版本。比如某些图表、UI组件库，可能需要单独处理兼容逻辑。

6. 强制关闭IE兼容性视图 #

除了页面meta标签，还可以在IIS服务器端配置HTTP响应头，全局添加X-UA-Compatible: IE=edge，避免用户浏览器自动开启兼容模式。

7. 用IE开发者工具定位具体错误 #

按下F12打开IE开发者工具，切换到「控制台」标签，查看具体报错信息。常见的比如Symbol is undefined、Promise is undefined，这些都对应缺失的polyfill，根据提示针对性修复即可。

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