Angular CLI生产构建压缩致应用异常，求解决方案

这个问题我太熟悉了——你碰到的就是Angular生产构建（ng build --prod）里**代码混淆（minification/obfuscation）**的“坑”！当你用--prod时，构建工具会自动开启代码压缩、混淆，其中就包括把类名、变量名替换成像es这种极短的标识符，这直接导致你依赖constructor.name生成路由的逻辑完全失效。

除了放弃使用constructor.name，这里给你几个靠谱的解决方案：

1. 给资源类添加显式静态名称属性 #

核心思路是：不要依赖动态的constructor.name，而是给每个Resource子类手动声明一个静态属性来存储类名，这个属性不会被混淆工具随便篡改。

步骤1：给资源类添加静态属性 #

修改你的Contact、MailFolder等资源类，添加一个静态的resourceName属性：

class Contact extends Resource {
  // 显式声明类名，代替constructor.name
  static resourceName = 'Contact';
  // ... 你的其他类代码
}

class MailFolder extends Resource {
  static resourceName = 'MailFolder';
  // ... 你的其他类代码
}

步骤2：修改RelationConfiguration逻辑 #

把原来依赖HostResource.name和RelatedSource.name的地方，换成我们刚添加的静态属性：

class RelationConfiguration<T extends Resource, U extends Resource> {
  private path: string;
  constructor(
    public HostResource: IResourceConstructor<T>, 
    public RelatedSource: IResourceConstructor<U>, 
    public relationIdentifierKey
  ) {
    // 替换为静态属性resourceName
    this.path = `${toPluralDash(this.HostResource.resourceName)}/$hostId/${toPluralDash(this.RelatedSource.resourceName)}/$relatedId`;
  }

  // 其他方法保持不变
  getPath(hostInstance: T, relatedInstance: U = null, noId?: boolean) {
    const related = relatedInstance.id && !noId ? '/' + relatedInstance.id : '';
    return this.path.replace('$hostId', hostInstance.id.toString()).replace('/$relatedId', related);
  }
}

2. 配置混淆工具保留静态属性名称 #

为了确保混淆工具不会把我们的resourceName属性也重命名，需要在Angular的构建配置里告诉UglifyJS（Angular5默认的压缩工具）保留这个属性名。

如果你的项目用的是.angular-cli.json（Angular5的旧配置文件），找到defaults.build节点，添加Uglify配置：

"defaults": {
  "build": {
    "uglifyOptions": {
      "mangle": {
        // 告诉Uglify不要重命名resourceName这个属性
        "reserved": ["resourceName"]
      }
    }
  }
}

如果想要更宽松一点（比如保留所有类的函数名），也可以添加"keep_fnames": true，不过这样会略微增加打包体积，按需选择即可。

3. 用装饰器统一管理资源名称（可选优化） #

如果你的资源类很多，手动给每个类加静态属性太麻烦，可以用TypeScript装饰器来统一处理：

// 创建一个装饰器，用来给类添加resourceName静态属性
function ResourceName(name: string) {
  return function(constructor: Function) {
    constructor.resourceName = name;
  };
}

// 给资源类使用装饰器
@ResourceName('Contact')
class Contact extends Resource {
  // ... 类代码
}

@ResourceName('MailFolder')
class MailFolder extends Resource {
  // ... 类代码
}

这样不仅代码更整洁，后续新增资源类时也能统一规范。

为什么普通构建没问题？ #

因为不带--prod的普通构建不会开启代码混淆和压缩，类名会保持原样，所以constructor.name能正常获取到正确的类名；而生产构建为了减小包体积，会做这些优化，才导致了这个问题。

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