web-dev-qa-db-ja.com

@ types / googlemaps / index.d.ts 'はモジュールではありません

AngularプロジェクトでGoogle Maps APIを使用したいので、次の2つのコマンドを使用してnpmパッケージをインストールしました。

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

コンポーネントに次の行を追加しました。

import {} from "@types/googlemaps";

しかし、VS Codeには次の2つのエラーが表示されます。

[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

Angularバージョン6 TypeScriptバージョン2.9.2

私もAngular 5から試しました。

angulartypescriptangular-cliangular-cli-v6
50
AMendis

このドキュメントリンクのおかげで： https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

[Angular 6+]この行を追加する必要があるのは、TypeScriptファイルのbeginning（行1の前に何もないことを意味します）：

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

[Angular 5-] TypeScriptファイルのインポートのどこかにこの行を追加するだけです。

import {} from "googlemaps";

以下の回答 のおかげで、<root>/index.d.tsを含むファイルを追加する必要があるかもしれません（私の場合は必要ありませんでした）：

declare module 'googlemaps';
99
Cétia

インポートは次のように簡略化できます。

import {} from "googlemaps";

プロジェクトのルートディレクトリにindex.d.tsという名前のファイルを追加し、次を貼り付けます。

declare module 'googlemaps';
21
Stephen Paul

私はsrcフォルダにindex.d.tsを作成し、追加しました

モジュール「googlemaps」を宣言します。

問題を解決しました

8
Cool Coder

うまくいく

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

Angular 6の私にとっては、onlyが使用されたときに動作しました

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

私のangular 6+プロジェクトでは、次の行でTypeScriptファイルの上部にあるgooglemaps名前空間を宣言する問題を解決しました。

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

これが完了したら、他の方法でgooglemapsをインポートしてはいけません。 node_modulesフォルダーへの正しいパスを使用します。

TypeScriptでの名前空間の使用に関する詳細情報とリファレンスについては、 こちらのドキュメント をご覧ください。

3
bertonc96

私の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

1
Anurak Boonyaritpanit