Angular4: Component.name doesn't work on produ

Question

So I've been facing this weird issue but I'm not sure if it's a bug or it's me missing something here.
So I have a component called TestComponent and in the AppComponent I have a button when I click on it I get the name of the TestComponent by doing this 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 + '"');
  }
}

As you can see by clicking on the button I want to get the TestComponent's name which basically "TestComponent"
The problem is that this works well on development mode and if I call ng build too works fine and this is what I get in the console:



And when I call ng build --prod, to compress files and reduce their size, I get this result:

Is this normal ?!

Answer 1

I just answered a related question here

To workaround mangling class names, you can create a function and check if it is equal to the class you want to test. In this case for TestComponent, you could use this:

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

And calling it will print the Component name:

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

Answer 2

Function name contains actual function name. If the function is minified to one-letter name, it loses its original name. It should never be relied on in applications that can possibly be minified at some point i.e. every client-side application. There may be exceptions for Node.js.

name is read-only in some browsers and and thus can't be overwritten. If a class needs identifier, it should be specified explicitly under different name:

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

Here is a related question.

Answer 3

The best way I found was to use a library that renames the class at compile time, works similar to the C # nameof. nameof<MyInterface>(); Result: "MyInterface"

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

Answer 4

Yes, this is normal since angular-cli/webpack and other tools are changing the class name by minifying the JavaScript code. So after minification in production build, you'll always only see one letter or something similar.

Don't use this name in your logic because it will break in production.