angular: [Bug] angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator

I’m submitting a…


[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

We’re using @angular/elements to create a custom element, which we want to embed elsewhere in our non-angular projects. Since the Chrome Version 67.0.3396.87, we get an error in the console

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:28)
    at _createClass (core.js:8116)
    at _createProviderInstance$1 (core.js:8088)
    at initNgModule (core.js:8024)
    at new NgModuleRef_ (core.js:8747)
    at createNgModuleRef (core.js:8736)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:10561)
    at NgModuleFactory_.push../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:11263)

Expected behavior

Our compilation target was and is ES5, which did work in Chrome Version 66.x and also does work in all other major browsers.

Minimal reproduction of the problem with instructions

Use an Angular Elements project in the newest Chrome browser.

Environment


Angular version: 6.0.5

  "dependencies": {
    "@angular/animations": "^6.0.5",
    "@angular/common": "^6.0.5",
    "@angular/compiler": "^6.0.5",
    "@angular/core": "^6.0.5",
    "@angular/elements": "^6.0.5",
    "@angular/forms": "^6.0.5",
    "@angular/http": "^6.0.5",
    "@angular/platform-browser": "^6.0.5",
    "@angular/platform-browser-dynamic": "^6.0.5",
    "@angular/router": "^6.0.5",
    "@webcomponents/custom-elements": "^1.1.1",
    "@webcomponents/webcomponentsjs": "^2.0.0",
    "bootstrap": "^4.1.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "document-register-element": "^1.7.2",
    "moment": "^2.22.2",
    "ngx-bootstrap": "^3.0.0",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },

Browser:
- [x] Chrome (desktop) version 67

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 17
Comments: 23 (3 by maintainers)

Most upvoted comments

Hi, I have solved this issue by changing the “target”:“es5” in the tsconfig.json to “target”:“es2015” these is my tsconfig.json file

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}```

+74

jessndaa on Jun 20, 2018

Add this to your polyfills.ts on the bottom of your file

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

make sure to have the module installed with npm install @webcomponents/webcomponentsjs --save-dev

+52

cwdx on Dec 13, 2018

We solve this issue by adding the package before any other script:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.3/custom-elements-es5-adapter.js"></script>

No need to change the target to es2015.

+15

richnologies on Jul 23, 2018

@ericmartinezr Pinning document-register-element to 1.8.1 indeed solved the problem here. Thanks for the heads up!

+10

rinukkusu on Jun 18, 2018

working solution in index.html:

TriBasilOdrs on Oct 22, 2018

Add this to your polyfills.ts on the bottom of your file
/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'; 
make sure to have the module installed with npm install @webcomponents/webcomponentsjs --save-dev

Nice clean solution, this works great, thanks a lot!

RobinDeBock on Mar 18, 2019

Yes, that’s what we saw as well, but we need it to work in IE, which doesn’t support es2015, sadly 😦

rinukkusu on Jun 26, 2018

https://github.com/angular/angular/issues/24390

ericmartinezr on Jun 18, 2018

@ChrisTheButcher: Shouldn’t the NPM option rather be --save? Or isn’t this file required when the solution gets distributed?

SetTrend on Feb 4, 2019

@railsstudent I’ve used @webcomponentsjs following Angular’s docs: https://www.webcomponents.org/polyfills

But, it not working in IE11. Only works if i remove encapsulation: ViewEncapsulation.

CaiqueCardoso19 on Jul 31, 2018

@rinukkusu In tsconfig.json file, update “target”: “es2015”, previously it’s “target”: “es5”

tbhatti on Sep 7, 2018

The solution that some are using here is to simply use another library that isn’t document-register-element. However the official angular/elements package continues to use document-register-element so it isn’t a very good solution.

I have tracked down the issue to a particular version of document-register-element, the last working version was 1.8.1, the package version suggests using 1.7.2 and above. A proper fix will probably be made in document-register-element though for the time being I would suggest angular/element’s schematics change the required version from ^1.7.2 to >=1.7.2 <=1.8.1 until the issue in the upstream library is fixed.

ghost on Aug 4, 2019

For a single component, it works fine for me. But getting the same errors when there are nested child components.

playground on Jul 17, 2018