Skip to content

Name Mangling issue in production builds #6722

Closed
@AGiorgetti

Description

@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 {

}
  1. 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;
  }
}
  1. 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>
  1. 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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions