ng serve --prod for ng-cli results in UglifyJs SyntaxError: Unexpected token: name

Question

I am using the Angular-CLI (ng-cli) for my project. When I type in ng serve, the application runs. However, when I type in ng serve --prod, I get the following error.

ERROR in vendor.bundle.js from UglifyJs
SyntaxError: Unexpected token: name (IdUtil) [./~/my-lib/dist/src/common/util.js:7,0][vendor.bundle.js:9318,6]

It is a known issue that UglifyJs cannot parse ES6.

Furthermore, these SO posts (here and here), suggest changing tsconfig.json to target es5. What I am unclear of is whether they mean the tsconfig.json of the consuming Angular project or the one that was used to generate the library. At any rate, my Angular project's tsconfig.json already targets es5. It looks like the following.

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ]
  }
}

The tsconfig.json of the library that was imported into the Angular project looks like the following and does NOT target es5 but es6. By the way, I cannot simply flip the switch in this library from es6 back to es5 (I just tried) as I am using es6 classes like Set and Map (the use of these classes is so severe that changing them would not be trivial, to say the least; had I known about all of this, I would have opted to avoid es6 feature altogether).

{
    "compilerOptions": {
        "noImplicitAny": true,
        "target": "es6",
        "module": "commonjs",
        "alwaysStrict": true,
        "diagnostics": false,
        "listEmittedFiles": false,
        "listFiles": false,
        "pretty": true,
        "declaration": true
    }
}

Here are my questions.

How can I disable uglification with Angular-CLI when using ng serve --prod?
Is the problem with the es5/es6 target of my Angular project or the imported library?
The SO posts seem to suggest that I can pre-process the imported library through babel (which I've never used before) before Angular-CLI does its magic via UglifyJs for ng serve --prod. Is this procedure documented? If so, please let me know how to do this. The angular-cli.json is where I understand ng-cli is configured from. I can't make heads or tails how to hook in the babel pre-processing, if this suggestion is true.

FYI, my workaround was to compile my external library from TS -> ES6 -> (babel) -> ES5. That was the only way for me right now. — Jane Wayne, Jan 26 '17 at 23:58
Transpiling ES6 to ES5 increases the build times dramatically, see my answer below. Hope it helps... — Burak Tasci, Feb 07 '17 at 10:36

Burak Tasci · Answer 1 · 2017-09-08T11:24:21.817

3

There're a few tricks you can use to handle ES6/ES2015 minification.

You can use uglifyjs-webpack-plugin by bebraw - which decouples UglifyJs from webpack. Usage is as follows:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {...},
    output: {...},
    module: {...},
    plugins: [
        new UglifyJSPlugin()
    ]
};

And then, you have to replace uglify-js reference in your package.json with the following:

"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",

edited Sep 08 '17 at 11:24

answered Feb 07 '17 at 10:32

Burak Tasci

887
12
18

1

great, this fix the problem! – ken Feb 11 '17 at 03:08
3

This solution is not going to work easily in an angular-cli environment, in which the webpack configuration happens behind the curtains. – Mar 28 '17 at 17:01
actually cli is the most practical way to work with, but i'm afraid you have to switch to manually providing the build configs :( – Burak Tasci Mar 28 '17 at 18:09
the last line goes into package.json – Burak Tasci Sep 08 '17 at 11:26

score 1 · Answer 2 · answered Jan 26 '17 at 06:46

ng serve command is especially designed to work in a development environment.

try to run:

ng build --prod

if you testing your app with IE:

run the command

npm install -dev angular2-ie9-shims

and than you have to add in angular-cli.json

"scripts": [
    "../node_modules/angular2-ie9-shims/shims_for_IE@2.1.2.js",
    "../node_modules/angular2-ie9-shims/shims_for_IE@2.0.0-beta.17.js",
    "../node_modules/angular2-ie9-shims/shims_for_IE.dev.js"
  ],

or just add the in index.html

<script src="https://raw.githubusercontent.com/angular/angular/66df335998d097fa8fe46dec41f1183737332021/shims_for_IE.js" type="text/plain"></script>

score 1 · Answer 3 · answered Jun 23 '17 at 18:20

1

The issue I had was with a NPM module called Autotrack from Google. The package is in ES6, and it's a .js file so Typescript did not transpile it. I had to manually include an ES5 version of Autotrack in order for uglify to work.

answered Jun 23 '17 at 18:20

Beanwah

1,290
2
17
28

I discovered it was Autotrack by searching through the vendor.js file in the dist folder for the variable name that uglify was complaining about. – Beanwah Jun 27 '17 at 20:17
Could you explain in more detail how you included them? – Mackelito Sep 15 '17 at 13:58
I downloaded the ES5 source from GitHub and manually referenced the .js file in the script tag - Then removed the Autotrack reference from the package.json – Beanwah Sep 17 '17 at 19:58
2

For me I solved it by just using import 'autotrack/autotrack.js';.. this will add all plugins but the filesize difference on build was just 0.02kb.. and I can live with that :P – Mackelito Sep 18 '17 at 08:14

ng serve --prod for ng-cli results in UglifyJs SyntaxError: Unexpected token: name

3 Answers3