Search code examples
angularangular-elements

Angular Elements 8 does not work with EDGE/IE11 when using @Input()

I'm trying to create some custom elements with Angular Elements 8 and it works great when using simple objects as string/number on my @Input(). But when I wanted to start using arrays of objects IE EDGE/11 throws exceptions.

Procedure

Clone repo (code github repo) or do the following:

  1. ng new "some name"

  2. update browserlist to include IE11

  3. ng generate component simple-list

  4. Write code for component with inputs

  5. Serve solution (without angular elements I know) and everything works.

  6. Add angular elements (ng add @angular/elements)

  7. Modify module to bootstrap component as custom element

  8. Serve and load with EDGE, see console error

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)"

Is this a known defect or am I missing something vital?

Solution

  • It is a defect in Angular/Elements. The polyfills arent't reliably calling the constructor when using document-register-elements.

    To fix the problem switch to another polyfill for custom elements like @webcomponents/custom-elements

    I created a fork of your project and fixed the issue.