Angular 5.2.10升级至Angular 6后生产环境运行报错

我之前也踩过这个坑，这其实是TypeScript继承原生Error类时的经典问题，在Angular版本升级后（连带TypeScript和打包工具升级）被暴露了出来。报错里的Ti是生产环境代码压缩混淆后你的Exception类的别名，核心问题就是子类构造函数中调用super()前直接/间接使用了this，或是没正确处理原生Error的原型继承逻辑。

问题根源 #

Angular 6对应的TypeScript版本（2.7+）以及配套的webpack/terser压缩工具，对ES类的继承规范执行得更严格。原生Error类在ES5编译环境下的继承有特殊逻辑：如果不手动修正原型，子类实例无法正确继承Error的属性和方法；如果在super()之前访问this（哪怕是隐性调用），就会触发这个报错。

修复方案 #

把你的Exception类改成下面的标准写法，完全贴合ES类继承规范：

export class Exception extends Error {
  private _statusCode: number;

  constructor(statusCode: number, message: string) {
    // 1. 必须第一行调用super，传入message参数
    super(message);

    // 2. 修复ES5环境下的原型指向问题（关键步骤）
    Object.setPrototypeOf(this, Exception.prototype);

    // 3. 手动设置错误名称，方便调试（可选但推荐）
    this.name = 'Exception';

    // 4. 现在再赋值自定义属性
    this._statusCode = statusCode;
  }

  // 可选：添加获取状态码的getter方法
  get statusCode(): number {
    return this._statusCode;
  }
}

为什么升级后才出现？ #

Angular 5用的TypeScript版本较低（2.4.x），打包工具的压缩规则也相对宽松，可能自动兼容了这种不规范的继承写法。但升级到Angular 6后，TypeScript和压缩工具都更新了，严格遵循ES规范，之前隐藏的问题就显现出来了。

额外检查点 #

如果修改后还是报错，排查以下情况：

• 确认构造函数中没有在super()之前使用this（包括参数默认值、装饰器或其他隐性调用场景）
• 检查生产环境压缩配置，确保没有禁用类名混淆之外的必要规则（不过一般修复类写法就足够解决问题）

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