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

Question

我一直在尝试使用 Angular Elements 并试图实现最佳的浏览器兼容性。但是我似乎遇到了死胡同，因为当我为 Shadow DOM 添加一个 IE polyfill 时，它破坏了 chrome 中的元素。

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

配置文件

{
  "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
})

更改目标碰巧破坏了 IE，因为不支持 es2015/es6+。所以我碰巧在@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 中给了我以下错误：

未捕获的类型错误：无法读取未定义的属性“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 中使用输出绑定。我不知道这是为什么引起的，如果您对此感兴趣并找到解决方案，您可以在此处提供。

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

Angular Elements polyfill
如果你想继续使用 Angular 使用的 polyfill，你可以尝试使用 version 1.8.1。我在某处（但不记得在哪里）读到更高版本目前会导致 IE 出现问题。