web-dev-qa-db-ja.com

Angular 6アプリケーションは名前空間「google」を見つけることができません

この質問は、解決策が単に追加することである多くの場所で同様に現れました

import { } from '@types/googlemaps';

これはangularの過去のバージョンで解決策として機能しました。 Angular 6+

TS2304: Cannot find name 'google'.
TS2503: Cannot find namespace 'google'.

私がグーグルマップタイプを使用するところはどこでも、このようなエラーがたくさんあります。例えば：

let place: google.maps.places.PlaceResult = autocomplete.getPlace();

Googleマップを使用するすべての行の上に// @ts-ignoreを挿入することで問題をすばやく修正できますが、真の修正にもっと興味があります。しかし、これが機能するという事実は、私が自信を持っていないtsconfigの問題だと感じさせます。

Googlemapsがnode_modules/@ types内にインストールされていることを確認できますが、tsconfigについてはわかりません

ts.config

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

Stackblitzの例 を作成しました。コンソールを表示すると参照エラーがスローされます。次に何をしたらよいかわかりません。

angulartypescriptnamespacestsconfig
18
Murphy4

だから私は前にgithubで問題に遭遇し、これは私のために働いた

  • npm install --save-dev @ types/googlemaps

  • すべてのtsconfig * .jsonに追加：タイプ：[「googlemaps」]

  • ファイルの先頭に追加：const google：any;を宣言します。

  • Index.htmlの本文の最後に追加：

<script async defer type = "text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=****"> </ script>

試してみて、うまくいくかどうか教えてください

28
Vaibhav Kumar Goyal

本当に更新する必要があるtsconfig.jsonファイルはsrc/tsconfig.app.jsonにあります。

これらのファイルは、ルートディレクトリにあるtsconfig.jsonファイルのcompilerOptionsのtypesプロパティを空の配列でオーバーライドするため、そこにgooglemapsのタイプ定義を追加する必要があります。

例えば：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["googlemaps"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}
6
Robert Tamlyn

それを私のtsconfigコンパイラオプションのtypes配列に追加しても、うまくいきませんでした。ただし、@ types/googlemapsがインストールされている場合は、次のコマンドを使用して.tsファイルの先頭でこれを参照できます。

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

cf. トリプルスラッシュディレクティブ

4
Martyn Verhaegen

AGMを使用している場合は、インポートを修正できます。

import {} from '@agm/core/services/google-maps-types';
3
Edd Núñez

@ types/google-mapsをインストールして修正しました==@ types/googlemaps

これを実行するだけ

npm install @types/google-maps --save

を使用してコンポーネントにグーグルをインポートする

import { google } from "google-maps";
2
Mab Kiani