I get the following errors when I serve my Ionic 5 application:
Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at Reflect.<anonymous> (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:261:93)
at new _.C.HTMLElement (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:338:225)
at new HostElement (index-7a8b7a1c.js:1847:17)
at DefaultDomRenderer2.createElement (platform-browser.js:645:1)
at BaseAnimationRenderer.createElement (animations.js:249:1)
at createElementNode (core.js:5759:1)
at ɵɵelementStart (core.js:14957:1)
at AppComponent_Template (template.html:3:3)
at executeTemplate (core.js:9705:1)
at renderView (core.js:9508:1)
js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:261 Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
at Reflect.<anonymous> (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:261:93)
at new _.C.HTMLElement (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:338:225)
at new HostElement (index-7a8b7a1c.js:1847:17)
at DefaultDomRenderer2.createElement (platform-browser.js:645:1)
at BaseAnimationRenderer.createElement (animations.js:249:1)
at createElementNode (core.js:5759:1)
at ɵɵelementStart (core.js:14957:1)
at AppComponent_Template (template.html:4:5)
at executeTemplate (core.js:9705:1)
at renderView (core.js:9508:1)
Here Is my index.html, where the error seems to be coming from:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<script>
function initMap() {}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-MY_SHA+p" crossorigin="anonymous"/>
<link rel="stylesheet" type="text/html" href="../node_modules/angular-calendar/css/angular-calendar.css">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<base href="/">
</head>
<body>
<app-root></app-root>
</body>
</html>
I believe the error is introduced there because when I remove
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places"></script>
The application is served up as expected.
I checked to see if there was a problem with my api key on Google Cloud Platform, but everything looks good there.
I have tried the following so far: from: https://github.com/parcel-bundler/parcel/issues/2652 I upgraded my compiler options target from es5 to es6. I then removed node_modules and ran npm cache clear --force. I then ran npm install and then served the ionic application, and still got the same error.
Initially, I had the thought that I introduced some bug into this today, but I have not added any new dependencies. Further, I have been testing this application on multiple machines, and I happened to have a version one commit back on another machine. I tried serving the application there, and I get the exact same error. This also happened completely randomly in the middle of the day when I was coding something completely unrelated. This leads me to believe that something from the google maps api introduced some error.
For reference, here is my package.json:
{
"name": "treetopfour",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.2.16",
"@angular/cdk": "^12.2.13",
"@angular/common": "^12.2.16",
"@angular/core": "^12.2.16",
"@angular/fire": "^6.1.5",
"@angular/forms": "^12.2.16",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "^12.2.16",
"@angular/platform-browser-dynamic": "^12.2.16",
"@angular/router": "^12.2.16",
"@awesome-cordova-plugins/core": "^6.1.0",
"@awesome-cordova-plugins/geolocation": "^6.1.0",
"@babel/runtime": "^7.19.4",
"@ctrl/ngx-emoji-mart": "^6.2.0",
"@ionic-native/badge": "^5.36.0",
"@ionic-native/core": "^5.36.0",
"@ionic-native/file-chooser": "^5.36.0",
"@ionic-native/file-path": "^5.36.0",
"@ionic-native/file-picker": "^5.36.0",
"@ionic-native/geolocation": "^5.36.0",
"@ionic-native/splash-screen": "^5.36.0",
"@ionic-native/status-bar": "^5.36.0",
"@ionic/angular": "^5.9.4",
"@ionic/core": "^5.9.4",
"@types/googlemaps": "^3.43.3",
"ajv": "^6.12.6",
"angular-calendar": "^0.28.28",
"angular-draggable-droppable": "^6.1.0",
"angular-ng-autocomplete": "^2.0.12",
"angular-resizable-element": "^5.0.0",
"calendar-utils": "^0.10.4",
"core-js": "^3.26.0",
"date-fns": "^2.29.3",
"dateformat": "^5.0.3",
"firebase": "^8.10.1",
"ionicons": "^5.5.4",
"moment-timezone": "^0.5.41",
"positioning": "^2.0.1",
"rxjs": "^6.6.7",
"tslib": "^2.4.0",
"typesense": "^1.4.1",
"zone.js": "^0.11.8"
},
"devDependencies": {
"@angular-devkit/architect": "^0.1402.8",
"@angular-devkit/build-angular": "^12.2.18",
"@angular-devkit/core": "^14.2.8",
"@angular-devkit/schematics": "^14.2.8",
"@angular/cli": "^12.2.18",
"@angular/compiler": "^12.2.16",
"@angular/compiler-cli": "^12.2.16",
"@angular/language-service": "^14.2.8",
"@ionic/angular-toolkit": "^6.1.0",
"@types/jasmine": "^4.3.0",
"@types/jasminewd2": "^2.0.10",
"@types/node": "^18.11.9",
"codelyzer": "^6.0.2",
"cordova-plugin-badge": "^0.8.8",
"cordova-plugin-filepath": "^1.6.0",
"cordova-plugin-filepicker": "^1.1.6",
"cordova-plugin-geolocation": "^4.0.2",
"jasmine-core": "^4.5.0",
"jasmine-spec-reporter": "^7.0.0",
"karma": "^6.4.1",
"karma-chrome-launcher": "^3.1.1",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"protractor": "^7.0.0",
"ts-node": "^10.9.1",
"tslint": "^6.1.3",
"typescript": "4.3.5"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-geolocation": {},
"cordova-plugin-badge": {},
"cordova-plugin-filepicker": {},
"cordova-plugin-filepath": {}
},
"config": {
"ionic_copy": "./config/copy.config.js"
},
"platforms": [
"browser"
]
}
}
Here is my angular.json (I serve the application with: "ionic serve -configuration=dev"):
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "node_modules/angular-calendar/css/angular-calendar.css"
},
{
"input": "node_modules/@ctrl/ngx-emoji-mart/picker.css"
},
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "src/app/app.scss"
}
],
"scripts": []
},
"configurations": {
"dev": {
"optimization": false,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.ts"
}
]},
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"dev": {
"browserTarget": "app:build:dev"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
},
"app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
And here is my tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"skipLibCheck": true,
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
As stated before, in the above "target" was initially "es5".
I am completely astonished that this just randomly happened. Any advice is appreciated, and I am happy to provide whatever information is requested of me.
Looks like Google screwed up something with the latest update. After spending hours on it, I found that going back to earlier version works fine. Use v=3.51