UglifyJS breaking ng build --prod

[hugodes]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.4.2
node: 8.5.0
os: darwin x64
@angular/animations: 4.4.3
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

Repro steps.

One part of the problem is I can't find the root of it, building with ng build --prod --sourcemaps, still doesn't reference the area in the code which doesn't work

The log given by the failure.

ng build --prod

Date: 2017-09-20T13:43:50.815Z
Hash: 50c525c6fe0425118ede
Time: 93360ms
chunk {0} polyfills.02292696f70cecd900dd.bundle.js (polyfills) 190 kB {4} [initial] [rendered]
chunk {1} main.fc82f1345284e30cbd13.bundle.js (main) 5.98 MB {3} [initial] [rendered]
chunk {2} styles.122ee5153af13aed7be2.bundle.css (styles) 122 kB {4} [initial] [rendered]
chunk {3} vendor.1f1e29f52bc669b282ae.bundle.js (vendor) 2.63 MB [initial] [rendered]
chunk {4} inline.a2a6d04122157473c4e7.bundle.js (inline) 1.45 kB [entry] [rendered]

ERROR in main.fc82f1345284e30cbd13.bundle.js from UglifyJs
TypeError: Cannot set property 'fixed' of undefined
at TreeWalker.eval [as visit] (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :5584:25)
at TreeWalker._visit (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1339:24)
at AST_This._walk (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :480:24)
at AST_Dot.eval (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1061:29)
at TreeWalker._visit (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1343:21)
at AST_Dot._walk (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1060:24)
at AST_Dot.walk (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :483:21)
at TreeWalker.eval [as visit] (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :5722:31)
at TreeWalker._visit (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1339:24)
at AST_ForIn._walk (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :653:24)
at walk_body (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :530:17)
at AST_BlockStatement.eval (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :541:13)
at TreeWalker._visit (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1343:21)
at AST_BlockStatement._walk (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :540:24)
at AST_BlockStatement.walk (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :483:21)
at TreeWalker.eval [as visit] (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :5697:31)
at TreeWalker._visit (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1339:24)
at AST_If._walk (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :843:24)
at walk_body (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :530:17)
at AST_Function.eval (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :771:13)
at eval (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :1340:21)
at TreeWalker.eval [as visit] (eval at (/Users/hugodes/src/core-front/node_modules/uglifyjs-webpack-plugin/node_modules/uglify-js/tools/node.js:27:1), :5665:21)

Also worth noting, that when I do a ng build --dev, and open the main.bundle.js, there is no reference to the term "fixed" anywhere. So I really cant trace the problem.

Desired functionality.

That the ng build --prod works without problem.
Failing that, I'd like to get some more info from --sourcemaps, because right now, the stacktrace references a file that does not exist

Mention any other details that might be useful.

I can't link the project as it's private, but I wouldn't mind sending a copy of the source code to someone on the angular-cli team privately.

Things I tried:

• Updating @angular/cli doens't solve the issue.
• rm -rf /node_modules && rm package-lock.json && npm cache clear --force && npm install doesn't work
• adding uglify-js@2 to package.json doesn't work
• I've been at it for a long time, so I've gone through most of the google search results, trying everything without success.

Package.json

