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.

Answer 1

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

npm i [email protected]

Work for me.

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

Answer 2

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.

Answer 3

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