找不到名称“ Google” Angular 8

编程问答 2022-08-14

问题描述

因为它在构建过程中显示错误。

app / pages / TestPage4 / TestPage4.ts：27：27中的错误-错误TS2304：找不到名称“ google”。

27 this.geoCoder =新的google.maps.Geocoder； ~~~~~~ app / pages / TestPage4 / TestPage4.ts：29：32-错误TS2304：找不到名称“ google”。

29 const autocomplete = new 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，并在下面显示了它的存在。

enter image description here

但是实际上构建时，它会显示上述错误。

更新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：
在{br />上可以使用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();

解决方法

在 tsconfig.app.json 中找到了解决方案。

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

仅在缺少的类型中添加了"googlemaps"，错误消失了。没有它，无需添加declare var google: any;就可以了。

angularangular8googleplacesautocompletetypescripttypescript