@ types/googlemaps/index.d.ts'不是模块

Question

我想在我的Angular项目中使用Google Maps API,因此我使用这两个命令来安装npm包:

npm install @agm/core --save-dev
npm install @types/googlemaps --save-dev

我将此行添加到我的组件中:

import {} from "@types/googlemaps";

但是我在VS Code中看到了这两个错误:

[ts] File 'h:/Angular Projects/Breakfast/client/breakfast/node_modules/@types/googlemaps/index.d.ts' is not a module.
[ts] Cannot import type declaration files. Consider importing 'googlemaps' instead of '@types/googlemaps'.

我添加了这些行

"types": ["googlemaps"]
"moduleResolution": "node"

到tsconfig.json和tsconfig.spec.json,但仍然没有运气.在Chrome开发工具上,我看到以下错误:

Error: Uncaught (in promise): TypeError: Cannot read property 'Autocomplete' of undefined
TypeError: Cannot read property 'Autocomplete' of undefined

角度版本6打字稿版本2.9.2

我也尝试过Angular 5.

Answer 1

感谢此文档链接:https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+]你只需要在你的Typescript文件的开头添加这一行(意思是第1行,之前没有任何内容):

/// <reference types="@types/googlemaps" />

[Angular 5-]您只需要在您的Typescript文件导入中的任何位置添加此行:

import {} from "googlemaps";

感谢下面的答案,您可能还需要添加一个<root>/index.d.ts包含的文件(虽然在我的情况下不需要它):

declare module 'googlemaps';

Answer 2

您的导入可以简化如下:

import {} from "googlemaps";

在您指定的项目根目录中添加一个文件index.d.ts并粘贴以下内容:

declare module 'googlemaps';

Answer 3

我刚刚在我的src文件夹中创建了一个index.d.ts并添加了

声明模块'googlemaps';

它解决了这个问题

Answer 4

工作正常

npm install --save-dev @types/googlemaps
At the beggining of your component file, type:
/// <reference types="@types/googlemaps" />

Answer 5

对我来说，在Angular 6中，当我只使用

/// <reference types="@types/googlemaps" />

Answer 6

在我的 Angular 6+ 项目中，我已经解决了在 typescript 文件顶部使用以下行声明 googlemaps 命名空间的问题：

/// <reference path="../../../../../../node_modules/@types/googlemaps/index.d.ts"/>

完成此操作后，您不得以其他方式导入谷歌地图，然后它就可以工作了。使用正确的 node_modules 文件夹路径。

有关 Typescript 中命名空间使用的更多信息和参考，请参阅此处的文档。

Answer 7

在我的Angular 7+项目中

$ npm install @types/googlemaps --save-dev
在tsconfig.app.json中

"types": [
      "googlemaps"
]

谢谢您下面的链接 https://www.freakyjolly.com/angular-7-6-add-google-maps-in-angular-2-plus-applications-using-angular-google-maps-module-agm-core -easily /＃more-2316