ERROR in vendor... from UglifyJs Unexpected character '`'

[elvisbegovic]

When I build or serve without AOT it works but when using --prod I get:

ERROR in vendor.8ebdc3713b6c81a2665a.bundle.js from UglifyJs Unexpected character '`' [vendor.8ebdc3713b6c81a2665a.bundle.js:70273,25]

My tsconfig.json:

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

My tsconfig.app.json:

{"compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2016","dom"],
    "outDir": "../out-tsc/app",
    "target": "es5",
    "module": "es2015",
    "baseUrl": "",
    "types": []},
  "exclude": ["test.ts","**/*.spec.ts"]}

Config:

@angular/cli: 1.0.0-rc.1
node: 6.9.2
os: win32 x64
@angular/common: 4.0.0-rc.2
@angular/compiler: 4.0.0-rc.2
@angular/core: 4.0.0-rc.2
@angular/forms: 4.0.0-rc.2
@angular/http: 4.0.0-rc.2
@angular/platform-browser: 4.0.0-rc.2
@angular/platform-browser-dynamic: 4.0.0-rc.2
@angular/router: 4.0.0-rc.2
@angular/cli: 1.0.0-rc.1
@angular/compiler-cli: 4.0.0-rc.2

[elvisbegovic]

still here with rc.3

[Uwy]

I think my error is related. When ng build --prod got:

ERROR in vendor.baf468129a07792e2d2b.bundle.js from UglifyJs
Unexpected token: operator (>) [vendor.baf468129a07792e2d2b.bundle.js:13281,19]

System/Config info:

node: v7.4.0
npm: 4.0.5
OS: win10x64
CLI: CYGWIN_NT-10.0-WOW 1.7.35(0.287/5/3) 2015-03-04 12:07 i686 Cygwin

ng --version:                                                                                                                                                    /cygdrive/d/RC/Applis/RCDoc/DocServer.Front 1
    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0-rc.0
node: 7.4.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.9

/package.json:

  "dependencies": {
    "@angular/common": "^2.4.7",
    "@angular/compiler": "^2.4.7",
    "@angular/core": "^2.4.7",
    "@angular/forms": "^2.4.7",
    "@angular/http": "^2.4.7",
    "@angular/platform-browser": "^2.4.7",
    "@angular/platform-browser-dynamic": "^2.4.7",
    "@angular/router": "^3.4.7",
    "@types/highlight.js": "^9.1.9",
    "angular2-materialize": "^6.7.0",
    "babel-polyfill": "^6.23.0",
    "code-mirror-themes": "^1.0.0",
    "codemirror": "^5.24.2",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.10.0",
    "jquery": "^2.2.4",
    "jquery-ui": "^1.12.1",
    "markdown-it": "^8.3.1",
    "markdown-it-abbr": "^1.0.4",
    "markdown-it-anchor": "^4.0.0",
    "markdown-it-container": "^2.0.0",
    "markdown-it-deflist": "^2.0.1",
    "markdown-it-emoji": "^1.3.0",
    "markdown-it-fontawesome": "^0.2.0",
    "markdown-it-footnote": "^3.0.1",
    "markdown-it-ins": "^2.0.0",
    "markdown-it-mark": "^2.0.0",
    "markdown-it-mathjax": "^2.0.0",
    "markdown-it-sub": "^1.0.0",
    "markdown-it-sup": "^1.0.0",
    "markdown-it-table-of-contents": "^0.3.2",
    "materialize-css": "^0.98.0",
    "ng-dynamic": "^2.0.0",
    "ng2-codemirror": "^1.1.1",
    "oidc-client": "^1.3.0-beta.2",
    "perfect-scrollbar": "^0.6.16",
    "rxjs": "^5.1.0",
    "typescript-dotnet-commonjs": "^4.8.0",
    "zone.js": "^0.7.8"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.0",
    "@angular/compiler-cli": "^2.4.7",
    "@types/jasmine": "^2.5.44",
    "@types/jquery": "^2.0.40",
    "@types/jquery.ui.layout": "0.0.28",
    "@types/jqueryui": "^1.11.32",
    "@types/markdown-it": "0.0.2",
    "@types/materialize-css": "^0.98.0",
    "@types/mathjax": "0.0.31",
    "@types/node": "^7.0.8",
    "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-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "^2.1.0",
    "tslint": "^4.3.1",
    "typescript": "^2.2.1"
  }

