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.

Answer 1

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",

Answer 2

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/[email protected]",
    "../node_modules/angular2-ie9-shims/[email protected]",
    "../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>

Answer 3

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.