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

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

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

Answer 2

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

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

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

调用它会打印组件名称：

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

Answer 3

Function name 包含实际的函数名称。如果函数被缩小为一个字母的名字，它就会失去原来的名字。在可以可能在某些时候缩小的应用程序（即每个客户端应用程序）中永远不应该依赖它。 Node.js 可能有例外。

name 在某些浏览器中是只读的，因此不能被覆盖。如果一个类需要标识符，则应以不同的名称显式指定：

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

这是related question。

Answer 4

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

不要在您的逻辑中使用此名称，因为它会在生产中中断。