@types/googlemaps/index.d.ts' is not a module
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 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
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