web-dev-qa-db-fra.com

les éléments personnalisés angulaires 6 échouent sur IE11 et Firefox avec des erreurs de syntaxe et de dom shadow

J'ai créé un nouveau projet angular-cli, avec un élément personnalisé utilisant ces directions . Cela fonctionne parfaitement sur Chrome . J'ai commenté dans tous les polyfill nécessaires pour Internet Explorer.

J'ai inclus le @webcomponents/... supplémentaire MAIS @webcomponents pose un problème!

node_modules/@webcomponents/custom-elements/src/native-shim.js contient une fonction de flèche, qui n'est pas supportée par Internet Explorer, j'obtiens donc l'erreur suivante:

Erreur de syntaxe
Si quelqu'un peut m'indiquer une démo/mise au point angular-cli (avec des éléments personnalisés)} _ n'importe où qui compile et fonctionne sur IE11, cela serait d'une aide précieuse!

 enter image description here

 enter image description here 

 // `node_modules/@webcomponents/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;

Mon polyfill complète ressemble à ce qui suit:

/***************************************************************************************************
 * 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 '@webcomponents/custom-elements/custom-elements.min';
import '@webcomponents/custom-elements/src/native-shim';
import 'bluebird';

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
javascriptangularhtml5typescript
6
Jim

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

Ici mec, cela a sauvé ma santé mentale au cours des 2 derniers jours, cliquez et soyez béni; D

Fondamentalement, le gars a retiré l’encapsulation Native du composant et a utilisé des polyfills de manière apparemment correcte, ce que j’ai été incapable d’établir moi-même.

Si vous extrayez cette demande d'extraction, exécutez npm install, npm run build, npm run package et npm run serve, tout devrait fonctionner sur Chrome, FF et IE11 (fonctionne au moins pour moi).

2
Brachacz

La réponse proposée ne fonctionnera pas dans tous les cas, selon mon expérience. Essayez simplement de placer 2 composants Web angulaires dans un fichier et vous n’obtiendrez pas le comportement attendu. Commander ce artice pour un exemple de travail à jour.

2
Neckster