@types/googlemaps/index.d.ts' is not a module

Question

I want to use the Google Maps API with my Angular project, so I used these two commands to install npm packages:

npm install @agm/core --save-dev
npm install @types/googlemaps --save-dev

I added this line to my component:

import {} from "@types/googlemaps";

But I see these 2 errors in 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'.

I added these lines

"types": ["googlemaps"]
"moduleResolution": "node"

to tsconfig.json and tsconfig.spec.json, but still no luck. On Chrome Dev Tools, I see the below error:

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

Angular version 6 Typescript Version 2.9.2

I tried from Angular 5, too.

Thanks @CodeSpy. your FreakyJolly's example worked perfeclty.... saved me hours of trouble! — ustad, May 10 '19 at 18:11

Jscti · Answer 1 · 2018-12-06T09:12:58.107

144

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

edited Dec 06 '18 at 09:12

answered Jul 04 '18 at 08:27

Jscti

14,096
4
62
87

4

Where should I add this line ? in my component ts file ? or html file ? – AMendis Jul 05 '18 at 14:00
@HosseinBajan Well.. the question is angular6+ .. But I edited my answer to clarify it – Jscti Jul 08 '18 at 21:32
28

The triple slash works, but WHY doesn't the normal import statement work? It's this kind of crap that just makes Angular painful to work with. – Steven Hoff Jul 11 '18 at 21:47
4

What? Why did this work?! What the heck? Umm... thanks? – WebWanderer Aug 09 '18 at 14:21
2

The Angular 6+ option may not be a good idea, TS docs say: --- Use these directives only when you’re authoring a d.ts file by hand.--- So it´s not supposed to be used in ".ts" file, only "d.ts" files. – guillefd Aug 11 '18 at 15:29
1

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// (with "@types/" added). – Florian D. Aug 12 '18 at 00:45
@FlorianD. thanks, both works for me, strange. But it makes more sense with `@types` – Jscti Aug 16 '18 at 12:05
Triple-Slash Directive worked for me on NG 6.1.1. Thanks! – Algis Aug 24 '18 at 14:04
1

Where should I add this line ? in my component ts file ? or html file ? – Saravanan Nandhan Sep 18 '18 at 04:39
@SaravananNandhan Not sure I can be more explicit than what I put in my answer `You only have to add this line at the beginning of your Typescript file` – Jscti Sep 18 '18 at 07:49
1

The file Cetia is referring to is any .ts file you need to use googlemaps. But you need to add it to the top of the file, before any imports, line 1 – Jus10 Nov 16 '18 at 04:29
This also worked for me on Angular 8. Thank you so much! – Glenster Aug 21 '19 at 05:38
Worked for me here as well, however it already worked in my local environment but the build server crashed, adding the reference did the trick – Henrik Bøgelund Lavstsen Mar 19 '21 at 10:42

score 38 · Answer 2 · edited Sep 19 '19 at 05:03

38

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

edited Sep 19 '19 at 05:03

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Sep 29 '18 at 18:11

Stephen Paul

37,253
15
92
74

Just tried this approach (on Vue.js) project and it worked, bear in mind for my case I needed to place this hack under the `src/` folder, one level down from tsconfig – Val Redchenko Nov 18 '18 at 15:40
This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer. – rmcsharry Dec 05 '18 at 07:02
Works in Angular 8 – Andrey Gubal Sep 25 '19 at 08:51
Confirmed on Angular 9, it's the people's chosen answer. – MDMoore313 Mar 05 '20 at 12:11
this is working. got an error on my previous project angular 5. perfectly works – LVW23 Apr 04 '20 at 04:54

score 16 · Answer 3 · answered Jul 18 '19 at 23:09

16

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

answered Jul 18 '19 at 23:09

Anurak Boonyaritpanit

189
1
4

This solution worked for me out of all the solutions. – Akshay Nov 28 '19 at 11:04
This solution worked for me on Angular 8. Thank you so much! https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37932 – Jaimin Patel Dec 19 '19 at 06:34

score 13 · Answer 4 · answered Dec 31 '18 at 08:59

13

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

declare module 'googlemaps';

It solved the issue

answered Dec 31 '18 at 08:59

Cool Coder

309
2
11

score 11 · Answer 5 · edited Mar 09 '19 at 13:35

11

It works fine

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

edited Mar 09 '19 at 13:35

Til

5,150
13
26
34

answered Mar 09 '19 at 13:17

Raghulraj Palanisamy

241
4
6

score 7 · Answer 6 · answered Jan 09 '19 at 22:40

7

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

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

answered Jan 09 '19 at 22:40

CamQuest

833
9
16

bertonc96 · Answer 7 · 2019-02-27T10:20:04.133

5

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.

edited Feb 27 '19 at 10:20

answered Jan 30 '19 at 16:39

bertonc96

772
2
13
24

3

Using Angular 7.2, this was the solution of the ones listed on this page that successfully worked for me. Trying the additional index.d.ts' in a `types` directory wasn't successful, nor was importing {} etc. – Jamie Love Feb 26 '19 at 23:37
1

I just upgraded from Angular 7 to 8 to 9, and ran into this same issue. This answer from @bertonc96 was the only solution that resolved my issue, and the comment from Jamie Love was helpful as it puts things in the right context (ie, try this solution without any of the other suggestions provided in the other answers). The only thing i'd clarify is that the typescript file to include the code above is your component file in which you're using the googlemaps API. In my case, I'm using it in a directive. – coder101 Apr 14 '20 at 04:47

score 3 · Answer 8 · answered Mar 10 '21 at 17:28

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

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

FYI: you must restart the server ng serve

score 1 · Answer 9 · answered Feb 12 '20 at 16:22

1

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"
    ],
    ...,
},

answered Feb 12 '20 at 16:22

Mykhailo Burda

11
1

score 0 · Answer 10 · answered Apr 02 '20 at 19:41

0

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

answered Apr 02 '20 at 19:41

Leon Grin

889
8
10

1

We can't update in our dependencies because of versioning, this could not be a solution – Med Dhaker Abdeljawed Nov 29 '20 at 21:56

score -1 · Answer 11 · answered Nov 10 '20 at 16:54

    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

score -1 · Answer 12 · answered Feb 28 '22 at 14:02

-1

We already had

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

So adding

declare var google;

Was all we needed to add to the module

answered Feb 28 '22 at 14:02

Ian

1

1

There are **11 existing answers** to this question, including a top-voted, accepted answer with over **one hundred votes**. Are you _certain_ your solution hasn't already been given? If not, why do you believe your approach improves upon the existing proposals, which have been validated by the community? Offering an explanation is _always_ useful on Stack Overflow, but it's _especially_ important where the question has been resolved to the satisfaction of both the OP and the community. Help readers out by explaining what your answer does different and when it might be preferred. – Jeremy Caney Mar 01 '22 at 00:14

@types/googlemaps/index.d.ts' is not a module

12 Answers12

Linked