错误TS2503：找不到名称空间“ google”。角度7

Question

我在我的角度应用程序中将google放置为自动完成搜索功能，当我运行该应用程序时，cli给出了该错误消息。

角度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-place.components.ts中声明google为环境：

// Declare google ambient
declare var google: any;

  

Ambient declarations 是一种告诉 TypeScript 编译器实际源代码存在于其他位置的方法。 ...   为了确保类型安全和智能，Ambient声明有助于将其他js库无缝集成到TypeScript中。

您还需要向项目添加相应的依赖项和类型。这些就是这些。

在tsconfig.json中-> "types":[... "googlemaps"]

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

从Google地图获取密钥，然后将该密钥放置在@NgModule下的app.module.ts中

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

Answer 2

我在Angular 8中也遇到了同样的问题。

我的CLI版本是8.1.2。

我解决了以下问题： app.module.ts ：

imports     : [
...
AgmCoreModule.forRoot({
          apiKey: 'your API key',
          libraries: ['places']
        })
]

tsconfig.app.json ：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": [
            "node",
            "googlemaps"
        ]
    },
...
}

如您所见-我告诉AgmCoreModule他到底需要什么模块，我告诉编译器他使用哪种额外的类型进行编译。 现在，我可以在组件中使用google了，如下所示：

import {MapsAPILoader} from '@agm/core';
...
constructor(private mapsAPILoader: MapsAPILoader){}

ngOnInit() {this.loadGoogle();}

loadGoogle() {
    this.mapsAPILoader.load().then(() => {
      this.placeService = new google.maps.places.AutocompleteService();
      this.placeServiceIsReady = true;
    });
  }