5

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

最初我遇到错误“无法构造 HTML 元素”，因此我将 tsconfig.json 中的“目标”更改为 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
})

更改目标碰巧破坏了 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”

4

2 回答 2

8

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

我认为您几乎做对了所有事情，我已经完成了相同的步骤，但是我使用了不同的 polyfill，所以也许您想尝试这些：

角.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. 这会一次导入所有 shims 以检查 IE11 是否遗漏其中一个。如果是这样，你可以进一步解决它，如果不是，你知道你必须寻找其他地方。

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

于 2019-02-20T07:24:50.170 回答
1

如果我理解正确，问题与 IE11 不支持类和 Chrome 必须具有 webcomponents 类的事实有关。有一个包装器可以让你拥有一个包，然后将功能方法包装在一个用于 chrome 的类中，但我建议为此使用两个单独的包，而不是为理解类的浏览器编译为 es5。

于 2019-02-22T12:15:30.597 回答