Angular4: Component.name doesn't work on production

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

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 2

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.