命名空间“google.maps”没有导出成员“MouseEvent”答案

【问题标题】：Namespace 'google.maps' has no exported member 'MouseEvent'命名空间“google.maps”没有导出成员“MouseEvent”
【发布时间】：2021-04-05 07:15:10
【问题描述】：

我想将 Google 地图与我的 Angular 项目集成。在试用版中，我只是点击此链接 https://angular-maps.com/guides/getting-started/。目前，我陷入了错误：

node_modules/@agm/core/lib/directives/map.d.ts:232:43 - error TS2694: Namespace 'google.maps' has no exported member 'MouseEvent'

232 mapDblClick: EventEmitter<google.maps.MouseEvent>;

我去了文件位置，得到了这个

    mapClick: EventEmitter<google.maps.MouseEvent | google.maps.IconMouseEvent>;
    /**
     * This event emitter gets emitted when the user right-clicks on the map (but not when they click
     * on a marker or infoWindow).
     */
    mapRightClick: EventEmitter<google.maps.MouseEvent>;
    /**
     * This event emitter gets emitted when the user double-clicks on the map (but not when they click
     * on a marker or infoWindow).
     */
    mapDblClick: EventEmitter<google.maps.MouseEvent>;
    /**

依赖： npm install @agm/core npm i @types/googlemaps

【问题讨论】：

请查看我的答案，解决方案刚刚合并并发布，不再需要解决方法。

标签： javascript angular google-maps-api-3 angular-google-maps

【解决方案1】：

我发现，如果您使用@agm/core，其他一些答案中提到的解决方法不起作用。我在更新到 Angular 11 时遇到了同样的错误。

看来，Angular 11 不能与@agm/core 3.0.0-beta.0（最新版本）一起正常工作。尝试将@agm/core 降级到之前的版本1.1.0。这对我有用。

"dependencies": {
    "@agm/core": "^1.1.0"
}

【讨论】：

降级到@agm/core 1.1.0 对我有用，谢谢。我在Angular 9 中使用@agm/core 3.0.0-beta.0。

【解决方案2】：

它可以解决在 this github response 上找到的解决方案

"dependencies": {
     "@angular/google-maps": "^11.0.0"
}

然后添加

"devDependencies": {
     "@types/googlemaps": "3.39.14"
}

【讨论】：

【解决方案3】：

解决方案已经合并了，

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/50565#issuecomment-759785211

尝试从npm 安装@types/googlemaps@3.43.2。

【讨论】：

【解决方案4】：

Angular-Cli 11 和 "@agm/core": "^3.0.0-beta.0", 我通过将 @types/googlemaps: "3.39.12" 添加到我的 devDependencies 来解决，现在它可以工作了！

【讨论】：

【解决方案5】：

我在使用 Angular 11 时遇到了同样的问题。这是对我来说效果很好的组合（package.json）：

"dependencies": {
...
    "@agm/core": "^1.1.0",
... 
}
"devDependencies": {
...
"@types/googlemaps": "^3.39.12",
...
}

P.S.：一些教程建议添加 @google/maps 但我没有添加那个包。

【讨论】：

【解决方案6】：

在我的 Angular 12 项目中出现同样的错误，但在降级 @types/googlemaps 后它可以工作。

"dependencies": {
    "@agm/core": "^3.0.0-beta.0",
},
"devDependencies": {
    "@types/googlemaps": "^3.39.12",
}

【讨论】：

这帮助我解决了这个问题github.com/DefinitelyTyped/DefinitelyTyped/issues/48574 但不是来自 OP 的问题
感谢@Stephan TP，这对我有用。呸！几个小时的谷歌搜索，你就像救世主一样。每当有版本升级时，就会一次又一次地进入这个 agm 问题。想知道是否最好切换到 Angular 的 Google 地图组件。

【解决方案7】：

我正在添加一个带有激进解决方案的新答案。

TL;DR：

我摆脱了 agm/core 并将其替换为 ngx-autocomplete 包。在此过程中，我还将我的角度更新为 v12，但这很可能没有必要。 Ref to article.

加长版：

以前，我需要使用 2 个包

agm/core 获取在我的组件中提供 onAddressChange 的 google-map 版本，以便我可以获取 google 地点 ID、latLng 等
angular/google-maps 用于在地址上显示带有标记的地图
这些包需要与打字稿@type/googlemaps包进行版本同步

在查看了各种答案后，我发现了很多值得关注的东西

版本号（以及是否存在“^”很重要）
在依赖项而不是 devDependencies 中包含 @type 包可能会有所帮助
将“googlemaps”添加到所有 tsconfig*.json（.app.json、.spec.json、tsconfig.json）中的 compilerOptions.types 数组

尽管如此并尝试了各种配置，但我无法使其工作。看来我需要，为了修复我所有的错误，两个

@types/googlemaps": >= 3.39.14
@types/googlemaps":

有类似的错误

通用类型“MapHandlerMap”需要 1 个类型参数。

或

命名空间“google.maps”没有导出的成员“MouseEvent”

我的心态是这样的：在我找到好的版本之前，不要降级版本，而是将所有内容都升级到最新版本（使用ng update 相当顺利），其中包括所有角度模块，然后摆脱不兼容的未维护和/或弃用的库。

原来agm/core 成了罪魁祸首。看看在3.0.0-beta.0卡了多久，semver补丁版本beta.0已经是大提示了，不要用这个包。

在谷歌上搜索了一下之后，我发现ngx-google-places-autocomplete 包实现起来要简单得多，并且提供了一个更简单的接口，只需实现一个处理程序（只需查看我在 tl;dr 中链接的文章 -您可以在几秒钟内实现它）。它还兼容angular/google-maps和type包，无需做任何其他事情。

我提到我升级到了 angular 12，但我相信你不需要这样做，ngx-google-places-autocomplete 很可能适用于前角版本。只需摆脱 agm。

【讨论】：

【解决方案8】：

以上方法都不适合我，我的 Angular 版本是 10，根据 this，问题在于 Angular 团队目前正在处理的 @angular/googlemaps 和 @types/googlemaps 的兼容性。

【讨论】：

【解决方案9】：

我找到了这个解决方案并为我工作。

我使用 Angular 10

因为@agm/core support latest angular v.10

以下解决方案，

npm i @agm/core@^3.0.0-beta.0

npm i @types/googlemaps@3.39.13 --save-dev

完整代码

{
  "name": "web-vacc-care-ng10",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/animations": "~10.2.4",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/platform-browser": "~10.2.4",
    "@angular/platform-browser-dynamic": "~10.2.4",
    "@angular/router": "~10.2.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.3",
    "@angular/cli": "~10.2.3",
    "@angular/compiler-cli": "~10.2.4",
    "@types/googlemaps": "^3.39.13",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

为我工作。

【讨论】：

【解决方案10】：

自从升级到 Angular 11 后，我开始遇到这个问题。

解决方法是；在“node_modules/@agm/core/lib/services/”文件夹中，您需要在几个地方将 MapHandlerMap 更改为 MapMouseEvent（查看终端日志以查看位置）。

【讨论】：

当您重新安装软件包时，对node_modules 文件夹中文件的任何更改都将被丢弃，因此这只是一个临时修复。