fix(google-maps): use console.error instead of hard error (#33917)

Switches from throwing an error in a promise to using `console.error` since the former basically guarantees that the promise will be unhandled.

Author: crisbeto

src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.spec.ts

@@ -1,5 +1,5 @@
 import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
 import {MapMarker} from '../map-marker/map-marker';
@@ -51,19 +51,23 @@ describe('DeprecatedMapMarkerClusterer', () => {
     (window as any).MarkerClusterer = undefined;
   });
 
-  // We can't test this one easily without `fakeAsync`.
-  it('throws an error if the clustering library has not been loaded', fakeAsync(() => {
+  it('throws an error if the clustering library has not been loaded', async () => {
+    const spy = spyOn(console, 'error');
     (window as any).MarkerClusterer = undefined;
     markerClustererConstructorSpy = createDeprecatedMarkerClustererConstructorSpy(
       markerClustererSpy,
       false,
     );
 
-    expect(() => {
-      fixture.detectChanges();
-      flush();
-    }).toThrowError(/MarkerClusterer class not found, cannot construct a marker cluster/);
-  }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(spy).toHaveBeenCalledWith(
+      jasmine.stringContaining(
+        'MarkerClusterer class not found, cannot construct a marker cluster',
+      ),
+    );
+  });
 
   it('initializes a Google Map Marker Clusterer', async () => {
     fixture.detectChanges();

src/google-maps/deprecated-map-marker-clusterer/deprecated-map-marker-clusterer.ts

@@ -215,33 +215,35 @@ export class DeprecatedMapMarkerClusterer
     new EventEmitter<MarkerClustererInstance>();
 
   ngOnInit() {
-    if (this._canInitialize) {
-      this._ngZone.runOutsideAngular(() => {
-        this._googleMap._resolveMap().then(map => {
-          if (
-            typeof MarkerClusterer !== 'function' &&
-            (typeof ngDevMode === 'undefined' || ngDevMode)
-          ) {
-            throw Error(
+    if (!this._canInitialize) {
+      return;
+    }
+
+    this._ngZone.runOutsideAngular(() => {
+      this._googleMap._resolveMap().then(map => {
+        if (typeof MarkerClusterer !== 'function') {
+          if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            console.error(
               'MarkerClusterer class not found, cannot construct a marker cluster. ' +
                 'Please install the MarkerClustererPlus library: ' +
                 'https://github.com/googlemaps/js-markerclustererplus',
             );
           }
+          return;
+        }
 
-          // Create the object outside the zone so its events don't trigger change detection.
-          // We'll bring it back in inside the `MapEventManager` only for the events that the
-          // user has subscribed to.
-          this.markerClusterer = this._ngZone.runOutsideAngular(() => {
-            return new MarkerClusterer(map, [], this._combineOptions());
-          });
-
-          this._assertInitialized();
-          this._eventManager.setTarget(this.markerClusterer);
-          this.markerClustererInitialized.emit(this.markerClusterer);
+        // Create the object outside the zone so its events don't trigger change detection.
+        // We'll bring it back in inside the `MapEventManager` only for the events that the
+        // user has subscribed to.
+        this.markerClusterer = this._ngZone.runOutsideAngular(() => {
+          return new MarkerClusterer(map, [], this._combineOptions());
         });
+
+        this._assertInitialized();
+        this._eventManager.setTarget(this.markerClusterer);
+        this.markerClustererInitialized.emit(this.markerClusterer);
       });
-    }
+    });
   }
 
   ngAfterContentInit() {

src/google-maps/map-marker-clusterer/map-marker-clusterer.spec.ts

@@ -1,5 +1,5 @@
 import {Component, ViewChild, ChangeDetectionStrategy} from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import type {MarkerClusterer, Renderer, Algorithm} from './map-marker-clusterer-types';
 
 import {DEFAULT_OPTIONS} from '../google-map/google-map';
@@ -46,19 +46,23 @@ describe('MapMarkerClusterer', () => {
     (window as any).markerClusterer = undefined;
   });
 
-  // We can't test this easily without `fakeAsync`.
-  it('throws an error if the clustering library has not been loaded', fakeAsync(() => {
+  it('throws an error if the clustering library has not been loaded', async () => {
+    const spy = spyOn(console, 'error');
     (window as any).markerClusterer = undefined;
     markerClustererConstructorSpy = createMarkerClustererConstructorSpy(
       markerClustererSpy,
       false,
     ).and.callThrough();
 
-    expect(() => {
-      fixture.detectChanges();
-      flush();
-    }).toThrowError(/MarkerClusterer class not found, cannot construct a marker cluster/);
-  }));
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(spy).toHaveBeenCalledWith(
+      jasmine.stringContaining(
+        'MarkerClusterer class not found, cannot construct a marker cluster',
+      ),
+    );
+  });
 
   it('initializes a Google Map Marker Clusterer', async () => {
     fixture.detectChanges();

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

@@ -125,12 +125,16 @@ export class MapMarkerClusterer implements OnInit, OnChanges, OnDestroy {
   }
 
   private async _createCluster() {
-    if (!markerClusterer?.MarkerClusterer && (typeof ngDevMode === 'undefined' || ngDevMode)) {
-      throw Error(
-        'MarkerClusterer class not found, cannot construct a marker cluster. ' +
-          'Please install the MarkerClusterer library: ' +
-          'https://github.com/googlemaps/js-markerclusterer',
-      );
+    if (!markerClusterer?.MarkerClusterer) {
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        console.error(
+          'MarkerClusterer class not found, cannot construct a marker cluster. ' +
+            'Please install the MarkerClusterer library: ' +
+            'https://github.com/googlemaps/js-markerclusterer',
+        );
+      }
+
+      return;
     }
 
     const map = await this._googleMap._resolveMap();