chrome和IE11同时支持Angular Element的问题 [英] Problem with Angular Element support in chrome and IE11 simultaneously

问题描述

我一直在玩Angular Elements，并试图实现最佳的浏览器兼容性。但是我似乎已经走到了尽头，因为当我为Shadow DOM添加IE polyfill时，它破坏了Chrome中的Element。

I have been playing around with Angular Elements and trying to achieve the best browser compatibility possible. However I seem to have hit a dead end, since when I add an IE polyfill for Shadow DOM, it breaks the Element in chrome.

最初，我遇到了错误无法构造HTML元素 ，因此我将tsconfig.json中的目标更改为es2015 / es6。

Initially I had the error 'Failed to construct HTML element', so I changed the 'target' in my tsconfig.json to es2015/es6.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

组件

// @dynamic
@Component({
    selector: 'flexybox-cardmanagement',
    templateUrl: './card-management.component.html',
    styleUrls: ['./card-management.component.scss'],
    encapsulation: ViewEncapsulation.ShadowDom
})

由于不支持es2015 / es6 +，因此更改目标碰巧会破坏IE。因此，我碰巧在@webcomponents包中找到了custom-elements-es5-adapter，该包包装了ES5以便为需要它的浏览器提供必要的ES6功能。然后我还必须添加对自定义元素的支持。

Changing the target happened to break IE though, since es2015/es6+ is not supported. So I happened to find the custom-elements-es5-adapter in the @webcomponents package, which wraps ES5 to provide the neccessary ES6 functionality to the browsers that needs it. And then I also had to add support for custom-elements.

polyfills.ts

/*****************************************************************************************
 * APPLICATION IMPORTS
 */
 import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
 import '@webcomponents/custom-elements/custom-elements.min';

目前，它在Chrome浏览器中有效，但在IE中却出现以下错误

At this point it works in Chrome but i get the following error in IE

SCRIPT438：对象不支持属性或方法'attachShadow'

SCRIPT438: Object doesn't support property or method 'attachShadow'

所以我尝试通过将以下内容添加到我的polyfills.ts中来为Shadow DOM添加polyfill：

So I tried adding polyfill for Shadow DOM by adding the following to my polyfills.ts:

import '@webcomponents/shadydom';

哪个似乎可以解决IE中的问题，但现在却给了我chrome以下错误：

Which seems to fix the issue in IE, but now gives me the following error in chrome:

未捕获的TypeError：无法读取
的属性'defineProperties'未定义

Uncaught TypeError: Cannot read property 'defineProperties' of undefined

推荐答案

让自定义元素在IE11中起作用确实是一种折磨。我可能不会带你去那里，但至少要走得更远。

Getting custom elements to work in IE11 is really a torture. I may not bring you there, but at least one step further.

我认为您几乎把所有事情都做对了，我已经执行了相同的步骤，但是我使用了不同的方法polyfills，所以您可能想尝试以下方法：

I think you did almost everything right, I've gone through the same steps, but I used diffrent polyfills, so maybe you want to try these:

angular.json

"scripts": [
  // removed polyfill `document-register-element.js` that may be included with ng add @angular/elements
]

polyfills.ts

import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

---

要检查是否可能是版本问题：

---

To check if it might be a version problem:

package.json （相关部分）

{
  "dependencies": {
    "@angular/**": "~7.2.1",
    "@webcomponents/custom-elements": "^1.2.1",
    "@webcomponents/shadydom": "^1.4.2",
    "core-js": "^2.5.4",
  }
}

信息：通过此配置，自定义元素对我来说适用于Chrome，Firefox和IE11，但是我没有在IE11中使用输出绑定。我不知道为什么导致这种情况，如果您对此感兴趣并找到解决方案，则可以提供它

Info: With this configuration, the custom element works in Chrome, Firefox and IE11 for me, but I don't get output bindings to work in IE11. I don't know why this is caused, if you are interested in this and find a solution to it, you may provide it here.

IE11的通用提示：

现在，这不是您的问题，但是，如果IE11抛出其各种错误之一，那么使用 import'core-js / shim' polyfills.ts 中的$ c>。这将立即导入所有填充，以检查IE11是否错过了其中之一。如果是这样，则可以进一步解决，如果不知道，则必须寻找其他地方。

Genral tip for IE11:
Not your problem now, but if IE11 throws one of its various erros, it helped me a lot to use import 'core-js/shim' in polyfills.ts. This imports all shims at once to check if IE11 misses one of those. If so, you can tackle it down further, if not you know you have to look elsewhere.

Angular Elements polyfill

如果您想保留Angular使用的polyfill，可以尝试使用版本 1.8.1 。我在某处（但不记得在哪儿）读到过此版本，此刻会导致IE中出现问题。

Angular Elements polyfill
If you want to stay with the polyfill used by Angular, you may try to use version 1.8.1. I read somewhere (but can't remember where) that later versions cause problems in IE at the moment.

这篇关于chrome和IE11同时支持Angular Element的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！