Ошибка TS2503: не удается найти пространство имен «Google». Радиально-7

Question

Я заставил Google разместить функцию автозаполнения поиска в моем угловом приложении, когда я запустил приложение, Cli выдало это сообщение об ошибке.

угловой вариант исполнения - 7.3.8

app.module.ts

import { GooglePlaceModule } from "ngx-google-places-autocomplete";
import { AgmCoreModule } from '@agm/core';

Google-place.components.ts

declare const google: any;
import { MapsAPILoader } from '@agm/core';
 public latitude: number;
 public longitude: number;
 public searchControl: FormControl;
 public zoom: number;

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

 ngOnInit() {

     // map script start==========================================
    //set google maps defaults
    this.zoom = 12;
    this.latitude =6.7370647;
    this.longitude =79.93713920000005;

    //create search FormControl
    this.searchControl = new FormControl();

    //set current position
    this.setCurrentPosition();

    //load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          //get the place result
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();

          //verify result
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }

          //set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;
          console.log("lat--> "+ this.latitude +" lon-->"+ this.longitude);
        });
      });
    });
    // map script end==========================================
  }

tsconfig.json

{
 .........."
    ],
    "types": ["googlemaps"]
  }
}

ошибка TS2503: не удается найти пространство имен "google".

Answer 1

Вы должны объявить Google в качестве компонента в вашем компоненте (google-place.components.ts):

// Declare google ambient
declare var google: any;

Декларации окружения - это способ сообщить компилятору TypeScript , что фактический исходный код существует в другом месте. ... Обеспечивая безопасность типов и интеллектуальный смысл, объявления Ambient помогают беспрепятственно интегрировать другие библиотеки js в TypeScript.

Вам также необходимо добавить соответствующие зависимости и типы в ваш проект. Так что это.

в tsconfig.json -> "types":[... "googlemaps"]

в package.json -> "dependencies":[... "googlemaps": "^1.12.0"]

Получить ключ от Google Maps и затем поместить этот ключ в app.module.ts в @NgModule

AgmCoreModule.forRoot({
   apiKey: 'your key generated from google maps'
});