ERROR with UglifyJs when building npm start build:prod

[techno-mike-git]

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
• Do you want to request a feature or report a bug?
  Uglify gives an ERROR when running npm run build:prod
  `
  ERROR in 1.87152edfeeca0e76c2dd.chunk.js from UglifyJs
  SyntaxError: Unexpected token: name (Detail) [./~/angular2-template-loader!./src/app/+detail/detail.component.ts:13,0]

ERROR in 2.d14d91212c6668d117ed.chunk.js from UglifyJs
SyntaxError: Unexpected token: name (About) [./~/angular2-template-loader!./src/app/about/about.component.ts:29,0]

ERROR in main.7ef34497f05b466f628b.bundle.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./~/angular2-template-loader!./src/app/app.component.ts:61,0]
`

npm run build:dev works fine and the only file I've changed is tsconfig.json with target: "es6" because of another bug

• What is the current behavior?
  Can't uglify the main.bundle.js
• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).
  I changed the tsconfig.json - target: "es6" because it's not recognizing "Set" and others es6 then I did a npm run build:prod :
  `
  ERROR in 1.87152edfeeca0e76c2dd.chunk.js from UglifyJs
  SyntaxError: Unexpected token: name (Detail) [./~/angular2-template-loader!./src/app/+detail/detail.component.ts:13,0]

ERROR in 2.d14d91212c6668d117ed.chunk.js from UglifyJs
SyntaxError: Unexpected token: name (About) [./~/angular2-template-loader!./src/app/about/about.component.ts:29,0]

ERROR in main.7ef34497f05b466f628b.bundle.js from UglifyJs
SyntaxError: Unexpected token: name (App) [./~/angular2-template-loader!./src/app/app.component.ts:61,0]
`

• What is the expected behavior?
  To uglify the main.[hash].bundle.js
• What is the motivation / use case for changing the behavior?
• Please tell us about your environment:
  Mac OS X El Capitan
• Angular version: 2.0.0-beta.X
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[StefH]

I changed the tsconfig.json - target: "es6" because it's not recognizing "Set" and others es6

I encounter the same issue when including a 3rd party library which is build in es6.

[JoshTheDerf]

I can reproduce this as well.

[LanderBeeuwsaert]

Same here. Setting target to es5 works as workaround.

[DutchKevv]

Installing the npm package: typescript@rc and setting the target: "es5" in tsconfig.json solved it for me..

Problem was I couldn't use target: "es5" before because my project is using async / await.. But with the new 2.1 version of Typescript it is supported

[manh-vv]

I've got the same issue when trying to change target to ES6.

[rvalimaki]

Confirming this as well. I am using ES6 target for async/await support, and that causes UglifyJS to fail. Setting ES5 target with Typescript 2.0.10 breaks the async/await... So I'm between a rock and a hard place here.

I'm trying to get things working with newer Typescript.

[rvalimaki]

"I'm trying to get things working with newer Typescript."

Build works with Typescript 2.1.5 & ES5 Target BUT async/await doesn't work!

"__generator is not defined"

__generator is part of async/await code generated by Typescript when the target is ES5 or ES3.

Disabling UglifyJS completely allows production builds with ES6 target, so that's what I'm currently doing as a workaround. Might still test ES5 target with manually copy & pasted __generator and __awaiter from https://blog.mariusschulz.com/2016/12/09/typescript-2-1-async-await-for-es3-es5

[manh-vv]

I found a solution by using babel. ES6 Typescript -> JavaScript es6 -> babel -> es5.

[rvalimaki]

Workaround with TS 2.1 & ES5 target without babel is to copy & paste __generator & __awaiter vars to index.html or other place to be included on global scope. I tested it and it's indeed working.

Get the code from the following link:

https://blog.mariusschulz.com/2016/12/09/typescript-2-1-async-await-for-es3-es5

Feels a bit dirty but works. Honestly, I think that using babel with TS would be even bigger sin.

[sijixx]

please i keep getting this error, how can i resolve this??

Error: No errors
at validate (C:\Users\Adebowale\myauthapp\node_modules\extract-text-webpack-plugin\schema\validator.js:10:9)
at Function.ExtractTextPlugin.extract (C:\Users\Adebowale\myauthapp\node_modules\extract-text-webpack-plugin\index.js:188:3)
at C:\Users\Adebowale\myauthapp\node_modules\angular-cli\models\webpack-build-styles.js:79:83
at Array.map (native)
at Object.getWebpackStylesConfig (C:\Users\Adebowale\myauthapp\node_modules\angular-cli\models\webpack-build-styles.js:76:43)
at new NgCliWebpackConfig (C:\Users\Adebowale\myauthapp\node_modules\angular-cli\models\webpack-config.js:44:51)
at Class.run (C:\Users\Adebowale\myauthapp\node_modules\angular-cli\tasks\serve-webpack.js:23:22)
at C:\Users\Adebowale\myauthapp\node_modules\angular-cli\commands\serve.run.js:37:22
at process._tickCallback (internal/process/next_tick.js:103:7)

[LeeGenD]

UglifyJsPlugin only supports es5 now, so change file tsconfig.json like below:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es6"]
  }
}

this config will make build program solve this problem like SyntaxError: Unexpected token: name (App) ,and also be able to recognize "Set" and others es6.

[Piusha]

https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

[yehorrudytsia]

Looks like fixed. Ive just removed all the ts files from my project