我在为 Ionic 5 应用程序提供服务时遇到以下错误：
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)
这是我的 index.html，错误似乎来自：
<!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>
我相信错误是在那里引入的，因为当我删除
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places"></script>
应用程序按预期提供。
我检查了我在 Google Cloud Platform 上的 api key 是否有问题，但一切看起来都很好。
到目前为止我已经尝试过以下方法： 来自：https://github.com/parcel-bundler/parcel/issues/2652 我将我的编译器选项目标从 es5 升级到 es6。 然后我删除了 node_modules 并运行了 npm cache clear --force。 然后我运行 npm install 并为 ionic 应用程序提供服务，但仍然出现相同的错误。
最初，我以为我今天引入了一些错误，但我没有添加任何新的依赖项。此外，我一直在多台机器上测试这个应用程序，我碰巧在另一台机器上提交了一个版本。我尝试在那里提供应用程序，但我得到了完全相同的错误。这也完全是在一天中午我正在编写完全不相关的代码时随机发生的。 这让我相信来自 google maps api 的东西引入了一些错误。
作为参考，这是我的 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"
]
}
}
这是我的 angular.json（我为应用程序提供服务：“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"
}
}
}
这是我的 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"
]
}
}
如前所述，在上面的“目标”中最初是“es5”。
我完全惊讶这只是随机发生的。感谢任何建议，我很乐意提供我所要求的任何信息。
看起来谷歌在最新更新中搞砸了。花了几个小时后，我发现回到早期版本工作正常。使用 v=3.51
Google 将他们的 Maps API 更新到版本 3.52.7 - 进行了重大更改。与谷歌支持交谈，他们正在回滚到 3.52.6.
目前正在推出中。
这是 Google 问题跟踪器的链接：https://issuetracker.google.com/issues/275849045?pli=1
我遇到了同样的问题......在我的情况下，我的应用程序运行良好，突然发生了一些事情并崩溃了
我们现在有 200 多个应用程序突然崩溃。谷歌真的搞砸了。
我，我的生产应用程序崩溃了，我的用户无法通过应用程序访问我的平台:(