title: ng serve --prod for ng-cli results in UglifyJs SyntaxError: Unexpected token: name
body: <p>I am using the <a href="https://github.com/angular/angular-cli" rel="nofollow noreferrer">Angular-CLI</a> (ng-cli) for my project. When I type in <code>ng serve</code>, the application runs. However, when I type in <code>ng serve --prod</code>, I get the following error.</p>
  
  <pre>
  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]
  </pre>
  
  <p>It is <a href="https://github.com/webpack/webpack/issues/2972" rel="nofollow noreferrer">a known issue that UglifyJs cannot parse ES6</a>.</p>
  
  <p>Furthermore, these SO posts (<a href="https://stackoverflow.com/questions/40410888/webpack-error-error-in-bundle-js-from-uglifyjs-syntaxerror-unexpected-token-na">here</a> and <a href="https://stackoverflow.com/questions/38387544/angular-2-webpack-build-from-uglifyjs-syntaxerror-unexpected-token-punc">here</a>), suggest changing <code>tsconfig.json</code> to target <code>es5</code>. What I am unclear of is whether they mean the <code>tsconfig.json</code> of the consuming Angular project or the one that was used to generate the library. At any rate, my Angular project's <code>tsconfig.json</code> already targets <code>es5</code>. It looks like the following.</p>
  
  <pre><code>{
    "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"
      ]
    }
  }
  </code></pre>
  
  <p>The <code>tsconfig.json</code> of the library that was imported into the Angular project looks like the following and does NOT target <code>es5</code> but <code>es6</code>. By the way, I cannot simply flip the switch in this library from <code>es6</code> back to <code>es5</code> (I just tried) as I am using <code>es6</code> classes like <code>Set</code> and <code>Map</code> (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).</p>
  
  <pre><code>{
      "compilerOptions": {
          "noImplicitAny": true,
          "target": "es6",
          "module": "commonjs",
          "alwaysStrict": true,
          "diagnostics": false,
          "listEmittedFiles": false,
          "listFiles": false,
          "pretty": true,
          "declaration": true
      }
  }
  </code></pre>
  
  <p>Here are my questions.</p>
  
  <ul>
  <li>How can I disable uglification with Angular-CLI when using <code>ng serve --prod</code>?</li>
  <li>Is the problem with the <code>es5/es6</code> target of my Angular project or the imported library?</li>
  <li>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 <code>ng serve --prod</code>. Is this procedure documented? If so, please let me know how to do this. The <code>angular-cli.json</code> 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.</li>
  </ul>