{
  "name": "front",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "gulp sass && ng serve -e=local",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angular2-jwt": "^0.2.3",
    "aws-sdk": "^2.119.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "file-saver": "^1.3.3",
   "intl": "^1.2.5",
    "mydatepicker": "^2.0.31",
    "ng2-charts": "^1.6.0",
    "rxjs": "^5.4.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

tsconfig.json:

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

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": [
      "node",
      "file-saver"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[clydin]

This may or may not be the issue but something to check and a common cause for uglifyjs errors in the current stable version of the CLI is the presence of packages containing es2015+ javascript.
Also, version 1.5 will include support for enabling a full es2015 build pipeline.

[hugodes]

@clydin Thank you for your reponse, but the problem is still here.

Following you advice, I removed non standard packages (i.e. ones not provided by the cli). Then, I removed all occurences of those packages in my code, ran ng build --prod, and I was still getting the same error.

For reference this is what my package-json looked like without 3rd party packages (note, I kept the ones from the polyfills):

{
  "name": "front",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "gulp sass && ng serve -e=local",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "rxjs": "^5.4.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Is there anything else I could look into ?

Here is an npm -ls uglify-js just in case:

$ npm ls uglify-js
front@0.0.0 /Users/hugodes/src/core-front
├─┬ @angular/cli@1.4.2
│ ├─┬ html-webpack-plugin@2.30.1
│ │ └─┬ html-minifier@3.5.5
│ │ └── uglify-js@3.1.1
│ ├─┬ postcss-url@5.1.2
│ │ └─┬ directory-encoder@0.7.2
│ │ └─┬ handlebars@1.3.0
│ │ └── uglify-js@2.3.6
│ ├─┬ webpack@3.5.6
│ │ └─┬ uglifyjs-webpack-plugin@0.4.6
│ │ └── uglify-js@2.8.29
│ └─┬ webpack-concat-plugin@1.4.0
│ └── uglify-js@2.8.29
└─┬ karma-coverage-istanbul-reporter@1.3.0
└─┬ istanbul-api@1.1.14
└─┬ istanbul-reports@1.1.2
└─┬ handlebars@4.0.10
└── uglify-js@2.8.29

[clydin]

So this looks like a crash within uglifyjs itself. It appears to be due to some form of unexpected syntax. Unfortunately, the stack trace doesn't appear to be very helpful in tracing the actual location within uglifyjs. I'd suggest raising an issue over there as they might be able to provide some addition insight into the actual cause of the crash.

[hugodes]

@clydin Thanks again for your response, but would there be a way of preserving that main.fc82f1345284e30cbd13.bundle.js file for after the build so I can analyse it ?

I tried the --sourcemaps option with no success.

[hugodes]

@clydin Here is a repo where I managed to reproduce the error.

https://github.com/hugodes/uglify-fail

Basically, the question is this: shouldn't the build fail in a manner that would let the user know what is wrong with the code ?

[clydin]

Ideally, it should fail gracefully or even handle the syntax if it is indeed valid. But I think uglifyjs doesn't even expect to see syntax in that form and therefore doesn't have appropriate guards or conditions in place to handle it.
I'd recommend doing a dev build, extracting the es5 version of the relevant code block from the main bundle, and submitting an issue report against uglifyjs.

[hugodes]

@clydin that's the thing when I run "$ uglify-js main.bundle.js" from a dev build, the error doesn't show.

I really need access to the bundles created during the --prod build, but I can't find them.

[clydin]

You can run ng eject with the prod option and then remove the uglifyjs plugin from the generated webpack config.

It could potentially be an issue with one of webpack’s optimization plugins as well.

[hugodes]

Sorry for getting back to you so late on this one @clydin .

So I did

ng eject --target=production

To verify I was still getting the error I did:

npm run build (and I was still getting the error)

So I went ahead and did:

../node_modules/.bin/uglifyjs --compress --mangle -o output.js main.7ecfe7cd0af0ce32c398.bundle.js

But uglify didn't give me any errors.

Am I missing some options ?

I'm doing all this to find the block that's failing to submit an issue with uglify-js as you said.

[hiepxanh]

not my lucky day, still get error with uglify-js after change 'es5' to 'es2015'


No problem with: ng serve, ng build, ng build --aot
But failed at: ng build --prod.

I'm moving forward from 1.4.3 to 1.5 beta 4 only because of this error. now after changing target from 'es5' to 'es2015' it still got that error

[clydin]

@hiepxanh 1.5 (which is in RC now) will support the the es2015 target. You're issue will be solved by upgrading (feel free to give it a try with 1.5.0-rc.0) and is not the same as the issue occurring here.