Question

我正在尝试使用Angular Elements 8创建一些自定义元素，当在@Input（）上将简单对象用作字符串/数字时，它的效果很好。但是，当我想开始使用对象数组时，IE EDGE / 11会引发异常。

程序

克隆存储库（代码github repo）或执行以下操作：

ng新的“别名”
更新浏览器列表以包含IE11
ng生成组件简单列表
使用输入为组件编写代码
服务解决方案（没有我知道的角度元素），一切正常。
添加角度元素（ng add @ angular / elements）
修改模块以将组件引导为自定义元素
使用EDGE服务并加载，请参阅控制台错误

TypeError: Unable to get property 'setInputValue' of undefined or null reference at listItems.set (http://localhost:4300/vendor.js:77430:35) at DefaultDomRenderer2.prototype.setProperty (http://localhost:4300/vendor.js:80310:9) at DebugRenderer2.prototype.setProperty (http://localhost:4300/vendor.js:76553:9) at setElementProperty (http://localhost:4300/vendor.js:73738:5) at checkAndUpdateElementValue (http://localhost:4300/vendor.js:73648:13) at checkAndUpdateElementInline (http://localhost:4300/vendor.js:73576:5) at checkAndUpdateNodeInline (http://localhost:4300/vendor.js:74992:13) at checkAndUpdateNode (http://localhost:4300/vendor.js:74935:9) at debugCheckAndUpdateNode (http://localhost:4300/vendor.js:75957:5) at debugCheckRenderNodeFn (http://localhost:4300/vendor.js:75935:13)"

这是已知缺陷还是我缺少重要的东西？

Answer 1

这是Angular / Elements中的缺陷。使用document-register-elements时，polyfill无法可靠地调用构造函数。

要解决此问题，请切换到另一个@webcomponents/custom-elements等自定义元素的polyfill

我为您的项目创建了fork，并解决了该问题。

Answer 2

不知何故，我最终选择了包含两个polyfill的设置：

import 'document-register-element';
import '@webcomponents/custom-elements';

angular的document-register-element元素，以及（手动）添加的webcomponents / custom-elements。这种结合导致了问题所涉及的确切问题。

（到目前为止）最终有效的组合是：

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements';

Answer 3

对于那些像我一样来到这里的人，我也有：

import 'document-register-element';
import '@webcomponents/custom-elements';

交换两个导入可以为我完成工作：

import '@webcomponents/custom-elements';
import 'document-register-element';

使用@Input（）时，Angular Elements 8不适用于EDGE / IE11

3 个答案: