@ type/googlemap/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 代码中看到了这两个错误:

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

在 Chrome 开发工具中,我看到了以下错误:

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

角度版本6 2.9.2版

我也试过从角度5开始。

55288 次浏览

Thanks to this documentation link : https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] You only have to add this line at the beginning (meaning line 1, with nothing before) of your Typescript file :

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

[Angular 5-] You only have to add this line anywhere in your Typescript file imports :

import {} from "googlemaps";

Thanks to the answer below, you may also need to add a file <root>/index.d.ts containing (didn't need it though in my case) :

declare module 'googlemaps';

The import can be simplified as follows:

import {} from "googlemaps";

Create a file at your projects root directory named index.d.ts and paste the following:

declare module 'googlemaps';

The created file needs to be located directory in the src folder

I found this article about what is the purpose of that file

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

I just created a index.d.ts in my src folder and added

declare module 'googlemaps';

It solved the issue

For me in Angular 6, it worked when I only used

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

In my angular 6+ project I've solved the problem declaring the googlemaps namespace in the top of the typescript file with this line:

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

with this done you must not import googlemaps in other ways and then it works. Use the correct path to your node_modules folder.

For further information and references about namespace usage in Typescript here the documentation.

It works fine

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

In my Angular 7+ project

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

"types": [
"googlemaps"
]

Thank you the link below 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

You can avoid this error next way:

After you have installed

npm install @types/googlemaps --save-dev

Go to src/tsconfig.app.json and add next line:

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

It is not on the root. You just need to add the code below on this file: 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

I have tried this solution I think it is the best because I didn't need to edit at packages and someone writes it without classification

  1. npm install @types/googlemaps --save-dev
  2. add "compilerOptions": { "types": ["googlemaps"] } in tsconfig.app.json file
  3. Dont forget to remove import {} from 'googlemaps'; from your code.

FYI: you must restart the server ng serve

We already had

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

So adding

declare var google;

Was all we needed to add to the module