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 ponent 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/testponent';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="showName()">Show</button>'
})
export class AppComponent {    
  showName(){
    console.log('ponent 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 press files and reduce their size, I get this result:

Is this normal ?!

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 ponent 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.ponent';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button (click)="showName()">Show</button>'
})
export class AppComponent {    
  showName(){
    console.log('ponent 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 press files and reduce their size, I get this result:

Is this normal ?!

• javascript
• angular
• ecmascript-6

• how is the value assigned to the variable name ? – Aravind Commented Oct 4, 2017 at 9:14
• @Aravind no it's not a variable in TestComponent class, it's a function on TypeScript that gives you the name of the ponent as a string like in Java class.getClassName() – SlimenTN Commented Oct 4, 2017 at 9:16

4 Answers 4

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.

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.

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'

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

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