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

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

感谢此文档链接：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';

导入可以简化如下：

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

工作正常

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

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

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

声明模块“ googlemaps”；

它解决了问题

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

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

在我的6+角项目中，我已经解决了在打字稿文件顶部声明googlemaps命名空间的问题，并带有以下内容：

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

完成此操作后，您一定不能以其他方式导入googlemaps，然后它才能工作。使用正确的路径到您的node_modules文件夹。

有关Typescript中名称空间用法的更多信息和参考，请参见文档。

您可以通过以下方式避免此错误：

安装后

npm install @ types / googlemaps --save-dev

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

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

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

declare module 'googlemaps';

    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