refactor(google-maps): convert to standalone (#28153)

Author: nikos-moysiadis

src/dev-app/google-map/google-map-demo.ts

@@ -9,14 +9,22 @@
 import {CommonModule} from '@angular/common';
 import {Component, ViewChild} from '@angular/core';
 import {
-  GoogleMapsModule,
+  GoogleMap,
+  MapBicyclingLayer,
   MapCircle,
+  MapDirectionsRenderer,
   MapDirectionsService,
+  MapGroundOverlay,
+  MapHeatmapLayer,
   MapInfoWindow,
+  MapKmlLayer,
   MapMarker,
+  MapMarkerClusterer,
   MapPolygon,
   MapPolyline,
   MapRectangle,
+  MapTrafficLayer,
+  MapTransitLayer,
 } from '@angular/google-maps';
 
 const POLYLINE_PATH: google.maps.LatLngLiteral[] = [
@@ -52,7 +60,24 @@ let apiLoadingPromise: Promise<unknown> | null = null;
   templateUrl: 'google-map-demo.html',
   styleUrls: ['google-map-demo.css'],
   standalone: true,
-  imports: [CommonModule, GoogleMapsModule],
+  imports: [
+    CommonModule,
+    GoogleMap,
+    MapBicyclingLayer,
+    MapCircle,
+    MapDirectionsRenderer,
+    MapGroundOverlay,
+    MapHeatmapLayer,
+    MapInfoWindow,
+    MapKmlLayer,
+    MapMarker,
+    MapMarkerClusterer,
+    MapPolygon,
+    MapPolyline,
+    MapRectangle,
+    MapTrafficLayer,
+    MapTransitLayer,
+  ],
 })
 export class GoogleMapDemo {
   @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

src/google-maps/README.md

@@ -21,7 +21,7 @@ method to make sure that the component doesn't load until after the API has load
 // google-maps-demo.module.ts
 
 import { NgModule } from '@angular/core';
-import { GoogleMapsModule } from '@angular/google-maps';
+import { GoogleMap } from '@angular/google-maps';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
 
@@ -33,7 +33,7 @@ import { GoogleMapsDemoComponent } from './google-maps-demo.component';
   ],
   imports: [
     CommonModule,
-    GoogleMapsModule,
+    GoogleMap,
     HttpClientModule,
     HttpClientJsonpModule,
   ],

src/google-maps/google-map/README.md

@@ -8,14 +8,12 @@ The `GoogleMap` component wraps the [`google.maps.Map` class](https://developers
 // google-maps-demo.module.ts
 
 import {NgModule} from '@angular/core';
-import {GoogleMapsModule} from '@angular/google-maps';
+import {GoogleMap} from '@angular/google-maps';
 
 import {GoogleMapDemo} from './google-map-demo';
 
 @NgModule({
-  imports: [
-    GoogleMapsModule,
-  ],
+  imports: [GoogleMap],
   declarations: [GoogleMapDemo],
 })
 export class GoogleMapDemoModule {

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

@@ -2,7 +2,6 @@ import {Component, ViewChild} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-import {GoogleMapsModule} from '../google-maps-module';
 import {createMapConstructorSpy, createMapSpy} from '../testing/fake-google-map-utils';
 import {DEFAULT_HEIGHT, DEFAULT_OPTIONS, DEFAULT_WIDTH, GoogleMap} from './google-map';
 
@@ -26,7 +25,7 @@ describe('GoogleMap', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
+      imports: [GoogleMap],
       declarations: [TestApp],
     });
   }));

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

