fix(google-maps): error during server-side rendering (#17744)

Fixes the `google-map` component throwing errors during server-side rendering.

Author: crisbeto

src/google-maps/google-map/google-map.ts

@@ -48,6 +48,12 @@ export const DEFAULT_HEIGHT = '500px';
 /** Arbitrary default width for the map element */
 export const DEFAULT_WIDTH = '500px';
 
+/**
+ * Whether we're currently rendering inside a browser. Equivalent of `Platform.isBrowser`,
+ * but copied over here so we don't have to add another dependency.
+ */
+const isBrowser = typeof window === 'object' && !!window;
+
 /**
  * Angular component that renders a Google Map via the Google Maps JavaScript
  * API.
@@ -200,13 +206,15 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private readonly _destroy = new Subject<void>();
 
   constructor(private readonly _elementRef: ElementRef) {
-    const googleMapsWindow: GoogleMapsWindow = window;
-    if (!googleMapsWindow.google) {
-      throw Error(
-          'Namespace google not found, cannot construct embedded google ' +
-          'map. Please install the Google Maps JavaScript API: ' +
-          'https://developers.google.com/maps/documentation/javascript/' +
-          'tutorial#Loading_the_Maps_API');
+    if (isBrowser) {
+      const googleMapsWindow: GoogleMapsWindow = window;
+      if (!googleMapsWindow.google) {
+        throw Error(
+            'Namespace google not found, cannot construct embedded google ' +
+            'map. Please install the Google Maps JavaScript API: ' +
+            'https://developers.google.com/maps/documentation/javascript/' +
+            'tutorial#Loading_the_Maps_API');
+      }
     }
   }
 
@@ -215,21 +223,24 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this._mapEl = this._elementRef.nativeElement.querySelector('.map-container')!;
-    this._setSize();
+    // It should be a noop during server-side rendering.
+    if (isBrowser) {
+      this._mapEl = this._elementRef.nativeElement.querySelector('.map-container')!;
+      this._setSize();
 
-    const combinedOptionsChanges = this._combineOptions();
+      const combinedOptionsChanges = this._combineOptions();
 
-    this._googleMapChanges = this._initializeMap(combinedOptionsChanges);
-    this._googleMapChanges.subscribe((googleMap: google.maps.Map) => {
-      this._googleMap = googleMap as UpdatedGoogleMap;
+      this._googleMapChanges = this._initializeMap(combinedOptionsChanges);
+      this._googleMapChanges.subscribe((googleMap: google.maps.Map) => {
+        this._googleMap = googleMap as UpdatedGoogleMap;
 
-      this._initializeEventHandlers();
-    });
+        this._initializeEventHandlers();
+      });
 
-    this._watchForOptionsChanges();
-    this._watchForCenterChanges();
-    this._watchForZoomChanges();
+      this._watchForOptionsChanges();
+      this._watchForCenterChanges();
+      this._watchForZoomChanges();
+    }
   }
 
   ngOnDestroy() {

src/universal-app/BUILD.bazel

@@ -20,6 +20,7 @@ ng_module(
     ],
     deps = [
         "@npm//@angular/platform-server",
+        "//src/google-maps",
         "//src/youtube-player",
     ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS,
 )

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -381,5 +381,7 @@ <h2>Virtual scroll</h2>
 </cdk-virtual-scroll-viewport>
 
 <h2>YouTube player</h2>
-
 <youtube-player videoId="dQw4w9WgXcQ"></youtube-player>
+
+<h2>Google Map</h2>
+<google-map height="400px" width="750px"></google-map>

src/universal-app/kitchen-sink/kitchen-sink.ts

@@ -38,6 +38,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSortModule} from '@angular/material/sort';
 import {MatStepperModule} from '@angular/material/stepper';
 import {YouTubePlayerModule} from '@angular/youtube-player';
+import {GoogleMapsModule} from '@angular/google-maps';
 import {Observable, of as observableOf} from 'rxjs';
 
 export class TableDataSource extends DataSource<any> {
@@ -140,6 +141,7 @@ export class KitchenSink {
 
     // Other modules
     YouTubePlayerModule,
+    GoogleMapsModule,
   ],
   declarations: [KitchenSink, TestEntryComponent],
   exports: [KitchenSink, TestEntryComponent],