Angular 13兼容IE11实现方案咨询

Angular 13 官方已正式移除对 IE11 的支持，但通过一系列非官方的配置调整和依赖适配，仍有实现兼容的可能，以下是实际操作中的经验总结：

• 降级核心构建依赖
  Angular 13 自带的 @angular-devkit/build-angular 已剔除 IE11 相关逻辑，需降级到支持 IE11 的版本：

  • 将 @angular-devkit/build-angular 和 @angular/cli 同步降级至 12.2.18（该版本是 Angular 12 系列中对 IE11 支持最完善的稳定版）
  • 执行安装命令：npm install @angular-devkit/build-angular@12.2.18 @angular/cli@12.2.18 --save-dev

• 调整 TypeScript 编译配置
  在项目根目录的 tsconfig.json 中修改编译目标和依赖库，确保输出 IE11 可识别的代码：

  {
    "compilerOptions": {
      "target": "es5",
      "lib": ["es2018", "dom", "dom.iterable"],
      "downlevelIteration": true
    }
  }
  

• 补充 IE11 必备 Polyfills
  在 src/polyfills.ts 中添加缺失的 API 兼容补丁，同时安装对应依赖：

  // 核心 JS 特性兼容
  import 'core-js/es';
  // Zone.js 兼容
  import 'zone.js/dist/zone';
  // DOM 类列表操作兼容
  import 'classlist.js';
  // Web 动画兼容（若项目用到动画）
  import 'web-animations-js';
  

  执行依赖安装：npm install core-js classlist.js web-animations-js --save

• 修改 Angular 构建配置
  在 angular.json 中新增针对 IE11 的构建配置，禁用现代浏览器优化：

  {
    "projects": {
      "your-project-name": {
        "architect": {
          "build": {
            "configurations": {
              "ie11": {
                "target": "es5",
                "vendorChunk": true,
                "extractLicenses": false,
                "sourceMap": true,
                "optimization": false,
                "outputHashing": "all"
              }
            }
          },
          "serve": {
            "configurations": {
              "ie11": {
                "browserTarget": "your-project-name:build:ie11"
              }
            }
          }
        }
      }
    }
  }
  

  启动 IE11 兼容的开发服务：ng serve --configuration=ie11

• 关键注意事项

  • Angular 13 新增的部分特性（如 HttpClient 的某些新拦截器特性、新表单控件）可能无法在 IE11 中正常运行，需替换为兼容的实现方式
  • 第三方依赖库需确认支持 IE11，若使用了不兼容的库，需降级或替换为替代方案
  • 必须在真实的 IE11 环境中测试，避免依赖浏览器模拟器的误判

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