Failed to construct 'HTMLElement' after updating to 4.0.1

[weini01]

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"

[lucasbasquerotto]

There is this issue in an angular repo with an error similar to yours:

angular/angular#24556

Seems that changing the "target":"es5" in the tsconfig.json to "target":"es2015" solved the issue for most people.

How is your tsconfig.json? Try to compile with "target":"es2015" if it haven't this value yet.

From what I see in the ionic repo, it uses "target":"es2015" too:

https://github.com/ionic-team/ionic/blob/v4.0.1/angular/tsconfig.json

[weini01]

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.

[peterpeterparker]

Faced the same problem today while updating a project I didn't updated since 4 weeks and I had no other choice neither to solve it than by adding the webcomponentsjs polyfill ☹️

[paulstelzer]

Same here. I updated my app deps and had to add the webcomponents polyfill too to make my app working again

[EugeneNews]

This fix works well in new devices, but old devices - where many lines in polyfills already uncommented - we got several errors (crash) like:
Uncaught SyntaxError: Use of const in strict mode
Uncaught ReferenceError: Promise is not defined

[brandyscarney]

Thanks for the issue! Is this still an issue using latest?

[uncvrd]

@brandyscarney latest as in @ionic/angular@^4.5.0?

Yea, I am having this issue!

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : none
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.4.1, (and 17 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.15.3 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS
   Xcode      : Xcode 10.2.1 Build version 10E1001

[evertonrobertoauler]

I believe this problem is related with this issue:

https://codepen.io/evertonrobertoauler/pen/zgKNbJ

Please don't break the web and other libraries by replacing native code on the global scope, I believe it's better to create your own HTMLElement in an isolate scope.

[josh-m-sharpe]

I also had this issue. I solved it by adding webcomponents as @weini01 described.

As of this writing I am using these packages:

"@ionic/angular": "^4.11.2",
"@capacitor/android": "^1.2.1",
"@capacitor/core": "^1.2.1",
"@capacitor/ios": "^1.2.1",

[adamdbradley]

This is more than likely due to angular/webpack tooling incorrectly transforming how HTMLElement should be extended when transpiled to es5. But as @weini01 pointed out this is fixed by adding the correct polyfill.

[josh-m-sharpe]

I disagree that this issue is ‘fixed’

The next poor sap has to find this github issue in order to resolve the issue.

The issue should be reopened until it doesn’t happen out of the box.

[REPTILEHAUS]

+1 for re-opening.. issues not fixed at all

[ionitron-bot]

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.