Angular-cli: @webcomponents/custom-element and UglifyJs ng build --prod error

[whyboris]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.3.2
node: 6.11.1
os: darwin x64
@angular/animations: 4.3.6
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.3.2
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6

Repro steps.

Please clone this repository: https://github.com/whyboris/uglifyerror
(It contains only 2 additional lines of code (https://github.com/whyboris/uglifyerror/commit/db6d327e8a2477431828f4d2e209071864f54664) on top of a clean ng new uglifyerror project)
Run ng build --prod

The log given by the failure.

ERROR in polyfills.d1f71bd5323846f75dc4.bundle.js from UglifyJs
Unexpected token: punc ()) [polyfills.d1f71bd5323846f75dc4.bundle.js:1676,2]

I asked UglifyJs and was told it's an Angular problem: https://github.com/mishoo/UglifyJS2/issues/2287

Desired functionality.

The package needs to build without error. Any solution is welcome.

Mention any other details that might be useful.

The only changes necessary to replicate the error are:
https://github.com/whyboris/uglifyerror/commit/db6d327e8a2477431828f4d2e209071864f54664
Adding:
"@webcomponents/custom-elements": "1.0.0", to package.json and
import '@webcomponents/custom-elements/src/native-shim'; in src/polyfills.ts

I have attempted this solution: https://github.com/angular/angular-cli/issues/5741#issuecomment-321549156
(using "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony", and removing&reinstalling node_modules) with no success

[clydin]

es2015+ libraries are currently not supported by the UglifyJS version being used. The UglifyJS plugin required is currently in beta (https://github.com/webpack-contrib/uglifyjs-webpack-plugin).

[whyboris]

Thank you @clydin for the swift response.

Does this mean there is no way currently to get it to work out of the box and I'll need to ng eject and deal with webpack directly to use the plugin?

[clydin]

With your current method, yes. However, using the scripts configuration option in .angular-cli.json you can load the es5 version of the polyfill:

      "scripts": [
        "../node_modules/@webcomponents/custom-elements/custom-elements.min.js"
      ],

[whyboris]

Thank you @clydin you're a hero! I got it to work thus:

      "scripts": [
        "../node_modules/@webcomponents/custom-elements/src/native-shim.js"
      ],

[clydin]

Thanks and no problem.
Note that scripts will be minified in the upcoming version (1.4) of the CLI and using the es2015+ source will most likely break as well when you upgrade.

[priley86]

Hi - I think this issue should be reopened until the UglifyJS version used supports ES6. Otherwise, is there another issue we should be tracking? This continues to break the loading of Web Component polyfills within polyfill.ts. The following should work but does not with no currently known workaround:

// ES6 sourcemaps currently break the angular-cli compiler / uglifyjs plugin
import '@webcomponents/webcomponentsjs/webcomponents-sd-ce.js';
import '@webcomponents/custom-elements/src/native-shim';

[priley86]

cc @Brocco @clydin

[clydin]

The 1.5 beta has support for es2015+ build output. To enable, adjust the tsconfig to target es2015. Note that the build will no longer work in older browsers.

Also, there should be es5 versions of the scripts in question that can be used via the app's scripts config option. I provided an example in an above comment.

[priley86]

@clydin thanks, the issue ended up being on my side. It looks another alternative here though would be to ng eject and using the Harmony branch of Uglify JS instead as someone mentioned above.
https://stackoverflow.com/questions/42375468/uglify-syntaxerror-unexpected-token-punc

Transpiling native-shim.js to es5 is not an option as it will not construct the proper fakeClass needed and will leave you with constructor errors in the web component. This is quite annoying but demonstrates the true state of the web these days! Polyfills upon polyfills ;)

[clydin]

The eject and uglifyjs change will build but you'll end up with a mix of es2015 and es5 code. If you're uncomfortable using the beta (which is understandable), another option is to copy the scripts in question into the assets folder and include them directly with a script tag in the app's index.html.

[playground]

I'm getting /webcomponents-lite.js.map" Error (404): "Not found"

"@angular/cli": "^1.4.0"

angular-cli.json
"scripts": ["../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"],

[whyboris]

Our project at work is stuck at angular/cli 1.3.2
Tried today again and we can't upgrade to Angular 5.1.0 / Angular-cli 1.6.0 because we are using @webcomponents/custom-elements/custom-elements.min.js (even with "target": "es2015" in tsconfig.json).
I am unsure how to overcome this obstacle, sorry to bother you again @clydin @Brocco @filipesilva

1. Avoiding ng eject are there any current solutions?
2. If not, are there solutions in the works from the _cli_ team?
3. If not, would you recommend I reach out to the webcomponents?

[whyboris]

Update: upgraded to Angular 5.1.0 / Angular-cli 1.6.3 and it works.
A ❄️ _Christmas Miracle_ :trollface:

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