如何解决Angular 11应用适配配置后仍无法在IE11中运行的问题

问题根因 #

你遇到的报错是IE11不支持ES6语法导致的，报错代码里的const、class、剩余参数运算符...都属于ES6特性，说明当前的ES5转译配置没有覆盖全部生效。

需补充的配置步骤 #

1. 检查并修正tsconfig-es5.app.json配置
   确保该文件的compilerOptions字段符合以下要求：

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "target": "es5",
    "module": "es5",
    "lib": ["es5", "dom"]
  }
}

同时因为你启用了i18n功能，需要在polyfills.ts最顶部添加import '@angular/localize/init'，并且确保安装了对应版本的@angular/localize依赖。

2. 修正browserslist配置
   打开项目根目录的.browserslistrc文件，添加IE11支持，示例配置如下：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
IE 11

这个配置会告诉Angular编译工具生成适配IE11的ES5代码。

3. 处理第三方依赖的ES6语法问题
   你用到的几个第三方依赖版本过高会不支持IE11，需要做对应调整：

• Chart.js降级到2.9.x版本，3.x及以上版本已经完全移除IE11支持
• 确认ngx-extended-pdf-viewer使用的是支持IE11的版本，10.x以上版本不再支持IE11，需降级到9.x及以下
• 检查ng-uikit-pro-standard的版本是否兼容IE11，若不兼容需降级或替换
  同时在angular.json的build.options字段中添加allowedCommonJsDependencies配置，把所有需要转译的第三方依赖加入列表，避免打包警告同时确保转译生效。

4. 补全polyfills.ts的依赖
   除了你已经打开的两个polyfill，还需要添加core-js相关的内置对象polyfill，先执行npm install --save core-js@3，然后在polyfills.ts中添加以下导入：

import 'core-js/es/array';
import 'core-js/es/object';
import 'core-js/es/promise';
import 'core-js/es/string';
import 'core-js/es/map';
import 'core-js/es/set';

5. 调整index.html的meta标签位置
   确保你添加的<meta http-equiv="X-UA-Compatible" content="IE=edge" />是head标签内的第一个元素，避免被其他资源加载阻塞导致不生效。

配置完成后先执行ng build --configuration es5，打开dist目录下的js文件，确认没有const、class等ES6语法后再启动服务访问即可。

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