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

Lamontlamontagne

Thanks @CodeSpy. your FreakyJolly's example worked perfeclty.... saved me hours of trouble! – Clamber

Answer 1

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

Hach

Where should I add this line ? in my component ts file ? or html file ? – Lamontlamontagne

@HosseinBajan Well.. the question is angular6+ .. But I edited my answer to clarify it – Hach

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. – Dissemble

What? Why did this work?! What the heck? Umm... thanks? – Vedis

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. – Lorou

For [Angular 6+] it only worked with adding at beginning of my Typescript file: /// <reference types="@types/googlemaps" /> (with "@types/" added). – Proudlove

@FlorianD. thanks, both works for me, strange. But it makes more sense with @types – Hach

Triple-Slash Directive worked for me on NG 6.1.1. Thanks! – Pileus

Where should I add this line ? in my component ts file ? or html file ? – Smelly

@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 – Hach

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 – Nicole

This also worked for me on Angular 8. Thank you so much! – Peary

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 – Haul

Answer 2

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

Illusive

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 – Coelostat

This worked for me on Angular 6 - needed to do both. I think this should be the recommended answer. – Crossbench

Works in Angular 8 – Seasickness

Confirmed on Angular 9, it's the people's chosen answer. – Andrews

this is working. got an error on my previous project angular 5. perfectly works – Matchlock

Answer 3

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

Kee

This solution worked for me out of all the solutions. – Kilimanjaro

This solution worked for me on Angular 8. Thank you so much! github.com/DefinitelyTyped/DefinitelyTyped/issues/37932 – Destination

Answer 4

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

declare module 'googlemaps';

It solved the issue

Emarie

Answer 5

It works fine

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

Supposal

Answer 6

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

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

Haplology

Answer 7

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.

Handhold

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. – Plagiarism

I just upgraded from Angular 7 to 8 to 9, and ran into this same issue. This answer from @Handhold 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. – Artist

Answer 8

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

Terchie

Answer 9

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

Musicianship

Answer 10

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

Deservedly

We can't update in our dependencies because of versioning, this could not be a solution – Jowett

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

Botswana

Answer 12

We already had

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

So adding

declare var google;

Was all we needed to add to the module

Headphone

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. – Foothill