Name Mangling issue in production builds

[AGiorgetti]

- [x] bug report -> please search issues before submitting
- [ ] feature request

Name mangling is enabled in production builds, this can be a problem because it changes the class names that can be used as tokens inside our code or in Angular dependency injection.
We cannot use things like: class.constructor.name in our code.

Versions.

@angular/cli: 1.1.2
node: 7.10.0
os: win32 x64
@angular/animations: 4.2.3
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/core: 4.2.3
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/router: 4.2.3
@angular/cli: 1.1.2
@angular/compiler-cli: 4.2.3
@angular/language-service: 4.2.3

Repro steps.

1. create a new project file (ng new xxx)
2. add a new file 'app\model.ts'

export class ShouldNotBeMangledInProductionBuild {

}

3. change app.component.ts like this>

export class AppComponent {
  title = 'app';

  functionName: string;
  instanceConstructorName: string;

  constructor() {
    this.functionName = ShouldNotBeMangledInProductionBuild.name;
    const instance = new ShouldNotBeMangledInProductionBuild();
    this.instanceConstructorName = instance.constructor.name;
  }
}

4. and app.component.html like this:

<div style="text-align:center">
  <p>Should not change class/construction functions name in production builds.</p>
  <hr>
  <p>Not Mangled class name: ShouldNotBeMangledInProductionBuild</p>
  <hr>
  <p>'class' name: {{functionName}}</p>
  <p>construction function name: {{instanceConstructorName}}</p>
</div>

5. run the app in production mode: 'ng serve --prod'

The log given by the failure.

The output will be:

Not Mangled class name: ShouldNotBeMangledInProductionBuild

'class' name: n
construction function name: n

as you can see the class was renamed.

Desired functionality.

The output should be:

Not Mangled class name: ShouldNotBeMangledInProductionBuild

'class' name: ShouldNotBeMangledInProductionBuild
construction function name: ShouldNotBeMangledInProductionBuild

which is correct output in tests and non production builds

Mention any other details that might be useful.

Lokking at how Angular does their builds it seems to me thay have disabled name mangling at all:
https://github.com/angular/angular/blob/fd72fad8fd334774162dd89ffcd8dc3e4e5ce21a/aio/content/examples/webpack/config/webpack.prod.js
look at line 24

As an additional question:
is there a way in Angular CLI to run the tests with the production build code (not just using the production environment configuration), so I can setup a proper Unit Test to catch the issue?

[alkampfergit]

+1

[jgodi]

In order to achieve this you will have to ng eject your config and update the webpack config.

The CLI team is working on a way to allow incremental changes to the existing build process without having to eject but that level of granularity is not ready yet.

See comment on #5192.

Hope that helped!

[Brocco]

@jgodi is correct, this is only possible via ejecting. The goal of the CLI is to create small production builds and not renaming would create larger bundles.

[ChrisProlls]

We really need this feature because of code healthy and maintainability.
@Brocco What the state of these work ?

[JAspeling]

The goal of the CLI is to create small production builds and not renaming would create larger bundles.

I don't think this is a valid argument. I keep on seeing it over and over, but how much of a difference would it make to keep the class names, if the project owner requires the functionality? Surely that is up the to developer, and not the Angular CLI to decide?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}