Angular-cli: ng build --prod fails with an obscured error from UglifyJs

[sinapis]

Bug Report or Feature Request (mark with an x)

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

Versions.

angular/cli: 1.0.0
node: 6.9.1
os: win32 x64
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.0

Repro steps.

ng build --prod

packages.json
{
  "name": "angular2-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular2-highcharts": "^0.5.5",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.5.0",
    "chartist": "^0.10.1",
    "core-js": "^2.4.1",
    "flot": "^0.8.0-alpha",
    "jquery": "^3.1.1",
    "ng-chartist": "1.1.0",
    "ng2modules-flot": "0.0.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0",
    "@types/chartist": "^0.9.34",
    "@types/jquery": "^2.0.34",
    "webdriver-manager": "10.2.5"
  }
}

.angular.cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular2-app"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/flot/jquery.flot.js",
        "./assets/scripts/jquery.flot.resize.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "staging": "environments/environment.staging.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {
      "inlineTemplate": false,
      "spec": true
    }
  }
}

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "declaration": false,
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "skipDefaultLibCheck": true,
    "pretty": true,
    "noEmitOnError": true,
    "strictNullChecks": false,
    "lib": [
      "es6",
      "dom"
    ],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "jquery",
      "node"
    ]
  }
}

The log given by the failure.

ERROR in main.cc10e41b427145ba07c1.bundle.js from UglifyJs
Invalid assignment [main.cc10e41b427145ba07c1.bundle.js:550,27]

Desired functionality.

no error or at least error message which is actionable.
there is no build output (dest folder is not created) - how can i debug this issue?

Mention any other details that might be useful.

[deebloo]

Uglify is not compatible with ES6+ code

[diicar]

@sinapis why do you have the bootstrap twice ?

 "../node_modules/bootstrap/dist/js/bootstrap.js",
 "../node_modules/bootstrap/dist/js/bootstrap.min.js",

[sinapis]

@deebloo It's working. Thanks!

@diicar Brain fart

[JoeCostanzo]

it's still an issue.
Saying 'revert to es5 syntax' isn't a solution.. the 'handle' to control the uglify version (or the fork, settings, etc.) is abstracted from the user by this angular cli scope, which is really tedious, otherwise one could just update that and continue per usual w/ modern up-to-date ES6+ / esnext / whatever syntax source files that get compiled / bundled, etc as they should.

Instead we're handcuffed/not able to edit that layer of the package (unless I suppose one dives into their node_modules and hand-edits the angular cli webpack config or such? .. quite a chore to imagine..), and the maker of the library doesn't seem to know or care that standards have moved on and you need to modernize your deps & configs to comply w/ the new environment.
Does anyone understand this or have a real solution besides saying 'change to es5'?
...that said- maybe I'm missing something if so I apologize for lengthiness / incisive commentary.

[JoeCostanzo]

To wrap up w/ a positive comment at least: I was able to compile my production build w/ ng build --prod by commenting out my ES6 (generator) code & targeting 'es5' in tsconfig.json.
Even with that, I am able to use some ES6 syntax features, and it's still compiling, but obviously not perfect given the above comment.
Here's my lib array:
"target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom", "es2015.promise" ]

[robert-claypool]

ERROR in main.cc10e41b427145ba07c1.bundle.js from UglifyJs
Invalid assignment [main.cc10e41b427145ba07c1.bundle.js:550,27]

Add the sourcemaps flag, e.g. ng build --prod -sm, to see the source file line number causing Uglify to fail.

[briancullinan]

@robert-claypool What is the full name of the sm flag so I can look up what it does and how to apply it to this angular-universal project that doesn't not using angular-cli?

[JoeCostanzo]

@robert-claypool 's suggestion of using --sm did help me isolate one offending line where I had bad syntax (I confused defining a return type for a function, as opposed to an argument type, in an arrow function declaration) causing an lint warn or error somewhere in my prod build.

Anyway, in combination with fixing that, and the above mentioned changes to tsconfig, my builds are fully working as expected for ES6 syntax at least; I am fully settled on this now.

[briancullinan]

Is it possible to use --sm directly in a webpack config?

On Aug 4, 2017 5:57 PM, "Joe Costanzo" [e-mail] wrote:

@robert-claypool https://github.com/robert-claypool 's suggestion of
using --sm did help me isolate one offending line where I had bad syntax
(I confused defining a return type for a function, as opposed to an
argument type, in an arrow function declaration) causing an lint warn or
error somewhere in my prod build.

Anyway, in combination with fixing that, and the above mentioned changes
to tsconfig, my builds are fully working as expected for ESNext syntax.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/5730#issuecomment-320381488,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AX5XbkFL0T7cvbHMqDXp_omi9q6ERTjiks5sU74RgaJpZM4Ms3f8
.

[angular-automatic-lock-bot[bot]]

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._}