refactor(google-maps): convert test components to standalone

src/google-maps/README.md

@@ -21,25 +21,13 @@ 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 { GoogleMap } from '@angular/google-maps';
-import { CommonModule } from '@angular/common';
-import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
+import { provideHttpClient, withJsonpSupport } from '@angular/common/http';
 
 import { GoogleMapsDemoComponent } from './google-maps-demo.component';
 
 @NgModule({
-  declarations: [
-    GoogleMapsDemoComponent,
-  ],
-  imports: [
-    CommonModule,
-    GoogleMap,
-    HttpClientModule,
-    HttpClientJsonpModule,
-  ],
-  exports: [
-    GoogleMapsDemoComponent,
-  ],
+  imports: [GoogleMapsDemoComponent],
+  providers: [provideHttpClient(withJsonpSupport())]
 })
 export class GoogleMapsDemoModule {}
 
@@ -48,12 +36,15 @@ export class GoogleMapsDemoModule {}
 
 import { Component } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { GoogleMap } from '@angular/google-maps';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
 @Component({
   selector: 'google-maps-demo',
   templateUrl: './google-maps-demo.component.html',
+  standalone: true,
+  imports: [GoogleMap]
 })
 export class GoogleMapsDemoComponent {
   apiLoaded: Observable<boolean>;

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

@@ -5,27 +5,15 @@ The `GoogleMap` component wraps the [`google.maps.Map` class](https://developers
 ## Example
 
 ```typescript
-// google-maps-demo.module.ts
-
-import {NgModule} from '@angular/core';
-import {GoogleMap} from '@angular/google-maps';
-
-import {GoogleMapDemo} from './google-map-demo';
-
-@NgModule({
-  imports: [GoogleMap],
-  declarations: [GoogleMapDemo],
-})
-export class GoogleMapDemoModule {
-}
-
-
 // google-maps-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap],
 })
 export class GoogleMapDemo {
 

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

@@ -25,8 +25,7 @@ describe('GoogleMap', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -409,6 +408,8 @@ describe('GoogleMap', () => {
                          (mapRightclick)="handleRightclick($event)"
                          (mapInitialized)="mapInitializedSpy($event)">
             </google-map>`,
+  standalone: true,
+  imports: [GoogleMap],
 })
 class TestApp {
   @ViewChild(GoogleMap) map: GoogleMap;

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

@@ -7,10 +7,13 @@ The `MapBicyclingLayer` component wraps the [`google.maps.BicyclingLayer` class]
 ```typescript
 // google-maps-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap, MapBicyclingLayer} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapBicyclingLayer],
 })
 export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};

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

@@ -16,8 +16,7 @@ describe('MapBicyclingLayer', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapBicyclingLayer],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -50,5 +49,7 @@ describe('MapBicyclingLayer', () => {
   template: `<google-map>
                 <map-bicycling-layer></map-bicycling-layer>
             </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapBicyclingLayer],
 })
 class TestApp {}

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

@@ -7,10 +7,13 @@ The `MapCircle` component wraps the [`google.maps.Circle` class](https://develop
 ```typescript
 // google-maps-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap, MapCircle} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapCircle],
 })
 export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};

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

@@ -28,8 +28,7 @@ describe('MapCircle', () => {
       strokeOpacity: 0.8,
     };
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapCircle],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -165,6 +164,8 @@ describe('MapCircle', () => {
                             (circleRightclick)="handleRightclick()">
                 </map-circle>
             </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapCircle],
 })
 class TestApp {
   @ViewChild(MapCircle) circle: MapCircle;

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

@@ -21,12 +21,14 @@ Using the `MapDirectionsService` requires the Directions API to be enabled in Go
 
 ```typescript
 // google-maps-demo.component.ts
-import {MapDirectionsService} from '@angular/google-maps';
 import {Component} from '@angular/core';
+import {GoogleMap, MapDirectionsRenderer, MapDirectionsService} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapDirectionsRenderer],
 })
 export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};

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

