在 Internet Explorer 11 中使用 Angular Elements 的推荐方法

Question

寻找有关如何使用可在其他浏览器上工作的 Angular Elements 的指南，尤其是 Internet Explore 11。

到目前为止，遵循使用 ngDoBootstrap 来定义自定义元素（Angular Element）的推荐约定。它仅适用于 Chrome，但在 IE 中，元素标签在 DOM 中可见，但在浏览器上不显示任何内容。架构如下：组件、服务、管道……都被分成模块。

然后使用 customElements.define() 定义一个父组件。一旦这在 DOM 中应用，诸如单击事件更改检测之类的操作就可以在 chrome（当前版本：72.0.3626.121）中很好地工作，但在 IE 中没有任何显示。我花了几个小时研究不同的方法让它在 IE 中工作。我查看了这里提供的一些问题和答案，特别是使用 polyfills 但没有成功。

然后，我尝试按照 parent > child 的顺序一次定义一个组件，但再次遇到了不同的问题，其中 IE 开始抛出脚本错误，其中一个特别是与 zone.js 和 vendor.js（但不是在 chrome 中）有关。这样做后，我能够看到该元素，但操作和更改检测不起作用。

我在这里尝试了这种方法，但后来开始遇到依赖注入错误。到目前为止，一个问题会导致另一个问题。

选择使用 AngularElements 的原因是尝试将其与使用不同技术堆栈编写的现有项目集成。

Answer 1

除了添加polyfills之外，我还需要声明Zone_enable_cross_context_check。然后我就能够看到在 DOM 中呈现的父组件模板的内容。从那时起，对于所有其他组件，尤其是在模板中，更改检测将无法按预期工作。ngIf 不起作用，因为模板永远不会更新。我不知道为什么它不起作用，前提是我拥有​​所有的 polyfil，并且元素区域策略用于定义自定义元素。

下面是几张图片展示了这一点：

订阅后获取数据成功：

模板：

设置超时：

正如您在 IE 更改检测中看到的那样，它无法像我期望的那样工作。在这种情况下，它仅在加载元素（组件）时工作一次，但对于其他事件则无效。我曾尝试在需要时使用 changeDetectorRef 来检测更改。这没有成功。

屏幕截图来自 Internet Explorer 11。下面是 Chrome 中的一张，显示更改检测按预期工作，内容也因此成功加载。

铬合金：

最后，我会说 Angular Elements 在 chrome 中运行良好，但在 IE 中却没有工作。这段时间最好与另一个库/框架一起使用。

Answer 2

从官方文档中我们可以看到：

最近开发的自定义元素 Web 平台功能目前在许多浏览器中得到本机支持。其他浏览器的支持正在等待或计划中。

我也尝试测试了官方文档包含的demo，它在Chrome浏览器中运行良好，在IE/Edge浏览器中运行不佳。

在IE浏览器中会显示语法错误，如下所示：

因此，正如官方文档所说，他们正在努力实现自定义元素以支持 IE/Edge 浏览器。您也可以将此问题反馈到Angular Issues。