You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
ERROR in vendor... from UglifyJs Unexpected character '`' #5362
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.
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.
Reacted by basst314, zhouchangshun and Erik Murphy
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
...
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
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.
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!
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.
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 sindresorhus/ama#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.
Reacted by codelovesme, Sindre Sorhus, Samuel Marks and Ghislain B.
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]
Activity
elvisbegovic commentedon Mar 13, 2017
still here with rc.3
Uwy commentedon Mar 13, 2017
I think my error is related.
When
ng build --prodgot:System/Config info:
/package.json:
/.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.2elvisbegovic commentedon Mar 13, 2017
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 commentedon Mar 13, 2017
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 commentedon Mar 13, 2017
+1 for add flag to show temp folder while build instead in memory ir solve this issue plz!
elvisbegovic commentedon Mar 14, 2017
Update
This issue can be closed for my part because it's my fault I wanted fix by myself this issue angular/angular#14865
So in platform-browser.es5.js
I change temporarily this function
into this with :
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:
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 commentedon Mar 14, 2017
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 commentedon Mar 16, 2017
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 commentedon Mar 16, 2017
Thanks @SamVerschueren I'll give it a try
filipesilva commentedon Mar 18, 2017
Closing since @istiti said his original issue was solved in #5362 (comment)
Uwy commentedon Mar 21, 2017
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.tsfile like this: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 commentedon Jun 10, 2017
Following +1
I am having the same issue.
27leaves commentedon Jun 12, 2017
same for me +1
codelovesme commentedon Jun 22, 2017
same here +1
"@angular/cli": "1.1.1",
"@angular/compiler-cli": "^4.0.0",
"@angular/core": "^4.0.0",
SamVerschueren commentedon Jun 22, 2017
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 sindresorhus/ama#446 as it discusses possible workarounds.
I was tired of the entire discussion and created
babel-engine-pluginwhich 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 commentedon Jun 22, 2017
Thank you very much for your quick response,
removing the es6 compiled libraries, It worked!
misaunde commentedon Sep 27, 2017
This may be a dumb question, but how do you remove the es6 compiled libraries?
SamVerschueren commentedon Sep 28, 2017
@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 commentedon Sep 28, 2017
Ok thanks! I ended up solving this by switching to angular-cli 1.5.0-beta.0 so I could target ES2015.
(#7610)
zhouchangshun commentedon Nov 16, 2017
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 commentedon Nov 16, 2017
I have the same question,+1
sunfeng90 commentedon Jul 24, 2018
@zhouchangshun Have solve it?
angular-automatic-lock-bot commentedon Sep 8, 2019
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.