Wil*_*sen 4 google-maps-api-3 ionic-framework ionic5 angular12
当我为 Ionic 5 应用程序提供服务时，出现以下错误：
\nUncaught TypeError: Failed to construct \'HTMLElement\': Please use the \'new\' operator, this DOM object constructor cannot be called as a function.\n at Reflect.<anonymous> (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:261:93)\n at new _.C.HTMLElement (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:338:225)\n at new HostElement (index-7a8b7a1c.js:1847:17)\n at DefaultDomRenderer2.createElement (platform-browser.js:645:1)\n at BaseAnimationRenderer.createElement (animations.js:249:1)\n at createElementNode (core.js:5759:1)\n at \xc9\xb5\xc9\xb5elementStart (core.js:14957:1)\n at AppComponent_Template (template.html:3:3)\n at executeTemplate (core.js:9705:1)\n at renderView (core.js:9508:1)\njs?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.\n at Reflect.<anonymous> (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:261:93)\n at new _.C.HTMLElement (js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places:338:225)\n at new HostElement (index-7a8b7a1c.js:1847:17)\n at DefaultDomRenderer2.createElement (platform-browser.js:645:1)\n at BaseAnimationRenderer.createElement (animations.js:249:1)\n at createElementNode (core.js:5759:1)\n at \xc9\xb5\xc9\xb5elementStart (core.js:14957:1)\n at AppComponent_Template (template.html:4:5)\n at executeTemplate (core.js:9705:1)\n at renderView (core.js:9508:1)\n\n这是我的index.html，错误似乎来自其中：
\n<!DOCTYPE html>\n<html lang="en">\n\n<head>\n \n <meta charset="utf-8" />\n <title>Ionic App</title>\n\n <script>\n function initMap() {}\n </script>\n <script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places"></script>\n\n <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-MY_SHA+p" crossorigin="anonymous"/>\n <link rel="stylesheet" type="text/html" href="../node_modules/angular-calendar/css/angular-calendar.css">\n <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" />\n <meta name="format-detection" content="telephone=no" />\n <meta name="msapplication-tap-highlight" content="no" />\n\n <link rel="icon" type="image/png" href="assets/icon/favicon.png" />\n\n <!-- add to homescreen for ios -->\n <meta name="apple-mobile-web-app-capable" content="yes" />\n <meta name="apple-mobile-web-app-status-bar-style" content="black" />\n <base href="/">\n</head>\n\n<body>\n <app-root></app-root>\n</body>\n\n</html>\n\n我相信错误是在那里引入的，因为当我删除时
\n<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&v=3.exp&callback=initMap&libraries=places"></script>\n该应用程序已按预期提供。
\n我检查了 Google Cloud Platform 上的 api 密钥是否有问题，但一切看起来都很好。
\n到目前为止，我已尝试以下操作：\n来自： https: //github.com/parcel-bundler/parcel/issues/2652 \n我将编译器选项目标从 es5 升级到 es6。\n然后我删除了 node_modules 并运行了 npm 缓存清除--force。\n然后我运行 npm install 并提供 ionic 应用程序，但仍然遇到相同的错误。
\n最初，我以为我今天引入了一些错误，但我没有添加任何新的依赖项。此外，我一直在多台计算机上测试此应用程序，并且碰巧在另一台计算机上提交了版本一。我尝试在那里提供应用程序，但得到了完全相同的错误。当我在编码一些完全不相关的东西时，这也是完全随机发生的。\n这让我相信 google 地图 api 中的某些内容引入了一些错误。
\n作为参考，这是我的 package.json：
\n{\n "name": "treetopfour",\n "version": "0.0.1",\n "author": "Ionic Framework",\n "homepage": "https://ionicframework.com/",\n "scripts": {\n "ng": "ng",\n "start": "ng serve",\n "build": "ng build",\n "test": "ng test",\n "lint": "ng lint",\n "e2e": "ng e2e"\n },\n "private": true,\n "dependencies": {\n "@angular/animations": "^12.2.16",\n "@angular/cdk": "^12.2.13",\n "@angular/common": "^12.2.16",\n "@angular/core": "^12.2.16",\n "@angular/fire": "^6.1.5",\n "@angular/forms": "^12.2.16",\n "@angular/material": "^12.2.13",\n "@angular/platform-browser": "^12.2.16",\n "@angular/platform-browser-dynamic": "^12.2.16",\n "@angular/router": "^12.2.16",\n "@awesome-cordova-plugins/core": "^6.1.0",\n "@awesome-cordova-plugins/geolocation": "^6.1.0",\n "@babel/runtime": "^7.19.4",\n "@ctrl/ngx-emoji-mart": "^6.2.0",\n "@ionic-native/badge": "^5.36.0",\n "@ionic-native/core": "^5.36.0",\n "@ionic-native/file-chooser": "^5.36.0",\n "@ionic-native/file-path": "^5.36.0",\n "@ionic-native/file-picker": "^5.36.0",\n "@ionic-native/geolocation": "^5.36.0",\n "@ionic-native/splash-screen": "^5.36.0",\n "@ionic-native/status-bar": "^5.36.0",\n "@ionic/angular": "^5.9.4",\n "@ionic/core": "^5.9.4",\n "@types/googlemaps": "^3.43.3",\n "ajv": "^6.12.6",\n "angular-calendar": "^0.28.28",\n "angular-draggable-droppable": "^6.1.0",\n "angular-ng-autocomplete": "^2.0.12",\n "angular-resizable-element": "^5.0.0",\n "calendar-utils": "^0.10.4",\n "core-js": "^3.26.0",\n "date-fns": "^2.29.3",\n "dateformat": "^5.0.3",\n "firebase": "^8.10.1",\n "ionicons": "^5.5.4",\n "moment-timezone": "^0.5.41",\n "positioning": "^2.0.1",\n "rxjs": "^6.6.7",\n "tslib": "^2.4.0",\n "typesense": "^1.4.1",\n "zone.js": "^0.11.8"\n },\n "devDependencies": {\n "@angular-devkit/architect": "^0.1402.8",\n "@angular-devkit/build-angular": "^12.2.18",\n "@angular-devkit/core": "^14.2.8",\n "@angular-devkit/schematics": "^14.2.8",\n "@angular/cli": "^12.2.18",\n "@angular/compiler": "^12.2.16",\n "@angular/compiler-cli": "^12.2.16",\n "@angular/language-service": "^14.2.8",\n "@ionic/angular-toolkit": "^6.1.0",\n "@types/jasmine": "^4.3.0",\n "@types/jasminewd2": "^2.0.10",\n "@types/node": "^18.11.9",\n "codelyzer": "^6.0.2",\n "cordova-plugin-badge": "^0.8.8",\n "cordova-plugin-filepath": "^1.6.0",\n "cordova-plugin-filepicker": "^1.1.6",\n "cordova-plugin-geolocation": "^4.0.2",\n "jasmine-core": "^4.5.0",\n "jasmine-spec-reporter": "^7.0.0",\n "karma": "^6.4.1",\n "karma-chrome-launcher": "^3.1.1",\n "karma-coverage-istanbul-reporter": "^3.0.3",\n "karma-jasmine": "^5.1.0",\n "karma-jasmine-html-reporter": "^2.0.0",\n "protractor": "^7.0.0",\n "ts-node": "^10.9.1",\n "tslint": "^6.1.3",\n "typescript": "4.3.5"\n },\n "description": "An Ionic project",\n "cordova": {\n "plugins": {\n "cordova-plugin-whitelist": {},\n "cordova-plugin-statusbar": {},\n "cordova-plugin-device": {},\n "cordova-plugin-splashscreen": {},\n "cordova-plugin-ionic-webview": {},\n "cordova-plugin-ionic-keyboard": {},\n "cordova-plugin-geolocation": {},\n "cordova-plugin-badge": {},\n "cordova-plugin-filepicker": {},\n "cordova-plugin-filepath": {}\n },\n "config": {\n "ionic_copy": "./config/copy.config.js"\n },\n "platforms": [\n "browser"\n ]\n }\n}\n\n这是我的 angular.json （我为应用程序提供服务：“ionicserve -configuration=dev”）：
\n{\n "$schema": "./node_modules/@angular/cli/lib/config/schema.json",\n "version": 1,\n "defaultProject": "app",\n "newProjectRoot": "projects",\n "projects": {\n "app": {\n "root": "",\n "sourceRoot": "src",\n "projectType": "application",\n "prefix": "app",\n "schematics": {},\n "architect": {\n "build": {\n "builder": "@angular-devkit/build-angular:browser",\n "options": {\n "outputPath": "www",\n "index": "src/index.html",\n "main": "src/main.ts",\n "polyfills": "src/polyfills.ts",\n "tsConfig": "src/tsconfig.app.json",\n "assets": [\n {\n "glob": "**/*",\n "input": "src/assets",\n "output": "assets"\n },\n {\n "glob": "**/*.svg",\n "input": "node_modules/ionicons/dist/ionicons/svg",\n "output": "./svg"\n }\n ],\n "styles": [\n {\n "input": "node_modules/angular-calendar/css/angular-calendar.css"\n },\n {\n "input": "node_modules/@ctrl/ngx-emoji-mart/picker.css"\n },\n {\n "input": "src/theme/variables.scss"\n },\n {\n "input": "src/global.scss"\n },\n {\n "input": "src/app/app.scss"\n }\n ],\n "scripts": []\n },\n "configurations": {\n "dev": {\n "optimization": false,\n "outputHashing": "all",\n "sourceMap": true,\n "extractCss": true,\n "namedChunks": false,\n "aot": false,\n "extractLicenses": true,\n "vendorChunk": false,\n "buildOptimizer": false,\n "fileReplacements": [\n {\n "replace": "src/environments/environment.ts",\n "with": "src/environments/environment.ts"\n }\n ]},\n\n "production": {\n "fileReplacements": [\n {\n "replace": "src/environments/environment.ts",\n "with": "src/environments/environment.prod.ts"\n }\n ],\n "optimization": true,\n "outputHashing": "all",\n "sourceMap": false,\n "extractCss": true,\n "namedChunks": false,\n "aot": true,\n "extractLicenses": true,\n "vendorChunk": false,\n "buildOptimizer": true,\n "budgets": [\n {\n "type": "initial",\n "maximumWarning": "2mb",\n "maximumError": "5mb"\n }\n ]\n },\n "ci": {\n "progress": false\n }\n }\n },\n "serve": {\n "builder": "@angular-devkit/build-angular:dev-server",\n "options": {\n "browserTarget": "app:build"\n },\n "configurations": {\n "production": {\n "browserTarget": "app:build:production"\n },\n "dev": {\n "browserTarget": "app:build:dev"\n },\n "ci": {\n "progress": false\n }\n }\n },\n "extract-i18n": {\n "builder": "@angular-devkit/build-angular:extract-i18n",\n "options": {\n "browserTarget": "app:build"\n }\n },\n "test": {\n "builder": "@angular-devkit/build-angular:karma",\n "options": {\n "main": "src/test.ts",\n "polyfills": "src/polyfills.ts",\n "tsConfig": "src/tsconfig.spec.json",\n "karmaConfig": "src/karma.conf.js",\n "styles": [],\n "scripts": [],\n "assets": [\n {\n "glob": "favicon.ico",\n "input": "src/",\n "output": "/"\n },\n {\n "glob": "**/*",\n "input": "src/assets",\n "output": "/assets"\n }\n ]\n },\n "configurations": {\n "ci": {\n "progress": false,\n "watch": false\n }\n }\n },\n "lint": {\n "builder": "@angular-devkit/build-angular:tslint",\n "options": {\n "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],\n "exclude": ["**/node_modules/**"]\n }\n },\n "ionic-cordova-build": {\n "builder": "@ionic/angular-toolkit:cordova-build",\n "options": {\n "browserTarget": "app:build"\n },\n "configurations": {\n "production": {\n "browserTarget": "app:build:production"\n }\n }\n },\n "ionic-cordova-serve": {\n "builder": "@ionic/angular-toolkit:cordova-serve",\n "options": {\n "cordovaBuildTarget": "app:ionic-cordova-build",\n "devServerTarget": "app:serve"\n },\n "configurations": {\n "production": {\n "cordovaBuildTarget": "app:ionic-cordova-build:production",\n "devServerTarget": "app:serve:production"\n }\n }\n }\n }\n },\n "app-e2e": {\n "root": "e2e/",\n "projectType": "application",\n "architect": {\n "e2e": {\n "builder": "@angular-devkit/build-angular:protractor",\n "options": {\n "protractorConfig": "e2e/protractor.conf.js",\n "devServerTarget": "app:serve"\n },\n "configurations": {\n "production": {\n "devServerTarget": "app:serve:production"\n },\n "ci": {\n "devServerTarget": "app:serve:ci"\n }\n }\n },\n "lint": {\n "builder": "@angular-devkit/build-angular:tslint",\n "options": {\n "tsConfig": "e2e/tsconfig.e2e.json",\n "exclude": ["**/node_modules/**"]\n }\n }\n }\n }\n },\n "cli": {\n "defaultCollection": "@ionic/angular-toolkit"\n },\n "schematics": {\n "@ionic/angular-toolkit:component": {\n "styleext": "scss"\n },\n "@ionic/angular-toolkit:page": {\n "styleext": "scss"\n }\n }\n}\n\n这是我的 tsconfig.json：
\n{\n "compileOnSave": false,\n "compilerOptions": {\n "skipLibCheck": true,\n "baseUrl": "./",\n "outDir": "./dist/out-tsc",\n "sourceMap": true,\n "declaration": false,\n "module": "es2020",\n "moduleResolution": "node",\n "emitDecoratorMetadata": true,\n "experimentalDecorators": true,\n "importHelpers": true,\n "target": "es6",\n "typeRoots": [\n "node_modules/@types"\n ],\n "lib": [\n "es2018",\n "dom"\n ]\n }\n}\n\n如前所述，上面的“目标”最初是“es5”。
\n我完全惊讶于这只是随机发生的。如有任何建议，我们将不胜感激，我很乐意提供所需的任何信息。
\nGoogle 将其 Maps API 更新至版本 3.52.7 - 进行了重大更改。与 Google 支持人员交谈，他们正在回滚到 3.52.6。
目前正在推出。
以下是 Google 问题跟踪器的链接：https://issuetracker.google.com/issues/275849045 ?pli=1
| 归档时间： |
|
| 查看次数： |
501 次 |
| 最近记录： |