Angular4：Component.name不适用于生产

Question

所以我一直面对这个奇怪的问题，但我不确定这是不是一个错误，或者我在这里遗漏了什么。
所以我有一个名为TestComponent的组件，在AppComponent中，当我点击它时我有一个按钮，我通过执行TestComponent得到了TestComponent.name的名称。
/> 的 AppComponent ：

import { TestComponent } from './test/test.component';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="showName()">Show</button>'
})
export class AppComponent {    
  showName(){
    console.log('component name: "' + TestComponent.name + '"');
  }
}

正如您所看到的那样，通过单击按钮我想获得TestComponent的名称，基本上是“TestComponent”的颜色 问题是这在开发模式下运行良好，如果我调用ng build也工作正常，这就是我在控制台中得到的结果：



当我打电话给ng build --prod时，为了压缩文件并减小它们的大小，我得到了这个结果：

这是正常的吗？！

Answer 1

是的，这是正常的，因为angular-cli / webpack和其他工具正在通过缩小JavaScript代码来更改类名。因此，在生产构建中缩小之后，您将始终只看到一个字母或类似的东西。

请勿在逻辑中使用此名称，因为它会在生产中中断。

Answer 2

Function name包含实际的函数名称。如果将函数缩小为单个字母的名称，则会丢失其原始名称。在某些点（即每个客户端应用程序）可以可能缩小的应用程序中永远不应该依赖它。 Node.js可能有例外。

name在某些浏览器中是只读的，因此无法覆盖。如果类需要标识符，则应使用不同的名称明确指定：

class Foo {
  static id = 'Foo';
  ...
}

这是related question。

Answer 3

我刚回答了一个相关的问题here

要解决修改类名，可以创建一个函数并检查它是否等于要测试的类。对于TestComponent的情况，你可以使用它：

getType(o: any): string {
      if (o === TestComponent)
          return 'TestComponent';
}

调用它将打印组件名称：

console.log(getType(TestComponent)); // will print 'TestComponent'

Answer 4

我发现的最好方法是使用一个在编译时重命名该类的库，其工作方式类似于C＃nameof。 nameof<MyInterface>(); 结果：“ MyInterface”

https://github.com/dsherret/ts-nameof