@@ -56,6 +56,7 @@ export const DEFAULT_WIDTH = '500px';
 @Component({
   selector: 'google-map',
   exportAs: 'googleMap',
+  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<div class="map-container"></div><ng-content></ng-content>',
   encapsulation: ViewEncapsulation.None,

src/google-maps/google-maps-module.ts

@@ -32,6 +32,7 @@ const COMPONENTS = [
   MapCircle,
   MapDirectionsRenderer,
   MapGroundOverlay,
+  MapHeatmapLayer,
   MapInfoWindow,
   MapKmlLayer,
   MapMarker,
@@ -41,11 +42,10 @@ const COMPONENTS = [
   MapRectangle,
   MapTrafficLayer,
   MapTransitLayer,
-  MapHeatmapLayer,
 ];
 
 @NgModule({
-  declarations: COMPONENTS,
+  imports: COMPONENTS,
   exports: COMPONENTS,
 })
 export class GoogleMapsModule {}

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

@@ -16,9 +16,13 @@ import {GoogleMap} from './google-map/google-map';
 @Directive({
   selector: 'map-base-layer',
   exportAs: 'mapBaseLayer',
+  standalone: true,
 })
 export class MapBaseLayer implements OnInit, OnDestroy {
-  constructor(protected readonly _map: GoogleMap, protected readonly _ngZone: NgZone) {}
+  constructor(
+    protected readonly _map: GoogleMap,
+    protected readonly _ngZone: NgZone,
+  ) {}
 
   ngOnInit() {
     if (this._map._isBrowser) {

src/google-maps/map-bicycling-layer/map-bicycling-layer.spec.ts

@@ -1,21 +1,22 @@
 import {Component} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
 
-import {DEFAULT_OPTIONS} from '../google-map/google-map';
-import {GoogleMapsModule} from '../google-maps-module';
+import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
 import {
   createBicyclingLayerConstructorSpy,
   createBicyclingLayerSpy,
   createMapConstructorSpy,
   createMapSpy,
 } from '../testing/fake-google-map-utils';
 
+import {MapBicyclingLayer} from './map-bicycling-layer';
+
 describe('MapBicyclingLayer', () => {
   let mapSpy: jasmine.SpyObj<google.maps.Map>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
+      imports: [GoogleMap, MapBicyclingLayer],
       declarations: [TestApp],
     });
   }));

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

@@ -21,6 +21,7 @@ import {MapBaseLayer} from '../map-base-layer';
 @Directive({
   selector: 'map-bicycling-layer',
   exportAs: 'mapBicyclingLayer',
+  standalone: true,
 })
 export class MapBicyclingLayer extends MapBaseLayer {
   /**

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

@@ -2,8 +2,7 @@ import {Component, ViewChild} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-import {DEFAULT_OPTIONS} from '../google-map/google-map';
-import {GoogleMapsModule} from '../google-maps-module';
+import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
 import {
   createCircleConstructorSpy,
   createCircleSpy,
@@ -29,7 +28,7 @@ describe('MapCircle', () => {
       strokeOpacity: 0.8,
     };
     TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
+      imports: [GoogleMap, MapCircle],
       declarations: [TestApp],
     });
   }));

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

@@ -23,6 +23,7 @@ import {MapEventManager} from '../map-event-manager';
 @Directive({
   selector: 'map-circle',
   exportAs: 'mapCircle',
+  standalone: true,
 })
 export class MapCircle implements OnInit, OnDestroy {
   private _eventManager = new MapEventManager(inject(NgZone));
@@ -147,7 +148,10 @@ export class MapCircle implements OnInit, OnDestroy {
   @Output() readonly circleRightclick: Observable<google.maps.MapMouseEvent> =
     this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('rightclick');
 
-  constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
+  constructor(
+    private readonly _map: GoogleMap,
+    private readonly _ngZone: NgZone,
+  ) {}
 
   ngOnInit() {
     if (this._map._isBrowser) {

src/google-maps/map-directions-renderer/map-directions-renderer.spec.ts

@@ -2,8 +2,7 @@ import {Component, ViewChild} from '@angular/core';
 import {TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {MapDirectionsRenderer} from './map-directions-renderer';
-import {DEFAULT_OPTIONS} from '../google-map/google-map';
-import {GoogleMapsModule} from '../google-maps-module';
+import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
 import {
   createDirectionsRendererConstructorSpy,
   createDirectionsRendererSpy,
@@ -21,7 +20,7 @@ describe('MapDirectionsRenderer', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
+      imports: [GoogleMap, MapDirectionsRenderer],
       declarations: [TestApp],
     });
   }));

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

@@ -33,6 +33,7 @@ import {MapEventManager} from '../map-event-manager';
 @Directive({
   selector: 'map-directions-renderer',
   exportAs: 'mapDirectionsRenderer',
+  standalone: true,
 })
 export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
   private _eventManager = new MapEventManager(inject(NgZone));
@@ -68,7 +69,10 @@ 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(
+    private readonly _googleMap: GoogleMap,
+    private _ngZone: NgZone,
+  ) {}
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {

src/google-maps/map-directions-renderer/map-directions-service.spec.ts

@@ -1,6 +1,5 @@
 import {TestBed} from '@angular/core/testing';
 import {MapDirectionsResponse, MapDirectionsService} from './map-directions-service';
-import {GoogleMapsModule} from '../google-maps-module';
 import {
   createDirectionsServiceConstructorSpy,
   createDirectionsServiceSpy,
@@ -12,10 +11,6 @@ describe('MapDirectionsService', () => {
   let directionsServiceSpy: jasmine.SpyObj<google.maps.DirectionsService>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
-    });
-
     directionsServiceSpy = createDirectionsServiceSpy();
     directionsServiceConstructorSpy =
       createDirectionsServiceConstructorSpy(directionsServiceSpy).and.callThrough();

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

@@ -1,6 +1,5 @@
 import {TestBed} from '@angular/core/testing';
 import {MapGeocoderResponse, MapGeocoder} from './map-geocoder';
-import {GoogleMapsModule} from '../google-maps-module';
 import {createGeocoderConstructorSpy, createGeocoderSpy} from '../testing/fake-google-map-utils';
 
 describe('MapGeocoder', () => {
@@ -9,10 +8,6 @@ describe('MapGeocoder', () => {
   let geocoderSpy: jasmine.SpyObj<google.maps.Geocoder>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
-    });
-
     geocoderSpy = createGeocoderSpy();
     geocoderConstructorSpy = createGeocoderConstructorSpy(geocoderSpy).and.callThrough();
     geocoder = TestBed.inject(MapGeocoder);

src/google-maps/map-ground-overlay/map-ground-overlay.spec.ts

@@ -2,8 +2,7 @@ import {Component, ViewChild} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-import {DEFAULT_OPTIONS} from '../google-map/google-map';
-import {GoogleMapsModule} from '../google-maps-module';
+import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
 import {
   createGroundOverlayConstructorSpy,
   createGroundOverlaySpy,
@@ -23,7 +22,7 @@ describe('MapGroundOverlay', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
+      imports: [GoogleMap, MapGroundOverlay],
       declarations: [TestApp],
     });
   }));

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

@@ -24,6 +24,7 @@ import {MapEventManager} from '../map-event-manager';
 @Directive({
   selector: 'map-ground-overlay',
   exportAs: 'mapGroundOverlay',
+  standalone: true,
 })
 export class MapGroundOverlay implements OnInit, OnDestroy {
   private _eventManager = new MapEventManager(inject(NgZone));
@@ -81,7 +82,10 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
   @Output() readonly mapDblclick: Observable<google.maps.MapMouseEvent> =
     this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dblclick');
 
-  constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
+  constructor(
+    private readonly _map: GoogleMap,
+    private readonly _ngZone: NgZone,
+  ) {}
 
   ngOnInit() {
     if (this._map._isBrowser) {

src/google-maps/map-heatmap-layer/map-heatmap-layer.spec.ts

@@ -1,9 +1,8 @@
 import {Component, ViewChild} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
 
-import {DEFAULT_OPTIONS} from '../google-map/google-map';
+import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
 
-import {GoogleMapsModule} from '../google-maps-module';
 import {
   createMapConstructorSpy,
   createMapSpy,
@@ -20,7 +19,7 @@ describe('MapHeatmapLayer', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
+      imports: [GoogleMap, MapHeatmapLayer],
       declarations: [TestApp],
     });
   }));

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

@@ -28,6 +28,7 @@ export type HeatmapData =
 @Directive({
   selector: 'map-heatmap-layer',
   exportAs: 'mapHeatmapLayer',
+  standalone: true,
 })
 export class MapHeatmapLayer implements OnInit, OnChanges, OnDestroy {
   /**
@@ -57,7 +58,10 @@ export class MapHeatmapLayer implements OnInit, OnChanges, OnDestroy {
    */
   heatmap?: google.maps.visualization.HeatmapLayer;
 
-  constructor(private readonly _googleMap: GoogleMap, private _ngZone: NgZone) {}
+  constructor(
+    private readonly _googleMap: GoogleMap,
+    private _ngZone: NgZone,
+  ) {}
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {

src/google-maps/map-info-window/map-info-window.spec.ts

@@ -2,9 +2,8 @@ import {Component, ViewChild} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-import {DEFAULT_OPTIONS} from '../google-map/google-map';
+import {DEFAULT_OPTIONS, GoogleMap} from '../google-map/google-map';
 
-import {GoogleMapsModule} from '../google-maps-module';
 import {MapMarker} from '../map-marker/map-marker';
 import {
   createInfoWindowConstructorSpy,
@@ -19,7 +18,7 @@ describe('MapInfoWindow', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMapsModule],
+      imports: [GoogleMap, MapInfoWindow],
       declarations: [TestApp],
     });
   }));