Angular elements error . "Failed to construct 'HTMLElement ...'

Question

I am trying out a very simple application on angular elements on stackblitz and I am getting the following issue.

Error: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

All I am trying to do is trying to display hello world. I didn't face any issue doing this on visual code locally, however, this issue comes up on stackblitz. Not sure I have to follow some additional steps on stackblitz in order for me to run this application. Appreciate any help on this.

Here is the link to the application on stackblitz.

add this adapter https://unpkg.com/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js — Fateh Mohamed, May 27 '18 at 15:12
Possible duplicate of [Failed to construct 'HTMLElement'](https://stackoverflow.com/questions/42845582/failed-to-construct-htmlelement) — Supersharp, May 28 '18 at 16:31

score 9 · Answer 1 · answered Oct 08 '18 at 12:57

9

Downgrade document-register-element to v1.8.1 solved it.

npm i document-register-element@1.8.1

Work for me.

Cr. https://github.com/angular/angular/issues/24390#issuecomment-396729418

answered Oct 08 '18 at 12:57

bamossza

3,676
1
29
28

score 2 · Answer 2 · answered Oct 04 '19 at 18:19

2

For anyone having this issue, just change the target to es6 or es2015 in your tsconfig.json file. That will work perfectly.

answered Oct 04 '19 at 18:19

Suraj Khanal

498
8
26

score 2 · Answer 3 · answered Jun 14 '20 at 15:19

If anyone's facing the issue, and wants to still target ES5 (for IE compatibility or other reasons), another reasonable solution is to use the web component ES5 adapter polyfills.

# Install the package
npm install @webcomponents/webcomponentsjs --save-dev

# Then add the following line in Polyfills.ts
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

From this GitHub issue.

score 0 · Answer 4 · answered May 19 '20 at 11:46

With angular 8 having the target version as es2015 enables differential loading and will end up having different build files for es5 & es2015 versions.

If above is not required, ideal fix would be to downgrade the document-register-element@1.8.1.

Any version >=1.7.2 <=1.8.1 should be working.

Angular elements error . "Failed to construct 'HTMLElement ...'

4 Answers4

Linked