refactor(google-maps): switch to inject function (#29774)

crisbeto · web-flow · commit 7c9bf996b402 · 2024-09-23T18:54:15.000+02:00
Reworks the Google Maps module to use the `inject` function instead of constructor-based injection.
diff --git a/src/google-maps/google-map/google-map.ts b/src/google-maps/google-map/google-map.ts
@@ -19,7 +19,6 @@ import {
   OnInit,
   Output,
   ViewEncapsulation,
-  Inject,
   PLATFORM_ID,
   NgZone,
   SimpleChanges,
@@ -63,7 +62,9 @@ export const DEFAULT_WIDTH = '500px';
   encapsulation: ViewEncapsulation.None,
 })
 export class GoogleMap implements OnChanges, OnInit, OnDestroy {
-  private _eventManager: MapEventManager = new MapEventManager(inject(NgZone));
+  private readonly _elementRef = inject(ElementRef);
+  private _ngZone = inject(NgZone);
+  private _eventManager = new MapEventManager(inject(NgZone));
   private _mapEl: HTMLElement;
   private _existingAuthFailureCallback: GoogleMapsWindow['gm_authFailure'];
 
@@ -250,11 +251,10 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   @Output() readonly zoomChanged: Observable<void> =
     this._eventManager.getLazyEmitter<void>('zoom_changed');
 
-  constructor(
-    private readonly _elementRef: ElementRef,
-    private _ngZone: NgZone,
-    @Inject(PLATFORM_ID) platformId: Object,
-  ) {
+  constructor(...args: unknown[]);
+
+  constructor() {
+    const platformId = inject<Object>(PLATFORM_ID);
     this._isBrowser = isPlatformBrowser(platformId);
 
     if (this._isBrowser) {
diff --git a/src/google-maps/map-advanced-marker/map-advanced-marker.ts b/src/google-maps/map-advanced-marker/map-advanced-marker.ts
@@ -46,6 +46,8 @@ export const DEFAULT_MARKER_OPTIONS = {
   standalone: true,
 })
 export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
+  private readonly _googleMap = inject(GoogleMap);
+  private _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
 
   /**
@@ -186,10 +188,8 @@ export class MapAdvancedMarker implements OnInit, OnChanges, OnDestroy, MapAncho
    */
   advancedMarker: google.maps.marker.AdvancedMarkerElement;
 
-  constructor(
-    private readonly _googleMap: GoogleMap,
-    private _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (!this._googleMap._isBrowser) {
diff --git a/src/google-maps/map-base-layer.ts b/src/google-maps/map-base-layer.ts
@@ -9,7 +9,7 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="google.maps" preserve="true" />
 
-import {Directive, NgZone, OnDestroy, OnInit} from '@angular/core';
+import {Directive, NgZone, OnDestroy, OnInit, inject} from '@angular/core';
 
 import {GoogleMap} from './google-map/google-map';
 
@@ -19,10 +19,11 @@ import {GoogleMap} from './google-map/google-map';
   standalone: true,
 })
 export class MapBaseLayer implements OnInit, OnDestroy {
-  constructor(
-    protected readonly _map: GoogleMap,
-    protected readonly _ngZone: NgZone,
-  ) {}
+  protected readonly _map = inject(GoogleMap);
+  protected readonly _ngZone = inject(NgZone);
+
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._map._isBrowser) {
diff --git a/src/google-maps/map-circle/map-circle.ts b/src/google-maps/map-circle/map-circle.ts
@@ -35,13 +35,14 @@ import {MapEventManager} from '../map-event-manager';
   standalone: true,
 })
 export class MapCircle implements OnInit, OnDestroy {
+  private readonly _map = inject(GoogleMap);
+  private readonly _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
   private readonly _options = new BehaviorSubject<google.maps.CircleOptions>({});
   private readonly _center = new BehaviorSubject<
     google.maps.LatLng | google.maps.LatLngLiteral | undefined
   >(undefined);
   private readonly _radius = new BehaviorSubject<number | undefined>(undefined);
-
   private readonly _destroyed = new Subject<void>();
 
   /**
@@ -161,10 +162,8 @@ export class MapCircle implements OnInit, OnDestroy {
   @Output() readonly circleInitialized: EventEmitter<google.maps.Circle> =
     new EventEmitter<google.maps.Circle>();
 
-  constructor(
-    private readonly _map: GoogleMap,
-    private readonly _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (!this._map._isBrowser) {
diff --git a/src/google-maps/map-directions-renderer/map-directions-renderer.ts b/src/google-maps/map-directions-renderer/map-directions-renderer.ts
@@ -37,6 +37,8 @@ import {MapEventManager} from '../map-event-manager';
   standalone: true,
 })
 export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
+  private readonly _googleMap = inject(GoogleMap);
+  private _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
 
   /**
@@ -74,10 +76,8 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
   /** The underlying google.maps.DirectionsRenderer object. */
   directionsRenderer?: google.maps.DirectionsRenderer;
 
-  constructor(
-    private readonly _googleMap: GoogleMap,
-    private _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {
diff --git a/src/google-maps/map-directions-renderer/map-directions-service.ts b/src/google-maps/map-directions-renderer/map-directions-service.ts
@@ -9,7 +9,7 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="google.maps" preserve="true" />
 
-import {Injectable, NgZone} from '@angular/core';
+import {Injectable, NgZone, inject} from '@angular/core';
 import {Observable} from 'rxjs';
 
 export interface MapDirectionsResponse {
@@ -25,9 +25,11 @@ export interface MapDirectionsResponse {
  */
 @Injectable({providedIn: 'root'})
 export class MapDirectionsService {
+  private readonly _ngZone = inject(NgZone);
   private _directionsService: google.maps.DirectionsService | undefined;
 
-  constructor(private readonly _ngZone: NgZone) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   /**
    * See
diff --git a/src/google-maps/map-geocoder/map-geocoder.ts b/src/google-maps/map-geocoder/map-geocoder.ts
@@ -9,7 +9,7 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="google.maps" preserve="true" />
 
-import {Injectable, NgZone} from '@angular/core';
+import {Injectable, NgZone, inject} from '@angular/core';
 import {Observable} from 'rxjs';
 
 export interface MapGeocoderResponse {
@@ -23,9 +23,11 @@ export interface MapGeocoderResponse {
  */
 @Injectable({providedIn: 'root'})
 export class MapGeocoder {
+  private readonly _ngZone = inject(NgZone);
   private _geocoder: google.maps.Geocoder | undefined;
 
-  constructor(private readonly _ngZone: NgZone) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   /**
    * See developers.google.com/maps/documentation/javascript/reference/geocoder#Geocoder.geocode
diff --git a/src/google-maps/map-ground-overlay/map-ground-overlay.ts b/src/google-maps/map-ground-overlay/map-ground-overlay.ts
@@ -36,8 +36,9 @@ import {MapEventManager} from '../map-event-manager';
   standalone: true,
 })
 export class MapGroundOverlay implements OnInit, OnDestroy {
+  private readonly _map = inject(GoogleMap);
+  private readonly _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
-
   private readonly _opacity = new BehaviorSubject<number>(1);
   private readonly _url = new BehaviorSubject<string>('');
   private readonly _bounds = new BehaviorSubject<
@@ -96,10 +97,8 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
   @Output() readonly groundOverlayInitialized: EventEmitter<google.maps.GroundOverlay> =
     new EventEmitter<google.maps.GroundOverlay>();
 
-  constructor(
-    private readonly _map: GoogleMap,
-    private readonly _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._map._isBrowser) {
diff --git a/src/google-maps/map-heatmap-layer/map-heatmap-layer.ts b/src/google-maps/map-heatmap-layer/map-heatmap-layer.ts
@@ -19,6 +19,7 @@ import {
   SimpleChanges,
   Output,
   EventEmitter,
+  inject,
 } from '@angular/core';
 
 import {GoogleMap} from '../google-map/google-map';
@@ -41,6 +42,9 @@ export type HeatmapData =
   standalone: true,
 })
 export class MapHeatmapLayer implements OnInit, OnChanges, OnDestroy {
+  private readonly _googleMap = inject(GoogleMap);
+  private _ngZone = inject(NgZone);
+
   /**
    * Data shown on the heatmap.
    * See: https://developers.google.com/maps/documentation/javascript/reference/visualization
@@ -72,10 +76,8 @@ export class MapHeatmapLayer implements OnInit, OnChanges, OnDestroy {
   @Output() readonly heatmapInitialized: EventEmitter<google.maps.visualization.HeatmapLayer> =
     new EventEmitter<google.maps.visualization.HeatmapLayer>();
 
-  constructor(
-    private readonly _googleMap: GoogleMap,
-    private _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {
diff --git a/src/google-maps/map-info-window/map-info-window.ts b/src/google-maps/map-info-window/map-info-window.ts
@@ -39,6 +39,9 @@ import {MapAnchorPoint} from '../map-anchor-point';
   host: {'style': 'display: none'},
 })
 export class MapInfoWindow implements OnInit, OnDestroy {
+  private readonly _googleMap = inject(GoogleMap);
+  private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
+  private _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
   private readonly _options = new BehaviorSubject<google.maps.InfoWindowOptions>({});
   private readonly _position = new BehaviorSubject<
@@ -105,11 +108,8 @@ export class MapInfoWindow implements OnInit, OnDestroy {
   @Output() readonly infoWindowInitialized: EventEmitter<google.maps.InfoWindow> =
     new EventEmitter<google.maps.InfoWindow>();
 
-  constructor(
-    private readonly _googleMap: GoogleMap,
-    private _elementRef: ElementRef<HTMLElement>,
-    private _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {
diff --git a/src/google-maps/map-kml-layer/map-kml-layer.ts b/src/google-maps/map-kml-layer/map-kml-layer.ts
@@ -36,6 +36,8 @@ import {MapEventManager} from '../map-event-manager';
   standalone: true,
 })
 export class MapKmlLayer implements OnInit, OnDestroy {
+  private readonly _map = inject(GoogleMap);
+  private _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
   private readonly _options = new BehaviorSubject<google.maps.KmlLayerOptions>({});
   private readonly _url = new BehaviorSubject<string>('');
@@ -83,10 +85,8 @@ export class MapKmlLayer implements OnInit, OnDestroy {
   @Output() readonly kmlLayerInitialized: EventEmitter<google.maps.KmlLayer> =
     new EventEmitter<google.maps.KmlLayer>();
 
-  constructor(
-    private readonly _map: GoogleMap,
-    private _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._map._isBrowser) {
diff --git a/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts b/src/google-maps/map-marker-clusterer/map-marker-clusterer.ts
@@ -60,16 +60,18 @@ declare const MarkerClusterer: typeof MarkerClustererInstance;
   exportAs: 'mapMarkerClusterer',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  template: '<ng-content />',
+  template: '<ng-content/>',
   encapsulation: ViewEncapsulation.None,
 })
 export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges, OnDestroy {
+  private readonly _googleMap = inject(GoogleMap);
+  private readonly _ngZone = inject(NgZone);
   private readonly _currentMarkers = new Set<google.maps.Marker>();
   private readonly _eventManager = new MapEventManager(inject(NgZone));
   private readonly _destroy = new Subject<void>();
 
   /** Whether the clusterer is allowed to be initialized. */
-  private readonly _canInitialize: boolean;
+  private readonly _canInitialize = this._googleMap._isBrowser;
 
   @Input()
   ariaLabelFn: AriaLabelFn = () => '';
@@ -212,12 +214,8 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
   @Output() readonly markerClustererInitialized: EventEmitter<MarkerClustererInstance> =
     new EventEmitter<MarkerClustererInstance>();
 
-  constructor(
-    private readonly _googleMap: GoogleMap,
-    private readonly _ngZone: NgZone,
-  ) {
-    this._canInitialize = _googleMap._isBrowser;
-  }
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._canInitialize) {
diff --git a/src/google-maps/map-marker/map-marker.ts b/src/google-maps/map-marker/map-marker.ts
@@ -47,6 +47,8 @@ export const DEFAULT_MARKER_OPTIONS = {
   standalone: true,
 })
 export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
+  private readonly _googleMap = inject(GoogleMap);
+  private _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
 
   /**
@@ -277,10 +279,8 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    */
   marker?: google.maps.Marker;
 
-  constructor(
-    private readonly _googleMap: GoogleMap,
-    private _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (!this._googleMap._isBrowser) {
diff --git a/src/google-maps/map-polygon/map-polygon.ts b/src/google-maps/map-polygon/map-polygon.ts
@@ -36,6 +36,8 @@ import {MapEventManager} from '../map-event-manager';
   standalone: true,
 })
 export class MapPolygon implements OnInit, OnDestroy {
+  private readonly _map = inject(GoogleMap);
+  private readonly _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
   private readonly _options = new BehaviorSubject<google.maps.PolygonOptions>({});
   private readonly _paths = new BehaviorSubject<
@@ -141,10 +143,8 @@ export class MapPolygon implements OnInit, OnDestroy {
   @Output() readonly polygonInitialized: EventEmitter<google.maps.Polygon> =
     new EventEmitter<google.maps.Polygon>();
 
-  constructor(
-    private readonly _map: GoogleMap,
-    private readonly _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._map._isBrowser) {
diff --git a/src/google-maps/map-polyline/map-polyline.ts b/src/google-maps/map-polyline/map-polyline.ts
@@ -36,6 +36,8 @@ import {MapEventManager} from '../map-event-manager';
   standalone: true,
 })
 export class MapPolyline implements OnInit, OnDestroy {
+  private readonly _map = inject(GoogleMap);
+  private _ngZone = inject(NgZone);
   private _eventManager = new MapEventManager(inject(NgZone));
   private readonly _options = new BehaviorSubject<google.maps.PolylineOptions>({});
   private readonly _path = new BehaviorSubject<
@@ -139,10 +141,8 @@ export class MapPolyline implements OnInit, OnDestroy {
   @Output() readonly polylineInitialized: EventEmitter<google.maps.Polyline> =
     new EventEmitter<google.maps.Polyline>();
 
-  constructor(
-    private readonly _map: GoogleMap,
-    private _ngZone: NgZone,
-  ) {}
+  constructor(...args: unknown[]);
+  constructor() {}
 
   ngOnInit() {
     if (this._map._isBrowser) {
diff --git a/src/google-maps/map-rectangle/map-rectangle.ts b/src/google-maps/map-rectangle/map-rectangle.ts
diff --git a/src/google-maps/map-traffic-layer/map-traffic-layer.ts b/src/google-maps/map-traffic-layer/map-traffic-layer.ts
diff --git a/tools/public_api_guard/google-maps/google-maps.md b/tools/public_api_guard/google-maps/google-maps.md
