@types/googlemaps/index.d.ts 'не является модулем

Я хочу использовать API Карт Google с моим проектом Angular, поэтому я использовал эти две команды для установки пакетов npm:

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

Я добавил эту строку в свой компонент:

import {} from "@types/googlemaps";

Но я вижу эти 2 ошибки в коде VS:

[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'.

Я добавил эти строки

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

к tsconfig.json и tsconfig.spec.json, но все равно не повезло. В Chrome Dev Tools я вижу ошибку ниже:

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

Угловая версия 6 Типовая версия 2.9.2

Я тоже пробовал Угловое 5.

Ответы

Ответ 1

Благодаря этой ссылке на документацию: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+] Вам нужно только добавить эту строку в начале (имеется в виду строка 1, но перед этим ничего) в вашем файле Typescript:

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

[Angular 5-] Вам нужно только добавить эту строку в любом месте импорта файлов Typescript:

import {} from "googlemaps";

Благодаря приведенному ниже ответу, вам также может понадобиться добавить файл <root>/index.d.ts содержащий его (хотя в моем случае это не требовалось):

declare module 'googlemaps';

Ответ 2

Импорт может быть упрощен следующим образом: 

import {} from "googlemaps";

Создайте файл в корневом каталоге ваших проектов с именем index.d.ts и вставьте следующее: 

declare module 'googlemaps';

Созданный файл должен находиться в каталоге в папке src

Я нашел эту статью о том, какова цель этого файла

https://www.bennadel.com/blog/3169-adding-custom-typings-files-d-ts-in-an-angular-2-typescript-application.htm

Ответ 3

Я просто создал index.d.ts в моей папке src и добавил

объявить модуль "googlemaps";

Это решило проблему

Ответ 4

Работает нормально

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

Ответ 5

Для меня в Angular 6 это работало, когда я использовал только

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

Ответ 6

В моем угловом проекте 6+ я решил проблему с объявлением пространства имен googlemaps в верхней части файла машинописного текста этой строкой:

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

После этого вы не должны импортировать GoogleMap другими способами, и тогда это работает. Используйте правильный путь к вашей папке node_modules.

Для получения дополнительной информации и ссылок на использование пространства имен в Typescript здесь документация.