Visual Studio Code: node_modules/@types/googlemaps/index.d.ts' is not a module

Question

I followed this tutorial: Integrating Google Maps in Angular 5 to get started with Google Maps in my Angular 5 application using Visual Studio Code (version 1.24.1 on Mac). Until very recently everything was working fine but since a few days ago (my guess is an update of VS Code took place in the background) I get an error on the import of Google Maps in Visual Studio Code which never gave me an error before:

import { } from '@types/googlemaps';

I get the following error:

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

(note full_path is the complete parent path, not showing here for brevity)

I can see the library located at the correct location in my node_modules directory. Also the library is referenced correctly in my package.json (it's version 3.30.10). I did not run npm update or any other update in between when it was working and when it started giving the error.

When I run "npm start" or "npm run build" it works just fine and the application gets served as it did before (and the Google Map renders perfectly) so it would appear to be a Visual Studio Code problem.

In that sense it's not really blocking me but it would be nice to get the error out of my IDE. Does anyone have any pointers on how to get rid of the error? Thanks!

EDIT I read here: How to install TS typings for Google maps that there are two possible solutions. A triple-slash directive or altering your tsconfig.json. For me only the triple-slash directive worked:

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

Would still be interested in a real fix where I can just import the Google Maps types.

Answer 1

Use only below line at the top of your .component.ts file, It's working for me.

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

MY tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

MY @types/googlemaps version - "@types/googlemaps": "^3.30.11",

My @angular/core version - "@angular/core": "^6.1.0",

don't use below lines (Some answers recommending either one) Earlier when i used angular 6.0.0 it worked with these but when i upgraded it didn't :-

import { } from 'googlemaps'; 
import { } from '@types/googlemaps';