Angular-cli: 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
[email protected] /Users/hugodes/src/core-front
├─┬ @angular/[email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ └── [email protected]
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└─┬ [email protected]
└── [email protected]

[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.

[clydin]

@hugodes Sorry for the delay. I was able to look into this further and this appears to be an issue with the uglifyjs-webpack-plugin itself. I traced it to this line in version 0.4.6 (the latest stable version). Instead of ast = compress.compress(ast); that line should be ast = ast.transform(compress);.

Version 1.0 of the plugin doesn't appear to have the issue but it is currently in beta and is currently only used in the CLI if using a 1.5 RC and targeting ES2015.

[hiepxanh]

@clydin sorry sir, I still have that error with 1.5-rc.0 may be it not correct config

[hugodes]

@clydin Wow, thanks for taking the time to trace it all the way to that line of code !

[skill83]

In my specific case i was getting an error for an external library (core-api) with angular-cli 1.4.7.

I can confirm that using 1.5-rc.0 and targeting es2015 the build --target=production is working.
If i try to make a DEV build in the same way it compiles but if i try to run the app i get a js error.
if i switch the targeting to es5 the build and the app are working fine.

Basically if i want a prod build i have to put es2015 while if i want a dev one i have to put es5

[kzc]

The uglify bug in the repro was reported and fixed in uglify-es here and is in [email protected] which is used by [email protected].

[email protected] uses [email protected] and does not have this fix. 3.x is the current branch of uglify-js, and the 2.x branch of uglify-js is no longer maintained.

Regarding https://github.com/angular/angular-cli/issues/7756#issuecomment-336452435, ast = compress.compress(ast); is indeed correct. Had transform been used instead of compress the net effect would be to disable reduce_vars which coincidentally would have avoided the error in question.

[clydin]

The CLI only uses uglify-es now so this issue has essentially been overcome by events. (As long as the latest version (1.5+) of the CLI is used.). The CLI previously only used it for es2015 targets.

@kzc thanks for the added insight into the uglify api

[hugodes]

I can confirm the issue is no long present with @angular/[email protected] thank you all for your help ( @clydin & @kzc especially) 🙏🏻

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