New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
playground opened this Issue Jul 4, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@playground
Copy link

playground commented Jul 4, 2018

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

This comment has been minimized.

Copy link
Owner

manfredsteyer commented Jul 6, 2018

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

This comment has been minimized.

Copy link

DanielNetzer commented Nov 18, 2018

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment