Ionic 5当包含Google Maps API Key时：TypeError：构造“HTMLElement”失败：请使用“new”运算符

6tdlim6h  于 2023-04-03  发布在  Ionic
关注(0)|答案(3)|浏览(152)

我在提供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密钥是否有问题，但那里看起来一切正常。
到目前为止，我已经尝试了以下方法：from：https://github.com/parcel-bundler/parcel/issues/2652我将我的编译器选项目标从es 5升级到es6。然后删除node_modules并运行npm cache clear --force。然后运行npm install，然后服务ionic应用程序，仍然得到相同的错误。
最初，我有一个想法，我今天引入了一些bug，但我没有添加任何新的依赖项。此外，我一直在多台机器上测试这个应用程序，我碰巧在另一台机器上提交了一个版本。我试图在那里服务应用程序，我得到了完全相同的错误。这也是完全随机发生的，在一天的中间，当我在编码一些完全不相关的东西时。这让我相信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"
    ]
  }
}

如前所述，在上面的“目标”最初是“es 5”。
我完全惊讶，这只是随机发生的。任何建议都表示赞赏，我很高兴提供任何信息是我的要求。

ionic-framework

3条答案

按热度按时间
ijnw1ujt

ijnw1ujt1#

谷歌更新了他们的MapAPI到版本3.52.7 -与突破性的变化。发言与谷歌的支持，他们正在回滚到3.52.6。
目前正在进行推广。
以下是Google Issue Tracker的链接：https://issuetracker.google.com/issues/275849045?pli=1

赞(0）分享  回复(0）举报  2023-04-03
ghhkc1vu

ghhkc1vu2#

看起来Google在最新的更新中搞砸了一些事情。在花了几个小时之后，我发现回到早期版本工作正常。使用v=3.51

赞(0）分享  回复(0）举报  2023-04-03
14ifxucb

14ifxucb3#

更新加载API的脚本标记，并请求一个较旧的版本号。例如，如果google.maps.version是“3.52.2”，则在脚本标记中使用v=3.51。此临时解决方案仅在有限的时间内有效。

赞(0）分享  回复(0）举报  2023-04-03
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com