/.angular-cli.json:

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [        
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/hammerjs/hammer.js",
        "../vendors/jquery-ui-1.12.1.custom/jquery-ui.js",
        "../node_modules/materialize-css/dist/js/materialize.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}

/tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "target": "es5",
    "lib": [
      "es2016"
    ],
    "types": [
      "./src/typings.d.ts",
      "./typings/index.d.ts"      
    ]
  }
}

/src/tsconfig.app.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/app",
    "target": "es5",
    "module": "es6",
    "baseUrl": "",
    "types": [
      "./typings.d.ts",
      "../typings/index.d.ts"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Everything works fine without the --prod flag. Making a quick repro with the same imported vendors doesn't reproduce the error so it seems related to local/app code.

Edit: Still happens with @angular/cli: 1.0.0-rc.2

[elvisbegovic]

I dont understand why uglifyjs can't parse this character while targeting es5

In my code yes I use this chatacter through my app but donno why getting this error

[Uwy]

I don't either but I think it is related to how some TPL are compiled. I just wish to see where it breaks in a file or in console, somewhere but can't find a flag for the cli to output intermediate files.

[elvisbegovic]

+1 for add flag to show temp folder while build instead in memory ir solve this issue plz!

[elvisbegovic]

Update

This issue can be closed for my part because it's my fault I wanted fix by myself this issue https://github.com/angular/angular/issues/14865

So in platform-browser.es5.js I change temporarily this function

DefaultDomRenderer2.prototype.setAttribute = function (el, name, value, namespace) {
        if (namespace) {
            el.setAttributeNS(NAMESPACE_URIS[namespace], namespace + ':' + name, value);
        }
        else {
            el.setAttribute(name, value);
        }
    };

into this with :

DefaultDomRenderer2.prototype.setAttribute = function (el, name, value, namespace) {
        if (namespace) {
          const attrNs = NAMESPACE_URIS[namespace];
          const attrName = `${namespace}:${name}`;
          if (attrNs) {
            el.setAttributeNS(attrNs, attrName, value);
          } else {
            el.setAttribute(attrName, value);
          }
        }
        else {
            el.setAttribute(name, value);
        }
    };

with `${namespace}:${name}` instead namespace + ':' + name;

I did this because my app didn't work coz of this empty namespace issue , I highly wait merge this fix into master because can't build, actually I get:

 Failed to execute 'setAttributeNS' on 'Element': '' is an invalid namespace for attributes.
EXCEPTION: Failed to execute 'setAttributeNS' on 'Element': '' is an invalid namespace for attributes.
EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.setAttribute 
...

cc @hansl

PS: now I'm happy, I succeed build using prod and aot and ng4 to make us of new ViewEngine but too dissapointed, everybody (on twitter) speakin about size reduce and as if by chance it does not work to me :D :D if someone can help, get a look : on my SO question

[Uwy]

Did uninstall every global package then reinstalling ng-cli both globally and locally without success. Did try different version of typescript: 2.2.1, 2.1.6 and 2.0.3, only introduced more issues (my code is using the latest import styles and async/await keywords) Cleaning cache/node modules didn't change anything

I am hoping my issue get resolved until I have to push my project in prod.

[SamVerschueren]

I had the same issue with the unexpected > token. It took me almost an entire day to figure out what caused this. I was using a dependency which used ES2016 features like fat arrow functions, template strings, const, ... So I downgraded my dependency to a version which was written in ES5 and it worked. Hope this helps!

[Uwy]

Thanks @SamVerschueren I'll give it a try

[filipesilva]

Closing since @istiti said his original issue was solved in https://github.com/angular/angular-cli/issues/5362#issuecomment-286420063

[Uwy]

I did find a workaround that does compile but I did not test it yet in production.

I cloned the angular cli repo and changed the production.ts file like this:

From 49e2390c7269779e772bc816b476bc42e11f31f8 Mon Sep 17 00:00:00 2001
From: Uwy <uwy@live.fr>
Date: Tue, 21 Mar 2017 12:03:53 +0100
Subject: [PATCH 3/3] Use babili-plugin instead of UglifyJs

---
 package.json                                               |  1 +
 packages/@angular/cli/models/webpack-configs/production.ts | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f5ffb66..eb747f5 100644
--- a/package.json
+++ b/package.json
@@ -126,6 +126,7 @@
     "@types/semver": "^5.3.30",
     "@types/source-map": "^0.5.0",
     "@types/webpack": "^2.2.4",
+    "babili-webpack-plugin": "0.0.11",
     "chai": "^3.5.0",
     "conventional-changelog": "^1.1.0",
     "dtsgenerator": "^0.9.1",
diff --git a/packages/@angular/cli/models/webpack-configs/production.ts b/packages/@angular/cli/models/webpack-configs/production.ts
index 1e5b291..0bd76b9 100644
--- a/packages/@angular/cli/models/webpack-configs/production.ts
+++ b/packages/@angular/cli/models/webpack-configs/production.ts
@@ -2,6 +2,8 @@ import * as path from 'path';
 import * as webpack from 'webpack';
 import * as fs from 'fs';
 import * as semver from 'semver';
+import * as BabiliPlugin from 'babili-webpack-plugin';
+console.log(BabiliPlugin);
 import { stripIndent } from 'common-tags';
 import { StaticAssetPlugin } from '../../plugins/static-asset';
 import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
@@ -86,11 +88,15 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
         'process.env.NODE_ENV': JSON.stringify('production')
       }),
       new (<any>webpack).HashedModuleIdsPlugin(),
