Angular4: Component.name Doesn't Work On Production

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 b

Solution 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.

Solution 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.

Solution 3:

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'

Solution 4:

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