升级至Angular 15后IE 11与Chrome兼容性问题求助

问题根源 #

Angular 12及以上版本已官方放弃IE11支持，升级到15.1.1后，ES5编译模式下类继承的降级处理存在缺陷，导致ErrorHandler构造函数调用报错；而ES6编译模式下，ASP.NET Core的热重载脚本使用了IE11不支持的ES6语法，引发新错误。

分步解决 #

1. 修复ES5编译下的ErrorHandler报错 #

调整tsconfig.json的编译配置，确保ES5编译能正确处理类语法：

• 保留"target": "es5"
• 添加"useDefineForClassFields": false（关闭ES6类字段的新标准处理，适配ES5降级）
• 扩展lib数组，包含必要的ES6核心API的降级支持：

{
  "compilerOptions": {
    "target": "es5",
    "useDefineForClassFields": false,
    "lib": ["es5", "dom", "es2015.core", "es2015.reflect"],
    "module": "es2020",
    "moduleResolution": "node",
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "strict": true,
    "esModuleInterop": true
  }
}

• 检查自定义ErrorHandler的实现，确保构造函数显式调用super()：

import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  constructor() {
    super(); // 必须调用父类构造函数，不可省略
  }

  override handleError(error: any): void {
    // 自定义错误处理逻辑
    super.handleError(error);
  }
}

2. 解决ASP.NET Core热重载脚本的IE11报错 #

IE11不支持热重载脚本中的ES6语法，需禁用开发环境的热重载：

• 打开launchSettings.json，找到对应开发配置，移除--hot-reload参数；
• 或启动项目时设置环境变量ASPNETCORE_ENVIRONMENT=Production，避免加载调试用的刷新脚本。

3. 补充必要Polyfill #

在polyfills.ts中添加IE11所需的核心API兼容层：

import 'core-js/es/reflect';
import 'core-js/es/class';
import 'core-js/es/function';
import 'core-js/es/object';
import 'zone.js';

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