CODEWITHSUNDEEP
angularangular-elements
Anders
Anders

Reputation: 878

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?

Upvotes: 1

Views: 545

Answers (3)

Tyrael
Tyrael

Reputation: 31

For those who came here as me for Edge, I also have :

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

Swapping the two imports do the job for me :

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

Upvotes: 0

icyerasor
icyerasor

Reputation: 5242

Somehow I ended up in a setup where two polyfills were included:

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

the document-register-element of angular, and a (manual) add of webcomponents/custom-elements. This combination led to the exact problem the question refers to.

The combination that finally worked (so far) was rather:

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

Upvotes: 0

Dennis Neuendorf
Dennis Neuendorf

Reputation: 46

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.

Upvotes: 3

Related Questions