在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中）。这样做我能够看到元素，但操作和更改检测不起作用。

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

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

Answer 1

除了添加polyfill之外，我还需要声明Zone_enable_cross_context_check。然后我能够看到在DOM中呈现的父组件模板的内容。从那时起，更改检测对于所有其他组件（特别是模板中的预期）不起作用。 ngIf不起作用，因为模板永远不会更新。我不知道为什么它不起作用，只要我有所有的polyfils并且elements-zone-strategy用于定义自定义元素。

以下是一些显示以下内容的图片：

订阅后成功获取数据：

模板：

的setTimeout：

正如你在IE中看到的，变化检测不起作用，因为我期望它。在这种情况下，它只在加载元素（组件）时工作一次，但对于其他事件则不工作。我已经尝试使用changeDetectorRef来检测需要的变量。这没有成功。

屏幕截图来自Internet Explorer 11.以下是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，需要以下所有polyfill

   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. 对于Reflect API，IE10和IE11需要以下内容。 import 'core-js/es6/reflect';

所以转到你的src/pollyfill.ts文件启用这些Internet Explorer依赖项。如果缺少任何依赖，你可以使用这些。并且工作正常。 你可以在这里了解更多about angular Browser support