同时在chrome和IE11中支持Angular Element的问题

Question

我一直在玩Angular Elements并试图实现最佳的浏览器兼容性。然而，我似乎已经走到了死胡同，因为当我为Shadow DOM添加IE polyfill时，它会破坏chrome中的Element。

最初我有错误'Failed to construct HTML element'，所以我将tsconfig.json中的'target'更改为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功能。然后我还必须添加对自定义元素的支持。

polyfills.ts

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

此时它适用于Chrome，但我在IE中收到以下错误

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

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

import '@webcomponents/shadydom';

这似乎解决了IE中的问题，但现在在chrome中给出了以下错误：

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

Answer 1

让自定义元素在IE11中工作真的是一种折磨。我可能不会把你带到那里，但至少还要进一步。

我认为你做的几乎一切都正确，我已经完成了相同的步骤，但我使用了不同的polyfill，所以也许你想尝试这些：

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';

---

要检查它是否是版本问题：

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中使用输出绑定。我不知道为什么会这样，如果你对此感兴趣并找到解决方案，你可以提供它here。

---

IE11的一般提示： 现在不是你的问题，但如果IE11抛出其各种错误之一，它在import 'core-js/shim'中使用polyfills.ts帮了我很多。这会立即导入所有垫片以检查IE11是否错过了其中一个。如果是这样，你可以进一步解决它，如果不是你知道你必须寻找其他地方。

角元素polyfill 如果您想继续使用Angular使用的polyfill，您可以尝试使用版本1.8.1。我读到了某个地方（但不记得在哪里），以后的版本会在IE中引起问题。

Answer 2

如果我理解正确，则问题与IE11不支持类并且Chrome必须具有web组件类的事实有关。有一个包装器允许你有一个包，然后将功能方法包装在一个类的chrome中，但我建议有两个单独的包，而不是编译为es5用于理解类的浏览器。