Не могу найти имя 'google' angular 8

Как показывает ошибку при сборке.

ERROR in app/pages/TestPage4/TestPage4.ts:27:27 - error TS2304: Cannot find name 'google'.

27 this.geoCoder = новый google.maps.Geocoder; ~~~~~~ app / pages / TestPage4 / TestPage4.ts: 29: 32 - ошибка TS2304: не удается найти имя «google».

29 const autocomplete = новый google.maps.places.Autocomplete (this.searchElementRef.nativeElement); ~~~~~~ app / pages / TestPage4 / TestPage4.ts: 33: 24 - ошибка TS2503: не удается найти пространство имен «google».

33 постоянное место: google.maps.places.PlaceResult = autocomplete.getPlace (); ~~~~~~

Вот мой код ниже.

import { Component, OnInit, ElementRef, ViewChild, NgZone } from '@angular/core';
import { MapsAPILoader } from '@agm/core';

@Component({
  selector: 'app',
  templateUrl: './TestPage4.html',
  styleUrls: ['./TestPage4.css']
})

export class TestPage4 implements OnInit {
  lat: number;
  lng: number;
  zoom = 1;
  private geoCoder;

  @ViewChild('search', { static: false})
  public searchElementRef: ElementRef;

  constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone) {}

  ngOnInit() {
    //load Places Autocomplete
    
    this.mapsAPILoader.load().then(() => { 
      this.geoCoder = new google.maps.Geocoder;

      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          console.log(place);
          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          for (var i = 0; i < place.address_components.length; i++) {
            let addressType = place.address_components[i].types[0];
            //if (componentForm[addressType]) {
            //  var val = place.address_components[i][componentForm[addressType]];
            //  document.getElementById(addressType).value = val;
            //}
            // for the country, get the country code (the "short name") also
            console.log(addressType);
            if (addressType == "country") {
              console.log(place.address_components[i].short_name);
              console.log(place.address_components[i].long_name);
            }
            else{
              console.log('---others---');
              console.log(place.address_components[i].short_name);
              console.log(place.address_components[i].long_name);
            }
          }

          //set latitude, longitude and zoom
          this.lat = place.geometry.location.lat();
          this.lng = place.geometry.location.lng();
          this.zoom = 12;
        }); 
      });
    });
  }
}

Как я F12, он new google.maps.Geocoder и показывает мне, что он существует здесь ниже.
введите описание изображения здесь Но на самом деле, когда построен, он показывает указанная выше ошибка.

Обновление 1:

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "src",
    "paths": { "@angular/*": ["node_modules/@angular/*"] }
  }
}

Это файл tsconfig.json.

Обновление 2:
Использование declare var google: any; работает на
this.geoCoder = new google.maps.Geocoder; и
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);, но не работает на google.maps.places.PlaceResult Не удается найти пространство имен ' google ' const place: google.maps.places.PlaceResult = autocomplete.getPlace();


person Naman Kumar    schedule 26.08.2020    source источник
comment
Можете показать свой ts.config? Проблемы могут заключаться в том, что по умолчанию angular ts.config имеет типы: [] (пустой массив). В этом случае вам нужно добавить к типам "карты Google".   -  person Sherif Elmetainy    schedule 26.08.2020
comment
@SherifElmetainy, я думаю, что его файл tsconfig.json я обновил выше для справки.   -  person Naman Kumar    schedule 26.08.2020
comment
На вашем скриншоте это не класс google.maps, это просто типы для него. И ваша ошибка говорит о том, что вы не импортировали карты Google в свой компонент   -  person vitaliy kotov    schedule 26.08.2020
comment
Я уже объяснил, если я не импортировал в свой компонент, то почему он перенаправляется, когда я использую F12 для index.d.ts ..?   -  person Naman Kumar    schedule 27.08.2020
comment
@vitaliykotov он тоже должен показывать ошибку на странице машинописного текста ..?   -  person Naman Kumar    schedule 27.08.2020
comment
@ Наман. Тогда проблема может быть в tsconfig.app.json?   -  person Sherif Elmetainy    schedule 27.08.2020
comment
@SherifElmetainy, где я могу найти свой tsconfig.app.json в angular 8, чтобы я мог обновить вопрос ..   -  person Naman Kumar    schedule 27.08.2020
comment
Я исследовал, как использовать пакет agm, и нашел это пример. Похоже, проблема в компиляторе, который не может найти переменную google, хотя она добавлена ​​пакетом в приложение. Таким образом, вы должны объявить эту переменную как declare var google: any;   -  person vitaliy kotov    schedule 27.08.2020
comment
@vitaliykotov, я тоже пробовал, он работает на (new google.maps.Geocoder) и (new google.maps.places.Autocomplete (this.searchElementRef.nativeElement)), но в (google.maps.places.PlaceResult = autocomplete. getPlace ();) выдает ошибку: карта не найдена.   -  person Naman Kumar    schedule 28.08.2020
comment
@vitaliykotov я обновлю вопрос еще раз   -  person Naman Kumar    schedule 28.08.2020
comment
Я бы посоветовал попробовать этот подход   -  person vitaliy kotov    schedule 28.08.2020
comment
@vitaliykotov, я ответил на свой вопрос и нашел решение.   -  person Naman Kumar    schedule 29.08.2020


Ответы (1)


Нашел решение в tsconfig.app.json.

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

Добавлен только "googlemaps" в типах, который отсутствовал, и ошибка исчезла. Не нужно добавлять declare var google: any;, без него все будет отлично.

person Naman Kumar    schedule 29.08.2020