typescript Angular 6 自定义元素在 IE11 和 Firefox 上失败，出现语法和阴影 dom 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50617479/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 6 custom elements fail on IE11 and Firefox with syntax and shadow dom errors
提问by Jim
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.
我创建了一个新的 angular-cli 项目，其中包含使用这些方向的自定义元素。它在 Chrome 上完美运行。我已经在 Internet Explorer 的所有必要 polyfill 中进行了评论。
I have included the additional @webcomponents/... BUT @webcomponentsis causing a problem!
我已经包括了额外的@webcomponents/......但是@webcomponents导致了一个问题！
node_modules/@webcomponents/custom-elements/src/native-shim.jscontains an arrow function, that is not supported by internet explorer, so I am getting the following error:
node_modules/@webcomponents/custom-elements/src/native-shim.js包含 Internet Explorer 不支持的箭头函数，因此出现以下错误：
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!
语法错误
如果有人可以将我指向一个可以在 IE11 上编译和运行的 angular-cli 演示/存储库（带有自定义元素），那将是一个巨大的帮助！
// `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:
我的完整 polyfill 如下所示：
/***************************************************************************************************
* 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
*/
采纳答案by Brachacz
https://github.com/sulco/angular-6-web-components/pull/2
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
伙计，这在过去 2 天里拯救了我的理智，点击并得到祝福；D
Basically the guy removed Native encapsulation from the component and used polyfills in apparently correct manner, which I was unable to establish myself.
基本上，这家伙从组件中删除了 Native 封装，并以明显正确的方式使用了 polyfill，而我自己无法确定这一点。
If you checkout this pull request, run npm install, npm run build, npm run packageand npm run serve, all should work on Chrome, FF and IE11 (works for me at least).
如果您签这拉动请求，运行npm install，npm run build，npm run package和npm run serve，都应该在Chrome，FF和IE11（至少对我的作品）工作。
回答by Neckster
The proposed answer won't work in all of the cases, according to my experience. Just try to place 2 angular based web components in one file and you will not get the expected behavior. Checkout this articefor an up to date working example.
根据我的经验，建议的答案不适用于所有情况。只需尝试将 2 个基于角度的 Web 组件放在一个文件中，您将无法获得预期的行为。查看这篇文章以获得最新的工作示例。
