question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Expose UglifyJs's mangle property / capability when using aot, optimization, and buildOptimizer.

See original GitHub issue

Bug Report or Feature Request (mark with an x)

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

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

Angular CLI: 6.1.5
Node: 9.11.1
OS: win32 x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.7.5 (cli-only)
@angular/cli                      6.1.5
@ngtools/webpack                  6.0.8
@schematics/angular               0.7.5 (cli-only)
@schematics/update                0.7.5 (cli-only)
rxjs                              6.2.2
typescript                        2.7.2
webpack                           4.8.3

Repro steps

We created an automapper that takes in a string and class name. When we map, we use the constructor of the class name to create the object. The production build strips the class names from the code and therefor breaks our automapper.

class Test1 { }
class Test2 { }

let automapper = {}; // dictionary

const addToAutomapper = (from: string, to: Type): void => {
  const key = getKey(from, to);
  if (automapper[key] != null) {
    throw new Error("This mapping already exists");
  }
  
  automapper[key] = new Mapper(); // something like this
}

const getMapper(from: string, to: Type): Mapper => {
  const key = getKey(from, to);
  return automapper[key];
}

const getKey = (from: string, to: Type): void => {
  return from + "[]" + to.constructor.name;
}

addToAutomapper("default", Test1);
addToAutomapper("default", Test2); // error gets thrown due to minification (ng build --prod)

The log given by the failure

The error message is a custom message. It’s part of a dictionary class that will throw an error if the key already exists in the dictionary.

core.js:1524 ERROR Error: Uncaught (in promise): Error: The key 'default[]n' already exists. Did you mean to use the method 'put'.
Error: The key 'default[]n' already exists. Did you mean to use the method 'put'.
    at n.add (dictionary.ts:21)
    at n.createMap (automapper.service.ts:23)
    at menu-item.mappings.ts:13
    at S (mappings.ts:25)
    at new n (automapper.service.ts:18)
    at factory (automapper.service.ts.pre-build-optimizer.js:92)
    at core.js:8039
    at To (core.js:7997)
    at ko (core.js:7972)
    at e.get (core.js:8669)
    at n.add (dictionary.ts:21)
    at n.createMap (automapper.service.ts:23)
    at menu-item.mappings.ts:13
    at S (mappings.ts:25)
    at new n (automapper.service.ts:18)
    at factory (automapper.service.ts.pre-build-optimizer.js:92)
    at core.js:8039
    at To (core.js:7997)
    at ko (core.js:7972)
    at e.get (core.js:8669)
    at O (zone.js:814)
    at O (zone.js:771)
    at zone.js:873
    at t.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3628)
    at t.invokeTask (zone.js:420)
    at e.runTask (zone.js:188)
    at v (zone.js:595)

Desired functionality

I don’t care if the names get minified but I would like to be able to use the class name as reference. In my research, that means telling UglifyJs to maintain class names. I notice that’s how people are working around it but that’s just not acceptable. I can’t rely on a manual modification of the (unexposed) build configuration prior to every release or build.

I noticed the same issue here: https://github.com/angular/angular-cli/issues/5168

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:5
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
radioflyer651commented, Jul 9, 2019

This seems like it’s the only issue still open on this, so I’d like to 1+ this. This functionality keeps me from moving into the “new era”, because I have essential code that relies on this JavaScript language feature. I share code between the server and client, and use the class names in a generic serialization process so I can recreate the object graphs on either side of the wire.

I realize that the argument is that this increases file size. On the other hand, since this prevents me from using the CLI all together, file size become a moot point.

2reactions
vikermancommented, Aug 29, 2019

We do not want to expose flags of internal tools since it would break people when we do switch the tool for a different one.

For now writing a custom builder would be the way to go.

Read more comments on GitHub >

github_iconTop Results From Across the Web

mangling properties with uglifyjs webpack plugin causes ...
I am using webpack 4 to bundle it. I want to uglify my code for the optimization benefits and also to protect it...
Read more >
sasa - node_modules - uglify-js - Gricad-gitlab
--mangle-props [options] Mangle properties/specify mangler options: `builtins` Mangle property names that overlaps with standard JavaScript globals.
Read more >
build out - OSCHINA - 中文开源技术交流社区
QuickBuild 是一个持续集成和发布管理的服务器软件,它提供了一个统一的控制台用来管理这些发布的信息。
Read more >
How to use the uglify-js.mangle_properties function in ... - Snyk
To help you get started, we've selected a few uglify-js.mangle_properties examples, based on popular ways it is used in public projects.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found