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";

由于answer below，您可能还需要添加一个文件<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

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

时，它起作用了

let first (a, b) = a * b
let second (a, b) = a ** b
let addUp a b = a + b

let answer =
    (2.0, 5.0)
    |> fun t -> first t, second t
    ||> addUp

// answer is 42.0

Answer 5

效果很好

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

Answer 6

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

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

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

有关打字稿here the documentation中名称空间使用的更多信息和参考。

Answer 7

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

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

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

Answer 8

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

安装后

npm install @ types / googlemaps --save-dev

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

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

Answer 9

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

declare module 'googlemaps';

Answer 10

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

Answer 11

    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

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

11 个答案: