angular - @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

Angular 版本 6 打字稿版本 2.9.2

我也尝试过 Angular 5。

score 139 · Accepted Answer

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

score 37 · Accepted Answer

导入可以简化如下：

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

score 14 · Accepted Answer

在我的 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 -轻松/#more-2316

score 13 · Accepted Answer

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

声明模块“googlemaps”；

它解决了这个问题

score 11 · Accepted Answer

它工作正常

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

score 7 · Accepted Answer

对 Angular 6 中的我来说，它只在我使用时有效

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

score 4 · Accepted Answer

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

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

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

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

score 3 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

安装后

npm install @types/googlemaps --save-dev

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

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

score 0 · Accepted Answer

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

declare module 'googlemaps';

score 0 · Accepted Answer

我们已经有了

"typeRoots": [
  "node_modules/@types"
],

所以添加

declare var google;

我们只需要添加到模块中吗

score -1 · Accepted Answer

    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

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

12 回答 12

Related

Reference