Angular/webpack构建后constructor.name变为R而非类名，如何保留原名？

问题现象 #

使用Angular/webpack构建生产环境代码时，类的constructor.name会被压缩成类似"R"的短标识，而非原始类名。示例代码：

export class Foo {
    constructor() {
        console.log(this.constructor.name);
    }
}

• 开发环境输出：Foo
• 生产环境输出：R

该问题源于Angular生产构建默认启用代码压缩混淆，构造函数名称会被重命名以减小包体积。

解决方案 #

1. 配置Terser保留类名 #

Angular使用Terser作为压缩工具，可在angular.json中修改生产构建配置，禁用类名混淆：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": {
                "scripts": {
                  "terserOptions": {
                    "keep_classnames": true,
                    "keep_fnames": true
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

• keep_classnames: 保留类的名称
• keep_fnames: 保留函数/构造函数的名称

2. 手动定义类名字段 #

若不想全局禁用压缩混淆，可在类中添加静态属性存储类名，避免依赖constructor.name：

export class Foo {
    static readonly className = 'Foo';
    constructor() {
        console.log(Foo.className);
    }
}

这种方式更灵活，不会影响整体代码压缩效果。

3. 确保tsconfig启用元数据配置 #

在tsconfig.json中启用装饰器元数据生成，配合压缩配置可更好保留类相关信息：

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  }
}

注：该配置主要为Angular装饰器提供元数据支持，需结合keep_classnames使用才能保证类名不被压缩。

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