Angular Universal - 未定义谷歌

Question

我有一个指令，使文本输入到谷歌的地方自动完成输入，看起来像:

import { Directive, AfterViewInit , Output, EventEmitter, NgZone, ElementRef } from '@angular/core'
// import { MapsAPILoader } from '@agm/core'
import { MapsAPILoader } from '@laurentgoudet/agm-core';


@Directive({
    selector: '[locationAutocomplete]'
})
export class LocationAutocompleteDirective implements AfterViewInit  {

    @Output() locationChange: EventEmitter<any> = new EventEmitter();

    constructor(
        private mapsLoader: MapsAPILoader,
        private ngZone: NgZone,
        private searchElementRef: ElementRef
    ) { }

    ngAfterViewInit() {
        this.mapsLoader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
                //types: ["address"]
            });
            autocomplete.addListener("place_changed", () => {
                this.ngZone.run(() => {
                    // Get the place result
                    let place: any = autocomplete.getPlace();

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

                    place.originalAddress = this.searchElementRef.nativeElement.value
                    this.locationChange.emit(place);
                });
            });
        });
    }
}

当我尝试使用 Universal 为应用程序提供服务时，问题就出现了。我收到以下错误:

ReferenceError: google is not defined

有办法解决吗？最简单的方法是将它放在 platformIsBrowser 下，但我需要它在页面加载时工作。

Answer 1

• 您应该遵循所有步骤 here .
• 如果您继续面临同样的问题，则必须创建 .spec.ts 文件，以便定义 google 并超越错误。