Приложение 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();

Я могу быстро исправить проблему, вставив // @ts-ignore над всеми строками, в которых используются карты Google, но я гораздо больше заинтересован в истинном исправлении. Но тот факт, что это работает, заставляет меня почувствовать проблему tsconfig, в которой я не очень уверен.

Я могу подтвердить, что googlemaps установлен внутри node_modules/@types, но

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, который выдает ошибку ссылки, если вы просматриваете консоль. Я не знаю, что попробовать дальше.

Ответ 1

Так что я столкнулся с проблемой раньше в github, и это сработало для меня

npm install --save-dev @types/googlemaps
Добавление ко всем моим tsconfig *.json: types: ["googlemaps"]
Добавление вверху моего файла: declare const google: any;
Добавление в конец тела моего index.html:

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

попробуйте и скажите мне, работает ли это

Ответ 2

Файл tsconfig.json, который действительно необходимо обновить, находится в файле src/tsconfig.app.json.

Эти файлы переопределяют свойство types в compilerOptions файла tsconfig.json в корневом каталоге с пустым массивом, поэтому вы должны добавить туда определение типов для googlemaps.

Например:

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

Ответ 3

Я нашел что-то, если вы используете AGM, вы можете исправить это, импортировав:

import {} from '@agm/core/services/google-maps-types';

Ответ 4

Добавление его в массив типов моих опций компилятора tsconfig никогда не работало. Но если у вас установлен @types/googlemaps, вы можете сослаться на это в верхней части вашего файла .ts, используя:

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

ср Директивы Triple Slash