Skip to content
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

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

Closed
rinukkusu opened this issue Jun 18, 2018 · 23 comments

Comments

@rinukkusu
Copy link

@rinukkusu rinukkusu commented Jun 18, 2018

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)

image

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

@rinukkusu rinukkusu changed the title angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator BUG - angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator Jun 18, 2018
@rinukkusu rinukkusu changed the title BUG - angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator [BUG] angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator Jun 18, 2018
@rinukkusu rinukkusu changed the title [BUG] angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator [Bug] angular/elements: Failed to construct 'HTMLElement': Please use the 'new' operator Jun 18, 2018
@ericmartinezr

This comment has been minimized.

Copy link
Contributor

@ericmartinezr ericmartinezr commented Jun 18, 2018

#24390

@rinukkusu

This comment has been minimized.

Copy link
Author

@rinukkusu rinukkusu commented Jun 18, 2018

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

@rinukkusu rinukkusu closed this Jun 18, 2018
@jessndaa

This comment has been minimized.

Copy link

@jessndaa jessndaa commented Jun 20, 2018

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"
    ]
  }
}```
@rinukkusu

This comment has been minimized.

Copy link
Author

@rinukkusu rinukkusu commented Jun 21, 2018

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

@playground

This comment has been minimized.

Copy link

@playground playground commented Jul 17, 2018

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

@richnologies

This comment has been minimized.

Copy link

@richnologies richnologies commented Jul 23, 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.

@CaiqueCardoso19

This comment has been minimized.

Copy link

@CaiqueCardoso19 CaiqueCardoso19 commented Jul 24, 2018

Hello guys,

I have same problem.

@jessndaa solution works if you don't need run yout application in IE11.

The solution that works for me was:

  • upgrade document-register-element to 1.8.1

  • set my target to es5 like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}
  • remove encapsulation: ViewEncapsulation.Native from component notation (this does not works in IE11 without ShadowDOM polyfill).

It works and compile a simple component with @input and @output notations in Chrome 47+ and IE11.
I hope to help them.

@railsstudent

This comment has been minimized.

Copy link

@railsstudent railsstudent commented Jul 31, 2018

@CaiqueCardoso19 What is the shadowDOM polyfill you use? I cannot get angular element working in browser that is not Chrome. Thanks.

@CaiqueCardoso19

This comment has been minimized.

Copy link

@CaiqueCardoso19 CaiqueCardoso19 commented Jul 31, 2018

@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.

@railsstudent

This comment has been minimized.

Copy link

@railsstudent railsstudent commented Jul 31, 2018

@CaiqueCardoso19 Do I npm install webcomponents/webcomponentsjs first? Then add "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" in scripts array in angular.json file? Thanks.

I have a presentation on angular element in meetup this Friday evening and would like to solve the shadow polyfill issue. Thanks.

"hostEl.attachShadow is not a function" is the error message I see.

@tbhatti

This comment has been minimized.

Copy link

@tbhatti tbhatti commented Sep 7, 2018

@rinukkusu In tsconfig.json file, update "target": "es2015", previously it's "target": "es5"

@TriBasilOdrs

This comment has been minimized.

Copy link

@TriBasilOdrs TriBasilOdrs commented Oct 22, 2018

working solution in index.html:

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

This comment has been minimized.

Copy link

@ChrisTheButcher ChrisTheButcher commented Dec 13, 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

@SetTrend

This comment has been minimized.

Copy link

@SetTrend SetTrend commented Feb 4, 2019

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

@davidenke

This comment has been minimized.

Copy link

@davidenke davidenke commented Mar 1, 2019

@SetTrend you're right, it is needed at runtime, so it shoud be in dependencies rather than devDependencies.

@RobinDeBock

This comment has been minimized.

Copy link

@RobinDeBock RobinDeBock commented Mar 18, 2019

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!

@aashkashah

This comment has been minimized.

Copy link

@aashkashah aashkashah commented Mar 19, 2019

@ChrisTheButcher Great clean solution. Thanks a lot for sharing

@webmozart

This comment has been minimized.

Copy link

@webmozart webmozart commented Apr 25, 2019

I used @ChrisTheButcher's solution, but now my tests on PhantomJS report:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'
  at http://localhost:9876/_karma_webpack_/polyfills.js:131:0

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  SyntaxError: Unexpected token 'const'
  at http://localhost:9876/_karma_webpack_/polyfills.js:131:0
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  ReferenceError: Can't find variable: Promise
  at http://localhost:9876/_karma_webpack_/vendor.js:41470:22

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  ReferenceError: Can't find variable: Promise
  at http://localhost:9876/_karma_webpack_/vendor.js:41470:22

Anyone had/fixed this problem?

@javaland235

This comment has been minimized.

Copy link

@javaland235 javaland235 commented Jul 7, 2019

the following solved my issue:
first do the following
npm install @webcomponents/custom-elements --save

after that in the polyfills.ts add the following imports
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

@AndrWeisR

This comment has been minimized.

Copy link

@AndrWeisR AndrWeisR commented Jul 22, 2019

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

It worked OK at runtime for me with --save-dev, which makes sense if the module is only used to generate a polyfill at build time.

@rudolfolah

This comment has been minimized.

Copy link
Contributor

@rudolfolah rudolfolah commented Aug 4, 2019

For Angular 8, it looks like es2015 is the default and it seems to work? it was only when I used es5 as a target for the TypeScript compiler configuration that I would see this error.

Update: nevermind that didn't seem to work.

What I did is change to es5 (because es2015 differential loading doesn't quite work) and then I tried to add the webcomponents polyfill by using the instructions in the documentation:

ng add @angular/elements --name=*your_project_name*.

At this point, I expected the polyfill to automatically be added to polyfills.js or to some other file. It didn't seem to work as I keep getting this same error "Failed to construct 'HTMLElement'...". The documentation directs me to the webcomponents polyfill page but that doesn't give me much information to work with on how to correctly setup Angular to build custom elements.

From the angular.json file it looks like this custom script is loaded up:

"scripts": [
              {
                "input": "node_modules/document-register-element/build/document-register-element.js"
              }
            ]
@rudolfolah

This comment has been minimized.

Copy link
Contributor

@rudolfolah rudolfolah commented Aug 4, 2019

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.

@angular-automatic-lock-bot

This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 15, 2019

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 15, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.