Failed to construct 'HTMLElement': Please use the 'new' operator

[playground]

the example works, but when I try to apply that to my component, it keeps throwing these errors on

customElements.define('custom-element', customElement);

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at NgElementImpl.NgElement [as constructor] (elements.js:391)
    at new NgElementImpl (elements.js:427)
    at new AppModule (app.module.ts:42)
    at createClass (core.js:8213)
    at createProviderInstance$1 (core.js:8185)
    at initNgModule (core.js:8118)
    at new NgModuleRef (core.js:8844)
    at createNgModuleRef (core.js:8833)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:10658)
    at NgModuleFactory.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:11360)

[manfredsteyer]

Does this happen in the example app or in your own?

This error means, that you need a polyfill for browser that do support (!) Custom Elements. That sounds a bit strange, but Custom Elements are defined for EcmaScript 2015+ (bases upon classes) and for supporting older browser, we normally compile down to EcmaScript 5 today.

Normally, I'm loading this polyfill:

npm i @webcomponents/custom-elements --save

And then, I'm referencing it in the angular.json:

"scripts": [
  "node_modules/@webcomponents/custom-elements/src/native-shim.js"
]

To support browsers that DO NOT know Custom Elements, I'm also referencing another polyfill of this package in the polyfills.ts:

import '@webcomponents/custom-elements/custom-elements.min';

[DanielNetzer]

Following your instructions i'm still having the same error.
when I bundle following your instructions I get 2 files, is there anyway to bundle them into a single file as well?

[nedimAT]

@DanielNetzer i had the same issue, it depends on the order you import the scripts.
Following import order fails with Error Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator :

<!-- not working -->
<script src="main.js" defer></script>
<script src="scripts.js" defer></script>

When you first import scripts.js then it works on my machine :)

<script src="scripts.js" defer></script>
<script src="main.js" defer></script>

(freaking proxy doesn't allow me to upload a Screenshot, i will deliver that later )

[fabiocarneiro]

Following on the previous comment:

The order of the scripts in angular.json matters!

The polyfills need to come before scripts.js and the bundles/main.

If you install the schematics out of order, it will place the scripts out of order.

[scottfwalter]

How come I have to use polyfill-webcomp-es5 with Chrome 89? I tried using without polyfill-webcomp-es5 as well as trying without polyfill-webcomp. Both of these produce the error: ': Please use the 'new' operator, this DOM object constructor cannot be called as a function. Only way I could it to work is to use the polyfill-webcomp-es5 shim.

  <!-- not working -->
  <!--
  <script type="text/javascript" src="dist/angular-web-component/polyfills.8dee40beb0de2b87caa1.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/scripts.735c5408f5c2c8e09056.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/main.c6ea5f1c55801cc42b20.js"></script>
  -->

  <!-- not working -->
  <!--
  <script type="text/javascript" src="dist/angular-web-component/polyfill-webcomp.961642fb8dba585ce301.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/polyfills.8dee40beb0de2b87caa1.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/scripts.735c5408f5c2c8e09056.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/main.c6ea5f1c55801cc42b20.js"></script>
  -->

  <!-- working -->
  <script type="text/javascript" src="dist/angular-web-component/polyfill-webcomp-es5.97412fda132986395243.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/polyfills.8dee40beb0de2b87caa1.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/scripts.735c5408f5c2c8e09056.js"></script>
  <script type="text/javascript" src="dist/angular-web-component/main.c6ea5f1c55801cc42b20.js"></script>    

[MickL]

Same here, need to use @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js in latest Chrome on macOS Big Sur.

I wonder why with ngx-build-plus it does not work, but without ngx-build-plus it works without any polyfill. A polyfill is only needed for older browsers that do NOT support web components, as described in the Angular docs:

Any ideas?

[MickL]

I figured out that when using ng serve (that uses the builder ngx-build-plus:dev-server) it works without the polyfill (same as when NOT using ngx-build-plus) but when using ng build that uses the builder (ngx-build-plus:browser). I guess that ngx-build-plus is building to ES5 instead of the set target ES2015.