IE11和Firefox上的angular 6自定义元素因语法和阴影dom错误而失败 [英] angular 6 custom elements fail on IE11 and Firefox with syntax and shadow dom errors

查看：126
本文介绍了IE11和Firefox上的angular 6自定义元素因语法和阴影dom错误而失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我创建了一个新的angular-cli项目，使用 



  //`node_modules / @ webcomponents / custom-elements / src / native-shim.js` 
 *编译有效的基于类的ES5的自定义元素将使用最新版本的流行转换器满足这些
 *的要求。 
 * / 
（（）=> {//这在IE 
中实际上不是法律'使用严格'; 
 
 //如果`customElements什么都不做`不存在。
如果（！window.customElements）返回;

我的完全polyfills如下所示：

  / ******************** ************************************************** ***************************** 
 *浏览器POLYFILLS 
 * / 
 / ** IE9 ，IE10和IE11需要以下所有polyfill。** / 
 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和IE11要求以下内容支持SVG元素的NgClass * / 
 // import'classlist。 JS'; //运行`npm install --save classlist.js`。 
 
 / ** IE10和IE11对Reflect API要求以下内容。 * / 
 import'core-js / es6 / reflect'; 
 
 
 / **常青浏览器需要这些。 ** / 
 //用于JIT中的reflect-metadata。如果您使用AOT（并且只使用Angular装饰器），则可以删除。 
 import'core-js / es7 / reflect'; 
 
 
 / ** 
 *网络动画`@angular / platform-b​​rowser / animations` 
 *仅在应用程序中使用AnimationBuilder并使用IE /时才需要边缘或Safari。 
 * Angular中的标准动画支持不需要任何polyfill（从Angular 6.0开始）。 
 ** / 
 // import'web-animations-js'; //运行`npm install --save web-animations-js`。 
 
 / ** 
 *默认情况下，zone.js将修补所有可能的macroTask和DomEvents 
 *用户可以通过设置以下标志来禁用部分macroTask / DomEvents补丁
 * / 
 
 //（窗口为任意）.__ Zone_disable_requestAnimationFrame = true; //禁用补丁requestAnimationFrame 
 //（窗口为任意）.__ Zone_disable_on_property = true; //禁用补丁onProperty，例如onclick 
 //（窗口为任意）.__ zone_symbol__BLACK_LISTED_EVENTS = ['scroll'，'mousemove']; //在IE / Edge开发人员工具中禁用补丁指定的eventNames 
 
 / * 
 *，addEventListener也将被zone.js 
 *包装，并带有以下标志，它将绕过IE / Edge的'zone.js`补丁
 * / 
 //（窗口为任意）.__ Zone_enable_cross_context_check = true; 
 
 / ***************************************** ************************************************** ******** 
 *默认情况下，Angular本身需要区域JS。 
 * / 
 import'zone.js / dist / zone'; //包含在Angular CLI中。 
 
 import'@ webcomponents / custom-elements / custom-elements.min'; 
 import'@ webcomponents / custom-elements / src / native-shim'; 
 import'bluebird'; 
 
 / ***************************************** ************************************************** ******** 
 *申请进口
 * /


解决方案

https：// github。 com / sulco / angular-6-web-components / pull / 2



这里的人，这在过去2天里保存了我的理智，点击并且是blessed; D



基本上，这个人从组件中删除了Native封装，并以明显正确的方式使用了polyfill，这是我无法建立的。



如果您签出此拉取请求，请运行 npm install ， npm run build ， npm run package 和 npm run serve ，所有这些都适用于Chrome，FF和IE11（至少对我有用）。


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

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

node_modules/@webcomponents/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 compiles and works on IE11 that would be a huge help!

 // `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;

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

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

解决方案

https://github.com/sulco/angular-6-web-components/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 component 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).

这篇关于IE11和Firefox上的angular 6自定义元素因语法和阴影dom错误而失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