Angular4：Component.name在生产中不起作用

Question

所以我一直在面对这个奇怪的问题，但是我不确定这是一个错误还是我在这里丢失了一些东西。
因此，我有一个名为TestComponent的组件，在AppComponent中，当我单击它时有一个按钮，通过执行此TestComponent.name可以得到TestComponent的名称。

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';
  ...
}

这是一个相关的问题 。

Answer 3

我刚刚在这里回答了一个相关的问题

要变通解决类名的问题，可以创建一个函数并检查它是否等于要测试的类。 在这种情况下，可以使用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