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：未定義谷歌

有辦法解決嗎？ 最簡單的方法是將它放在platformIsBrowser下，但我需要它在頁面加載時工作。

Answer 1

• 您應該遵循此處的所有步驟。
• 如果您繼續面臨同樣的問題，則必須創建.spec.ts文件以便定義 google 並超越錯誤。