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

Question

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

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

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

import {} from "@types/googlemaps";

Но я вижу эти 2 ошибки в 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'.

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

"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

Я тоже пробовал с Angular 5.

Answer 1

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

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

Answer 2

В моем проекте Angular 7+

$ npm install @types/googlemaps --save-dev
В tsconfig.app.json

"types": [
      "googlemaps"
]

Спасибо за ссылку ниже 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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

import {} from "googlemaps";

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

declare module 'googlemaps';

Answer 7

Благодаря этой ссылке на документацию: 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';