-      new webpack.optimize.UglifyJsPlugin(<any>{
+      new BabiliPlugin({
+        // Eventually this could be done but didn't find the use yet
+        // useSourceMap:  buildOptions.sourcemaps
+      })
+      /*new webpack.optimize.UglifyJsPlugin(<any>{
         mangle: { screw_ie8: true },
         compress: { screw_ie8: true, warnings: buildOptions.verbose },
         sourceMap: buildOptions.sourcemaps
-      })
+      })*/
     ].concat(extraPlugins)
   };
 };
-- 
2.8.3

If anyone encounter this issue and still want to use somekind of minifying, I joined the git format-patch from the current master to my current status.

angular-cli-patch-babili.zip

Just use it like git apply 0003-Use-babili-plugin-instead-of-UglifyJs.patch

(You might want to use the other patchs beforehand to remove some useless warnings I found)

I'm not bothering to make a PR for this as my use case is rather extreme, feel free to do it if you judge it necessary.

[adeelibr]

Following +1 I am having the same issue.

[27leaves]

same for me +1

[codelovesme]

same here +1

"@angular/cli": "1.1.1", "@angular/compiler-cli": "^4.0.0", "@angular/core": "^4.0.0",

[SamVerschueren]

It's because you install dependencies which use ES2016 features like template strings, fat arrow functions, etc. UglifyJS can't handle them and crashes.

More information can be found in this thread https://github.com/sindresorhus/ama/issues/446 as it discusses possible workarounds.

I was tired of the entire discussion and created babel-engine-plugin which is a webpack plugin that only transpiles dependencies targetting Node.js >= 0.12. The only downside is that you'd have to eject your webpack config. Or Angular-CLI should embed it.

[codelovesme]

Thank you very much for your quick response, removing the es6 compiled libraries, It worked!

[misaunde]

This may be a dumb question, but how do you remove the es6 compiled libraries?

[SamVerschueren]

@misaunde Depends on what library you are using. Most of the time you could install an older version of the library without losing functionality.

The other solution is to eject from Angular-CLI and use something like babel-engine-plugin. However, this is not the recommended way.

[misaunde]

Ok thanks! I ended up solving this by switching to angular-cli 1.5.0-beta.0 so I could target ES2015. (https://github.com/angular/angular-cli/pull/7610)

[zhouchangshun]

ERROR in edit_page.90a9298d.min.js from UglifyJs Unexpected character '`' [../~/@ckeditor/ckeditor5-build-classic/build/ckeditor.js:5,839][edit_page.90a9298d.min.js:45500,806]

[zhouchangshun]

I have the same question,+1

[sunfeng90]

@zhouchangshun Have solve it?

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