@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         


        

Answer 1

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.

Answer 2

It works fine

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

Answer 3

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

Answer 4

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

Answer 5

    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

Answer 6

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