Ionic 5 При включении ключа Google Maps Api: TypeError: не удалось создать «HTMLElement»: используйте «новый» оператор
Я получаю следующие ошибки, когда я обслуживаю свое приложение 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>
Приложение обслуживается, как и ожидалось.
Я проверил, нет ли проблем с моим API-ключом на Google Cloud Platform, но там все выглядит хорошо.
До сих пор я пробовал следующее: от: https://github.com/parcel-bundler/parcel/issues/2652 Я обновил цель параметров компилятора с es5 до es6. Затем я удалил node_modules и запустил npm cache clear --force. Затем я запустил npm install, а затем обслужил ионное приложение и все равно получил ту же ошибку.
Изначально у меня была мысль, что сегодня я внес в это какой-то баг, но никаких новых зависимостей я не добавлял. Кроме того, я тестировал это приложение на нескольких машинах, и у меня была версия, которую я зафиксировал на другой машине. Я пытался обслуживать приложение там, и я получаю ту же самую ошибку. Это также произошло совершенно случайно в середине дня, когда я кодировал что-то совершенно не связанное. Это наводит меня на мысль, что что-то из API карт Google ввело какую-то ошибку.
Для справки, вот мой 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».
Я совершенно удивлен, что это произошло случайно. Любые советы приветствуются, и я рад предоставить любую информацию, которую от меня требуют.
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
4
1
376
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Похоже, Google что-то напортачил с последним обновлением. Потратив на это несколько часов, я обнаружил, что возврат к более ранней версии работает нормально. Используйте v=3,51
Google обновил свой Maps API до версии 3.52.7 — с критическими изменениями. Разговаривая со службой поддержки Google, они откатываются на 3.52.6.
В настоящее время развертывание находится в процессе.
Вот ссылка на трекер Google: https://issuetracker.google.com/issues/275849045?pli=1
Другие вопросы по теме
Могу ли я использовать средство запуска URL, чтобы выбрать местоположение на карте?
Невозможно внедрить строгую политику безопасности контента с API карт Google
Как добавить разные метки в отношении результатов запроса разных местоположений с помощью Google Maps JavaScript Api?
Карты Google getPlace().geometry всегда не определены
Увеличение/уменьшение невозможно: всегда фокусируюсь на моем положении
Как удалить маркеры карты при обновлении setInterval (js)
Как добавить динамически, на основе мест результатов, информацию в маркеры при нажатии в Google Maps JavaScript Api?
Фильтровать маркеры Google Maps на основе расстояния
Как использовать containsLocation в библиотеке react-google-maps/api
Как стилизовать часть «незагруженной карты» Google Maps
Похожие вопросы
Машинописный текст ОШИБКА 2531 - «Возможно, объект имеет значение null»
Как изменить целевой уровень API моего приложения с 29 на 31 в ионном андроиде
Показать ошибку пользователю с Http pot Angular в ionic
Идентификатор передачи в слайд-шоу видео в Angular 12
Изменить элементы объекта внутри массива в Ionic с помощью Angular
Как дождаться методов, вызываемых в подписке?
Почему мое меню скрыто за содержимым моей страницы? Ионный 5
Хранилище конденсаторов или кордовское хранилище
SQLite Importer перезапишет мою базу данных при загрузке приложения?
Угловые скользящие направляющие не защелкиваются
Имея ту же проблему. Кто-то изменил что-то в Google и сломал кучу сайтов, я думаю