javascript - angular 6 custom elements fail on IE11 and Firefox with syntax and shadow dom errors - Stack Overflow

admin管理员组

文章数量:1287930

I have created a new angular-cli project, with a custom element using these directions. It works perfectly on Chrome. I have mented in all the necessary polyfills for Internet Explorer.

I have included the additional @webponents/... BUT @webponents is causing a problem!

node_modules/@webponents/custom-elements/src/native-shim.js contains an arrow function, that is not supported by internet explorer, so I am getting the following error:

Syntax Error
If anyone can point me to an angular-cli demo / repo (with custom elements) anywhere that piles and works on IE11 that would be a huge help!

 // `node_modules/@webponents/custom-elements/src/native-shim.js`
 *  Compiling valid class-based custom elements to ES5 will satisfy these
 *  requirements with the latest version of popular transpilers.
 */
(() => { // THIS IS NOT ACTUALLY LEGAL IN IE
  'use strict';

  // Do nothing if `customElements` does not exist.
  if (!window.customElements) return;

My full polyfills looks like the below:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

import '@webponents/custom-elements/custom-elements.min';
import '@webponents/custom-elements/src/native-shim';
import 'bluebird';

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

I have created a new angular-cli project, with a custom element using these directions. It works perfectly on Chrome. I have mented in all the necessary polyfills for Internet Explorer.

I have included the additional @webponents/... BUT @webponents is causing a problem!

node_modules/@webponents/custom-elements/src/native-shim.js contains an arrow function, that is not supported by internet explorer, so I am getting the following error:

Syntax Error
If anyone can point me to an angular-cli demo / repo (with custom elements) anywhere that piles and works on IE11 that would be a huge help!

 // `node_modules/@webponents/custom-elements/src/native-shim.js`
 *  Compiling valid class-based custom elements to ES5 will satisfy these
 *  requirements with the latest version of popular transpilers.
 */
(() => { // THIS IS NOT ACTUALLY LEGAL IN IE
  'use strict';

  // Do nothing if `customElements` does not exist.
  if (!window.customElements) return;

My full polyfills looks like the below:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

import '@webponents/custom-elements/custom-elements.min';
import '@webponents/custom-elements/src/native-shim';
import 'bluebird';

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

• javascript
• angular
• html
• typescript

Share Improve this question Follow edited Jun 1, 2018 at 4:11 Jim asked May 31, 2018 at 5:49 JimJim 16k1717 gold badges8989 silver badges174174 bronze badges 5

• I didn't think firefox implements shadow dom (apparently you can turn it on with a preference though) - can you please be clear which errors are in which browser - as firefox definitely supports arrow functions ... please show the error message, not just some vague description of it – Jaromanda X Commented May 31, 2018 at 5:52
• Is your target inside your tsconfig.json set to es5? – Poul Kruijt Commented May 31, 2018 at 6:38
• @PierreDuc, yes – Jim Commented May 31, 2018 at 8:05
• I'm currently working on the same topic. I used another approach for bootstrapping which - for now - is also not working, but maybe it gives you some input that may solve the issue: github./robertfoobar/ng6-ce-consumer – Robert Commented Jun 4, 2018 at 8:56
• Even with no ViewEncapsulation.Native, I cannot get this to work. I only have encapsulation modes None and the default Emulated set in my Angular Element – santon Commented Aug 9, 2018 at 1:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

https://github./sulco/angular-6-web-ponents/pull/2

Here man, this saved my sanity in the last 2 days, click and be blessed ;D

Basically the guy removed Native encapsulation from the ponent and used polyfills in apparently correct manner, which I was unable to establish myself.

If you checkout this pull request, run npm install, npm run build, npm run package and npm run serve, all should work on Chrome, FF and IE11 (works for me at least).

The proposed answer won't work in all of the cases, according to my experience. Just try to place 2 angular based web ponents in one file and you will not get the expected behavior. Checkout this artice for an up to date working example.

本文标签：