Repository navigation
Name Mangling issue in production builds #6722
Description
- [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.
- create a new project file (ng new xxx)
- add a new file 'app\model.ts'
export class ShouldNotBeMangledInProductionBuild {
}
- 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;
}
}
- 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>
- 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?
Activity
alkampfergit commentedon Jun 17, 2017
+1
jgodi commentedon Jun 17, 2017
In order to achieve this you will have to
ng ejectyour 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 commentedon Jun 19, 2017
@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 commentedon Sep 27, 2017
We really need this feature because of code healthy and maintainability.
@Brocco What the state of these work ?
JAspeling commentedon Sep 2, 2019
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 commentedon Oct 3, 2019
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.