question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Failed to construct 'HTMLElement' after updating to 4.0.1

See original GitHub issue

Bug Report

Ionic version: [x] 4.0.1

Current behavior: When loading the app in the browser the following error occurs. I just updated my app to ionic/core@4.0.1 and also updated to the newest angular is this an angular problem or ionic?

TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Steps to reproduce: Update to ionic/core@4.0.1 and angular@7.2.4

ionic.core.js:formatted:1 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new e (ionic.core.js:formatted:1)
    at EmulatedEncapsulationDomRenderer2.push.../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.createElement (ionic.core.js:formatted:1)
    at EmulatedEncapsulationDomRenderer2.push.../node_modules/@angular/platform-browser/fesm5/platform-browser.js.EmulatedEncapsulationDomRenderer2.createElement (ionic.core.js:formatted:1)
    at BaseAnimationRenderer.push.../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.createElement (ionic.core.js:formatted:1)
    at DebugRenderer2.push.../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.createElement (ionic.core.js:formatted:1)
    at createElement (ionic.core.js:formatted:1)
    at createViewNodes (ionic.core.js:formatted:1)
    at createEmbeddedView (ionic.core.js:formatted:1)
    at callWithDebugContext (ionic.core.js:formatted:1)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (ionic.core.js:formatted:1)

this are my dependencies

"@angular/animations": "^7.2.4",
 "@angular/cdk": "^7.3.1",
 "@angular/common": "^7.2.4",
 "@angular/core": "^7.2.4",
 "@angular/forms": "^7.2.4",
 "@angular/http": "^7.2.4",
 "@angular/material": "^7.3.1",
 "@angular/platform-browser": "^7.2.4",
 "@angular/platform-browser-dynamic": "^7.2.4",
 "@angular/platform-server": "^7.2.4",
 "@angular/router": "^7.2.4",
 "@babel/runtime": "^7.3.1",
 "@capacitor/android": "^1.0.0-beta.17",
 "@capacitor/cli": "1.0.0-beta.14",
 "@capacitor/core": "1.0.0-beta.14",
 "@capacitor/ios": "^1.0.0-beta.17",
 "@ionic-native/barcode-scanner": "^5.0.0",
 "@ionic-native/brightness": "^5.0.0",
 "@ionic-native/browser-tab": "^5.0.0",
 "@ionic-native/core": "^5.0.0",
 "@ionic-native/image-picker": "^5.0.0",
 "@ionic/angular": "^4.0.1",
 "@ionic/core": "^4.0.1",
 "@ionic/pro": "^2.0.4"


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:13 (4 by maintainers)

github_iconTop GitHub Comments

9reactions
weini01commented, Feb 7, 2019

changing target to es2015 didn´t help. I had to install npm install @webcomponents/webcomponentsjs --save-dev and add import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'; to my polyfills.ts file like described in angular/angular#24556 thanks for your hint.

0reactions
ionitron-bot[bot]commented, Dec 5, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Elements - Uncaught TypeError: Failed to construct ...
I was able to reproduce your error. The problem comes from build-script.js . You will have to modify it and make sure it's...
Read more >
ANGULAR ELEMENTS. Schritt-für-Schritt-Anleitung, um eine…
Kurz gesagt: Wolltest Du schon immer mal ein eigenes HTML-Element, ... to construct 'HTMLElement' after updating to 4.0.1-issuecomment):.
Read more >
Changelog - Sphinx documentation
After upgrading Sphinx, please clean latex build repertory of existing project before new build. #5163: html: hlist items are now aligned to top....
Read more >
Web Libraries in Jars - WebJars
Angular Directive to Paginate Anything, org.webjars, angular-paginate-anything, 4.0.2 4.0.1 3.1.1 3.1.0 3.0.0 2.5.4 2.5.3 2.1.1.
Read more >
Instagram Feed WordPress Plugin Change Log - Smash Balloon
Tweak: When installing Instagram Feed Pro for the first time, ... Fix: Added the ability to create the custom database tables if there...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found