Angular ESbuild最新版本中constructor.name获取组件名失效，求替代方案

由于ESbuild会对类名进行压缩混淆，constructor.name无法再可靠获取组件名称，以下是几种可行的替代方法：

• 手动添加静态名称属性（最稳定推荐）
  直接在组件类中定义一个静态属性存储组件名称，完全不受编译优化影响：

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html'
  })
  export class MyComponent {
    // 显式定义组件名称
    static readonly componentName = 'MyComponent';
  }
  

  调用时直接通过MyComponent.componentName获取即可。

• 利用Angular编译生成的内部ɵcmp属性
  Angular编译后的组件类会自动生成ɵcmp静态属性，其中包含组件的名称信息：

  // 获取组件名称
  const componentName = MyComponent.ɵcmp.name;
  

  注意这是Angular内部API，虽然当前版本可用，但未来版本可能存在变更风险。

• 通过内部函数ɵgetComponentDef获取组件定义
  从@angular/core导入内部函数ɵgetComponentDef，可以获取组件的完整定义对象，从中提取名称：

  import { ɵgetComponentDef } from '@angular/core';
  
  function getComponentName(componentInstance: any): string | undefined {
    const componentDef = ɵgetComponentDef(componentInstance);
    return componentDef?.name;
  }
  

  同样属于内部API，使用时需留意版本兼容性。

• 动态组件场景下使用ComponentRef
  如果是动态创建组件的场景，从ViewContainerRef.createComponent返回的ComponentRef对象中，可以结合上述方法获取名称：

  import { ViewContainerRef, ComponentRef } from '@angular/core';
  import { MyComponent } from './my-component.component';
  
  constructor(private vcr: ViewContainerRef) {}
  
  loadComponent() {
    const componentRef: ComponentRef<MyComponent> = this.vcr.createComponent(MyComponent);
    // 方法1：使用静态属性
    const name1 = componentRef.instance.constructor.componentName;
    // 方法2：使用内部ɵcmp属性
    const name2 = componentRef.instance.constructor.ɵcmp.name;
  }
  

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