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

Question

正在寻找有关如何使用Angular Elements的指南，这些元素可在其他浏览器上使用，尤其是Internet Explorer 11。

到目前为止，遵循使用ngDoBootstrap定义自定义元素（角度元素）的建议约定。它仅在Chrome中有效，但在IE中，元素标签在DOM中可见，但浏览器中未显示任何内容。体系结构如下：组件，服务，管道...全都分成模块。

然后使用customElements.define（）定义父组件。将其应用到DOM后，诸如单击事件更改检测之类的操作在chrome（当前版本：72.0.3626.121）中效果很好，但在IE中什么也没显示。我花了几个小时研究各种方法来使其在IE中工作。我查看了此处提供的一些问题和答案，特别是使用polyfills时，并没有成功。

然后，我尝试一次按父级>子级的顺序定义一个组件，但又遇到了不同的问题，即IE开始引发脚本错误，这主要与zone.js和vendor.js有关（但在铬）。这样，我可以看到该元素，但是操作和更改检测不起作用。

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

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

Answer 1

除了添加polyfills，我还需要声明 Zone_enable_cross_context_check 。然后，我可以看到在DOM中呈现的父组件模板的内容。从那时起，更改检测对所有其他组件都无法正常工作，尤其是在模板中。 ngIf无效，因为模板从未更新。我不知道为什么它不起作用，只要我拥有所有的polyfils，而elements-zone-strategy用于定义自定义元素。

下面是一些显示此内容的图像：

订阅成功提取数据后的时间：

模板：

SetTimeout：

正如您在IE中看到的那样，更改检测不起作用，正如我期望的那样。在这种情况下，仅在加载element（component）时工作一次，而对于其他事件则不行。我尝试使用changeDetectorRef在需要的地方检测detectChanges。这没有成功。

这些屏幕截图取自Internet Explorer11。下面是一个来自Chrome的屏幕截图，显示了更改检测按预期方式工作，因此内容也成功加载。

Chrome浏览器：

最后我要说的是，Angular Elements在chrome中可以很好地工作，但是在IE中却不能，如果要使其在IE中工作，则需要花费大量时间来寻找解决方案，以了解为什么不起作用。最好把时间用于另一个库/框架。

Answer 2

从official document中我们可以看到：

许多浏览器当前都支持最近开发的自定义元素Web平台功能。支持正在等待中或计划在其他浏览器中使用。

我还尝试测试官方文档中包含的演示，它在Chrome浏览器中运行良好，而不在IE / Edge浏览器中运行。

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

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

Answer 3

它支持所有浏览器，您需要更改polyfill.ts文件

1. 要支持Internet Explorer 9、10或11和Chrome <55，需要以下所有填充物

   import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set';

2. 对于SVG元素的NgClass支持，IE10和IE11需要以下条件

   import 'classlist.js'

3. IE10和IE11需要Reflect API的以下内容。

   import 'core-js/es6/reflect';

因此，请转到您的src/pollyfill.ts文件，启用这些Internet Explorer依赖项。 如果缺少任何依赖项，您可以使用这些。效果很好。
您可以在这里about angular Browser support了解更多信息