ไม่พบชื่อ 'google' เชิงมุม 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 เติมข้อความอัตโนมัติ = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement); ~~~~~~ app/pages/TestPage4/TestPage4.ts:33:24 - ข้อผิดพลาด TS2503: ไม่พบเนมสเปซ 'google'

33 สถานที่ const: 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 ไม่พบเนมสเปซ ' กูเกิล' const place: google.maps.places.PlaceResult = autocomplete.getPlace();