@@ -20,8 +20,7 @@ describe('MapDirectionsRenderer', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapDirectionsRenderer],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -132,6 +131,8 @@ describe('MapDirectionsRenderer', () => {
                                         (directionsChanged)="handleDirectionsChanged()">
                </map-directions-renderer>
              </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapDirectionsRenderer],
 })
 class TestApp {
   @ViewChild(MapDirectionsRenderer) directionsRenderer: MapDirectionsRenderer;

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

@@ -30,6 +30,7 @@ import {MapGeocoder} from '@angular/google-maps';
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
 })
 export class GoogleMapDemo {
   constructor(geocoder: MapGeocoder) {

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

@@ -7,10 +7,13 @@ The `MapGroundOverlay` component wraps the [`google.maps.GroundOverlay` class](h
 ```typescript
 // google-maps-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap, MapGroundOverlay} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapGroundOverlay],
 })
 export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};

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

@@ -22,8 +22,7 @@ describe('MapGroundOverlay', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapGroundOverlay],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -163,6 +162,8 @@ describe('MapGroundOverlay', () => {
                                     (mapClick)="handleClick()">
                 </map-ground-overlay>
             </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapGroundOverlay],
 })
 class TestApp {
   @ViewChild(MapGroundOverlay) groundOverlay: MapGroundOverlay;

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

@@ -28,10 +28,13 @@ More information: https://developers.google.com/maps/documentation/javascript/he
 ```typescript
 // google-map-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap, MapHeatmapLayer} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapHeatmapLayer],
 })
 export class GoogleMapDemo {
   center = {lat: 37.774546, lng: -122.433523};

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

@@ -19,8 +19,7 @@ describe('MapHeatmapLayer', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapHeatmapLayer],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -159,6 +158,8 @@ describe('MapHeatmapLayer', () => {
       <map-heatmap-layer [data]="data" [options]="options">
       </map-heatmap-layer>
     </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapHeatmapLayer],
 })
 class TestApp {
   @ViewChild(MapHeatmapLayer) heatmap: MapHeatmapLayer;

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

@@ -9,11 +9,13 @@ To display the `MapInfoWindow`, it must be a child of a `GoogleMap` component, a
 ```typescript
 // google-maps-demo.component.ts
 import {Component, ViewChild} from '@angular/core';
-import {MapInfoWindow, MapMarker} from '@angular/google-maps';
+import {GoogleMap, MapInfoWindow, MapMarker} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapInfoWindow, MapMarker],
 })
 export class GoogleMapDemo {
   @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

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

@@ -18,8 +18,7 @@ describe('MapInfoWindow', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapInfoWindow],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -261,6 +260,8 @@ describe('MapInfoWindow', () => {
                  test content
                </map-info-window>
              </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapInfoWindow],
 })
 class TestApp {
   @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;

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

@@ -7,10 +7,13 @@ The `MapKmlLayer` component wraps the [`google.maps.KmlLayer` class](https://dev
 ```typescript
 // google-maps-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap, MapKmlLayer} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapKmlLayer],
 })
 export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};

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

@@ -24,8 +24,7 @@ describe('MapKmlLayer', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapKmlLayer],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -155,6 +154,8 @@ describe('MapKmlLayer', () => {
                                (statusChanged)="handleStatusChange()">
                 </map-kml-layer>
             </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapKmlLayer],
 })
 class TestApp {
   @ViewChild(MapKmlLayer) kmlLayer: MapKmlLayer;

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

@@ -17,10 +17,13 @@ Additional information can be found by looking at [Marker Clustering](https://de
 ```typescript
 // google-map-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap, MapMarker, MapMarkerClusterer} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapMarker, MapMarkerClusterer],
 })
 export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};

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

@@ -30,8 +30,7 @@ describe('MapMarkerClusterer', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [GoogleMap, MapMarker, MapMarkerClusterer],
-      declarations: [TestApp],
+      imports: [TestApp],
     });
   }));
 
@@ -336,6 +335,8 @@ describe('MapMarkerClusterer', () => {
                 }
                </map-marker-clusterer>
              </google-map>`,
+  standalone: true,
+  imports: [GoogleMap, MapMarker, MapMarkerClusterer],
 })
 class TestApp {
   @ViewChild(MapMarkerClusterer) markerClusterer: MapMarkerClusterer;

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

@@ -7,13 +7,15 @@ The `MapMarker` component wraps the [`google.maps.Marker` class](https://develop
 ```typescript
 // google-map-demo.component.ts
 import {Component} from '@angular/core';
+import {GoogleMap, MapMarker} from '@angular/google-maps';
 
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  standalone: true,
+  imports: [GoogleMap, MapMarker],
 })
 export class GoogleMapDemo {
-
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
   zoom = 4;
   markerOptions: google.maps.MarkerOptions = {draggable: false};