如何使 stenciljs 组件与 angular 2+ on Edge 一起工作

Question

我正在将自定义元素从 Stenciljs 导入到 angular。
在现代浏览器上一切正常，但在 Edge（或 IE11）上不起作用
这是我应该做的特别的事情吗？

我正在使用 "@stencil/core": "1.1.9"
"@angular/core": "~7.2.13"
也尝试使用 angular 8 但同样的错误发生了。

我变成了那些错误:
1. ERROR TypeError: Unable to get property '$hostElement$' of undefined or null reference
2. SCRIPT5007: SCRIPT5007: Unable to get property '$flags$' of undefined or null reference

看来我必须在angular这边做点什么，但我无能为力。
我试过了：
1. 使用 angular polyfills
2. 将 'core-js/es7/reflect' 导入这些 polyfill
3. 添加 document-register-element 脚本标签到我的 index.html

当我在没有 angular

的情况下直接使用模板元素时，它们在 Edge 上工作正常

Answer 1

首先，请确保您已遵循此处提到的 Angular 的集成过程： https://stenciljs.com/docs/angular

然后为了支持 IE11 或 Edge，尝试包含 applyPolyFills()，如果您还没有尝试过，当您调用 defineCustomElements(window) 时，像这样：

在您的 main.ts 或包含它的地方：

import {applyPolyfills, defineCustomElements} from 'path/to/stencil/loader';


applyPolyfills().then(() => {
   defineCustomElements(window);
});

我认为 Framework Integration 文档中没有直接提到 Angular 但它在 JavaScript 集成部分中提到： https://stenciljs.com/docs/javascript

希望对您有所帮助。

如何使 stenciljs 组件与 angular 2+ on Edge 一起工作

How to make stenciljs component work with angular 2+ on Edge

polyfills

microsoft-edge

angular

stenciljs