Angular 2（Angular-cli）：未捕获的 ReferenceError：未定义谷歌答案

【问题标题】：Angular 2 (Angular-cli) : Uncaught ReferenceError: google is not definedAngular 2（Angular-cli）：未捕获的 ReferenceError：未定义谷歌
【发布时间】：2017-07-09 23:36:15
【问题描述】：

在我使用 Angular-cli 的 Angular 2 项目中，我已经挣扎了几个小时试图在 googlemaps PlaceResult 中工作。

我必须使用@types 安装googlemaps 并将其添加到我的tsconfig.json 配置文件的"types" 属性下。

{
    ...
    "types": [
      "google-maps"
    ]
  }
}

我成功地在我的 Angular 2 组件中使用google.maps.places.PlaceResult，只需导入它！

import { ActivatedRoute, Params } from "@angular/router";
import { MapsAPILoader } from "angular2-google-maps/core";

import PlaceResult = google.maps.places.PlaceResult;
import GeocoderRequest = google.maps.GeocoderRequest;
...

几个小时后，我不得不使用google.maps.Marker，它与PlaceResult 和GeocoderRequest 在同一个定义文件中。所以我只是将它导入如下：

[Line 12] import PlaceResult = google.maps.places.PlaceResult;
[Line 13] import GeocoderRequest = google.maps.GeocoderRequest;
[Line 14] import Marker = google.maps.Marker;
[Line 15] import LatLng = google.maps.LatLng;
...

但是我在运行时遇到了一个意外的错误说

Uncaught ReferenceError: google is not defined    search.component.ts:14
at Object.444 (search.component.ts:14)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.727 (app.config.ts:11)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.602 (src async:7)
at __webpack_require__ (bootstrap 26c2b97…:52)
at Object.1258 (.*$:7)
at __webpack_require__ (bootstrap 26c2b97…:52)
at webpackJsonpCallback (bootstrap 26c2b97…:23)
at main.bundle.js:1

请注意，webpack 在我的组件的第 14 行 处抛出此错误。这意味着（如果我错了，请纠正我）前面的行（使用相同的“google”）运行良好。

我错过了什么吗？

我用：

角度：2.4
Angular-CLI：1.0.0-beta.24
打字稿：2.0.10
angular2-google-maps：0.17.0

【问题讨论】：

标签： google-maps angular typescript angular-cli angular2-google-maps

【解决方案1】：

更新

关于 import LatLngBounds = google.maps.LatLngBounds; 我发现我在 Maps api 的 init 之前调用了 custructor (new LatLngBounds())。事实上，我使用的是@agm/core;。并且构造函数必须在load() 之后调用，如下所示

ngOnInit() {
    this.mapsAPILoader.load().then(() => {

                    this.page$.subscribe(page => {
                        if (page && page.content) {
                            this.latLngBounds = new google.maps.LatLngBounds();

                            page.content.forEach(w => this.latLngBounds.extend(new google.maps.LatLng(lat, lng)));
                        }
                    });

                }
            );
}

我在 typings.d.ts 中添加了以下导入

import {} from '@types/googlemaps';

原答案

我通过以下配置解决了我的问题：

1- package.json

"dependencies": {
    ...
    "googlemaps": "^1.12.0",
    ...
  }

2- tsconfig.json

"types": [
      ...
      "googlemaps"
    ]

3- 并在我的 index.html

中添加 google api 脚本

<head>
    ...
</head>
<body>
   <app-root>Loading...</app-root>

   <script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&language=fr" async defer></script>
</body>
</html>

4- 在组件中，像下面这样使用它

declare var google: any;

@Component({
    ...
})
export class SearchComponent implements OnInit, AfterViewInit {

    // Google Maps
    bounds: google.maps.LatLngBounds;
    markers: google.maps.Marker[];
    infoWindow: google.maps.InfoWindow;

}

【讨论】：

他们建议使用@agm/core 将您的 api 密钥放在 NgModule 中，而不是 index.html 中。检查this。
就我而言，我必须同时输入我的@NgModule 和我的index.html，之后，我不再有google is not defined 错误消息