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

【问题标题】：@types/googlemaps/index.d.ts' is not a module@types/googlemaps/index.d.ts' 不是模块
【发布时间】：2018-12-07 15:28:20
【问题描述】：

我想在我的 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

Angular 版本 6 打字稿版本 2.9.2

我也尝试过 Angular 5。

【问题讨论】：

感谢@CodeSpy。你的 FreakyJolly 的例子效果很好......为我节省了几个小时的麻烦！

标签： angular typescript angular-cli angular-cli-v6

【解决方案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";

感谢answer below，您可能还需要添加一个文件<root>/index.d.ts，其中包含（虽然在我的情况下不需要）：

declare module 'googlemaps';

【讨论】：

我应该在哪里添加这一行？在我的组件 ts 文件中？还是html文件？
三斜杠有效，但为什么正常的导入语句不起作用？正是这种废话让 Angular 工作起来很痛苦。
什么？为什么这行得通？！有没有搞错？嗯...谢谢？
Angular 6+ 选项可能不是一个好主意，TS 文档说：--- 仅当您手动创作 d.ts 文件时才使用这些指令。--- 所以它' s 不应该在“.ts”文件中使用，只能在“d.ts”文件中使用。
对于 [Angular 6+]，它仅适用于在我的 Typescript 文件的开头添加：/// （添加了“@types/”） .

【解决方案2】：

导入可以简化如下：

import {} from "googlemaps";

在项目根目录中创建一个名为 index.d.ts 的文件并粘贴以下内容：

declare module 'googlemaps';

创建的文件需要位于src文件夹中的目录

我发现这篇文章是关于该文件的用途是什么

https://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htm

【讨论】：

刚刚尝试过这种方法（在 Vue.js 上）项目并且它有效，请记住，对于我的情况，我需要将此 hack 放在 src/ 文件夹下，比 tsconfig 低一级
这在 Angular 6 上对我有用——两者都需要。我认为这应该是推荐的答案。
在 Angular 8 中工作
在 Angular 9 上得到确认，这是人们选择的答案。
这行得通。我以前的项目 angular 5 出错了。完美的作品

【解决方案3】：

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

声明模块'googlemaps'；

解决了问题

【讨论】：

【解决方案4】：

对于 Angular 6 中的我来说，当我仅使用

时它会起作用

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

【讨论】：

【解决方案5】：

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

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

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

有关 Typescript 中命名空间使用的更多信息和参考here the documentation。

【讨论】：

使用 Angular 7.2，这是此页面上列出的对我成功的解决方案。在 types 目录中尝试额外的 index.d.ts' 没有成功，导入 {} 等也没有成功。
我刚刚从 Angular 7 升级到 8 到 9，遇到了同样的问题。 @bertonc96 的这个答案是解决我的问题的唯一解决方案，Jamie Love 的评论很有帮助，因为它将事情放在正确的上下文中（即，在没有其他答案中提供的任何其他建议的情况下尝试这个解决方案）。我唯一要澄清的是，包含上述代码的打字稿文件是您在其中使用 googlemaps API 的组件文件。就我而言，我在指令中使用它。

【解决方案6】：

效果很好

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

【讨论】：

【解决方案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

【讨论】：

这个解决方案在所有解决方案中都对我有用。
这个解决方案在 Angular 8 上对我有用。非常感谢！ github.com/DefinitelyTyped/DefinitelyTyped/issues/37932

【解决方案8】：

接下来你可以避免这个错误：

安装后

npm install @types/googlemaps --save-dev

转到 src/tsconfig.app.json 并添加下一行：

"compilerOptions": {
    ...,
    "types": [
         "googlemaps"
    ],
    ...,
},

【讨论】：

【解决方案9】：

它不在根目录上。您只需在此文件中添加以下代码： node_modules/@types/googlemaps/index.d.ts

declare module 'googlemaps';

【讨论】：

由于版本控制，我们无法更新依赖项，这不是解决方案

【解决方案10】：

    import { MapsAPILoader } from '@agm/core';
    declare var google;
    
    
     constructor(private mapsAPILoader: MapsAPILoader) {
         this.mapsAPILoader.load().then(() => {
              var mapProp = {
                center: new google.maps.LatLng(9.93040049002793, -84.09062837772197),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
            });
        
          }
    
    //Hope it helps

【讨论】：

【解决方案11】：

我已经尝试过这个解决方案我认为这是最好的，因为我不需要在包处进行编辑还有人写的没有分类

npm install @types/googlemaps --save-dev
在 tsconfig.app.json 文件中添加"compilerOptions": { "types": ["googlemaps"] }
不要忘记从您的代码中删除 import {} from 'googlemaps';。

仅供参考：您必须重启服务器ng serve

【讨论】：