title: Angular4: Component.name doesn't work on production
body: <p>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.<br>
  So I have a component called <code>TestComponent</code> and in the AppComponent I have a button when I click on it I get the name of the <code>TestComponent</code> by doing this <code>TestComponent.name</code>.<br><br>
  <strong>AppComponent</strong>:<br></p>
  <pre><code>import { TestComponent } from './test/test.component';
  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: '&lt;button (click)=&quot;showName()&quot;&gt;Show&lt;/button&gt;'
  })
  export class AppComponent {    
    showName(){
      console.log('component name: &quot;' + TestComponent.name + '&quot;');
    }
  }
  </code></pre>
  <p>As you can see by clicking on the button I want to get the TestComponent's name which basically &quot;TestComponent&quot;<br>
  The problem is that this works well on development mode and if I call <code>ng build</code> too works fine and this is what I get in the console:<br><br>
  <a href="https://i.stack.imgur.com/5EgL3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5EgL3.jpg" alt="enter image description here" /></a>
  <br><br>And when I call <code>ng build --prod</code>, to compress files and reduce their size, I get this result:<br><br>
  <a href="https://i.stack.imgur.com/tqFuZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tqFuZ.jpg" alt="enter image description here" /></a></p>
  <p>Is this normal ?!</p>