build: Compatibility for Angular v15+

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 sudo: false
 node_js:
-- '10'
+- '18'
 
 env:
   global:

angular.json

@@ -2,7 +2,8 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "cli": {
-    "packageManager": "yarn"
+    "packageManager": "yarn",
+    "analytics": false
   },
   "newProjectRoot": "packages",
   "projects": {
@@ -85,5 +86,6 @@
           }
         }
       }
-    }},
+    }
+  }
 }

jest.setup.ts

@@ -1,4 +1,5 @@
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';
+
 (window as any).google = {
   maps: {
     Animation: { BOUNCE: 1, DROP: 2 },
@@ -25,5 +26,5 @@ import 'jest-preset-angular';
       FORWARD_CLOSED_ARROW: 1,
       FORWARD_OPEN_ARROW: 2,
     },
-  }
+  },
 };

netlify.toml

@@ -1,3 +1,3 @@
 [build.environment]
-  YARN_VERSION = "1.22.4"
-  NODE_VERSION = "10"
+  YARN_VERSION = "1.22.19"
+  NODE_VERSION = "18"

package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "3.0.0-beta.1",
+  "version": "4.0.0-beta.0",
   "description": "Angular components for Google Maps",
   "repository": {
     "type": "git",
@@ -42,35 +42,34 @@
   },
   "homepage": "https://angular-maps.com",
   "dependencies": {
-    "@angular/animations": "^14.0.0",
-    "@angular/common": "^14.0.0",
-    "@angular/compiler": "^14.0.0",
-    "@angular/core": "^14.0.0",
-    "@angular/forms": "^14.0.0",
-    "@angular/platform-browser": "^14.0.0",
-    "@angular/platform-browser-dynamic": "^14.0.0",
-    "@angular/router": "^14.0.0",
-    "rxjs": "~6.6.0",
+    "@angular/animations": "^15.2.9",
+    "@angular/common": "^15.2.9",
+    "@angular/compiler": "^15.2.9",
+    "@angular/core": "^15.2.9",
+    "@angular/forms": "^15.2.9",
+    "@angular/platform-browser": "^15.2.9",
+    "@angular/platform-browser-dynamic": "^15.2.9",
+    "@angular/router": "^15.2.9",
+    "rxjs": "~7.8.0",
     "tslib": "^2.4.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.0.0",
-    "@angular/cli": "^14.0.0",
-    "@angular/compiler-cli": "^14.0.0",
-    "@compodoc/compodoc": "^1.1.10",
-    "@types/jest": "^26.0.4",
-    "@types/node": "^14.0.22",
-    "codelyzer": "^6.0.0",
-    "conventional-changelog": "^3.1.21",
-    "jest": "^26.1.0",
-    "jest-preset-angular": "^8.2.1",
-    "ng-packagr": "^14.0.0",
-    "protractor": "~7.0.0",
-    "rimraf": "^3.0.2",
-    "ts-node": "~8.10.2",
+    "@angular-devkit/build-angular": "^15.2.8",
+    "@angular/cli": "^15.2.8",
+    "@angular/compiler-cli": "^15.2.9",
+    "@compodoc/compodoc": "^1.1.20",
+    "@types/jest": "^28.0.0",
+    "@types/node": "^18.15.3",
+    "codelyzer": "^6.0.2",
+    "conventional-changelog": "^3.1.25",
+    "jest": "^28.0.0",
+    "jest-preset-angular": "^12.2.6",
+    "ng-packagr": "^15.2.2",
+    "rimraf": "^4.4.1",
+    "ts-node": "~10.9.1",
     "tslint": "~6.1.0",
-    "typescript": "~4.6.4",
-    "yarn": "^1.22.4"
+    "typescript": "~4.9.5",
+    "yarn": "^1.22.19"
   }
-}
+}

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agm/core",
-  "version": "3.0.0-beta.1",
+  "version": "4.0.0-beta.1",
   "description": "Angular components for Google Maps",
   "author": "Sebastian Holstein <info@sebastian-holstein.de>",
   "license": "MIT",
@@ -21,16 +21,16 @@
     "gmaps"
   ],
   "peerDependencies": {
-    "@angular/common": "^9.1.0 || ^10.0.0",
-    "@angular/core": "^9.1.0 || ^10.0.0"
+    "@angular/common": "^15.2.9",
+    "@angular/core": "^15.2.9"
   },
   "dependencies": {
-    "tslib": "^2.0.0"
+    "tslib": "^2.4.0"
   },
   "devDependencies": {
-    "@types/googlemaps": "^3.39.8",
-    "@types/jest": "^26.0.3",
-    "jest": "^26.1.0",
-    "jest-preset-angular": "^8.2.1"
+    "@types/googlemaps": "3.39.8",
+    "@types/jest": "^29.5.1",
+    "jest": "^29.5.0",
+    "jest-preset-angular": "^12.2.6"
   }
 }

packages/core/src/lib/directives/map.spec.ts

@@ -1,5 +1,5 @@
 import { CUSTOM_ELEMENTS_SCHEMA, ElementRef, Injectable, SimpleChange } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { Subject } from 'rxjs';
 import { FitBoundsService } from '../services/fit-bounds';
@@ -28,7 +28,7 @@ describe('AgmMap', () => {
   let fixture: ComponentFixture<AgmMap>;
   let component: AgmMap;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AgmMap,

packages/core/src/lib/directives/map.ts

@@ -186,6 +186,14 @@ export class AgmZoomControl extends AgmMapControl{
   `,
 })
 export class AgmMap implements OnChanges, AfterContentInit, OnDestroy {
+  /**
+   * Map option attributes that can change over time
+   */
+  private static _mapOptionsAttributes: string[] = [
+    'disableDoubleClickZoom', 'scrollwheel', 'draggable', 'draggableCursor', 'draggingCursor',
+    'keyboardShortcuts', 'styles', 'zoom', 'minZoom', 'maxZoom', 'mapTypeId', 'clickableIcons',
+    'gestureHandling', 'tilt', 'restriction',
+  ];
   /**
    * The longitude that defines the center of the map.
    */
@@ -343,15 +351,6 @@ export class AgmMap implements OnChanges, AfterContentInit, OnDestroy {
    */
   @Input() restriction: google.maps.MapRestriction;
 
-  /**
-   * Map option attributes that can change over time
-   */
-  private static _mapOptionsAttributes: string[] = [
-    'disableDoubleClickZoom', 'scrollwheel', 'draggable', 'draggableCursor', 'draggingCursor',
-    'keyboardShortcuts', 'styles', 'zoom', 'minZoom', 'maxZoom', 'mapTypeId', 'clickableIcons',
-    'gestureHandling', 'tilt', 'restriction',
-  ];
-
   private _observableSubscriptions: Subscription[] = [];
   private _fitBoundsSubscription: Subscription;
 

packages/core/src/lib/directives/polyline-point.spec.ts

@@ -12,7 +12,7 @@ describe('AgmPolylinePoint', () => {
       polylinePoint.positionChanged.emit = jest.fn();
 
       const positionChanges:
-          SimpleChanges = {'latitude': new SimpleChange('previousLat', 'newLat', false)};
+          SimpleChanges = {latitude: new SimpleChange('previousLat', 'newLat', false)};
 
       polylinePoint.ngOnChanges(positionChanges);
 
@@ -25,7 +25,7 @@ describe('AgmPolylinePoint', () => {
       polylinePoint.positionChanged.emit = jest.fn();
 
       const positionChanges:
-          SimpleChanges = {'longitude': new SimpleChange('previousLng', 'newLng', false)};
+          SimpleChanges = {longitude: new SimpleChange('previousLng', 'newLng', false)};
 
       polylinePoint.ngOnChanges(positionChanges);
 
@@ -38,8 +38,8 @@ describe('AgmPolylinePoint', () => {
       polylinePoint.positionChanged.emit = jest.fn();
 
       const positionChanges: SimpleChanges = {
-        'latitude': new SimpleChange('previousLat', 'newLat', false),
-        'longitude': new SimpleChange('previousLng', 'newLng', false),
+        latitude: new SimpleChange('previousLat', 'newLat', false),
+        longitude: new SimpleChange('previousLng', 'newLng', false),
       };
 
       polylinePoint.ngOnChanges(positionChanges);
@@ -58,8 +58,8 @@ describe('AgmPolylinePoint', () => {
       expect(value).toEqual({ latLng: {lat: 50, lng: -50} });
 
       const positionChanges: SimpleChanges = {
-        'latitude': new SimpleChange(50, 100, false),
-        'longitude': new SimpleChange(-50, -100, false),
+        latitude: new SimpleChange(50, 100, false),
+        longitude: new SimpleChange(-50, -100, false),
       };
       polylinePoint.ngOnChanges(positionChanges);
 

packages/core/src/lib/services/fit-bounds.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, from, Observable, timer } from 'rxjs';
 import {
-  flatMap,
   map,
+  mergeMap,
   sample,
   shareReplay,
   switchMap,
@@ -37,7 +37,7 @@ export class FitBoundsService {
 
   constructor(loader: MapsAPILoader) {
     this.bounds$ = from(loader.load()).pipe(
-      flatMap(() => this._includeInBounds$),
+      mergeMap(() => this._includeInBounds$),
       sample(
         this._boundsChangeSampleTime$.pipe(switchMap(time => timer(0, time))),
       ),

packages/core/src/lib/services/geocoder-service.ts

@@ -1,20 +1,16 @@
 import { Injectable } from '@angular/core';
-import { bindCallback, ConnectableObservable, Observable, of, ReplaySubject, throwError } from 'rxjs';
-import { map, multicast, switchMap } from 'rxjs/operators';
+import { bindCallback, connectable, Connectable, Observable, of, ReplaySubject, throwError } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
 import { MapsAPILoader } from './maps-api-loader/maps-api-loader';
 
-@Injectable({ providedIn: 'root' })
+@Injectable({providedIn: 'root'})
 export class AgmGeocoder {
   protected readonly geocoder$: Observable<google.maps.Geocoder>;
 
   constructor(loader: MapsAPILoader) {
-    const connectableGeocoder$ = new Observable(subscriber => {
+    const connectableGeocoder$: Connectable<google.maps.Geocoder> = connectable(new Observable(subscriber => {
       loader.load().then(() => subscriber.next());
-    })
-      .pipe(
-        map(() => this._createGeocoder()),
-        multicast(new ReplaySubject(1)),
-      ) as ConnectableObservable<google.maps.Geocoder>;
+    }).pipe(map(() => this._createGeocoder())), {connector: () => new ReplaySubject(1)});
 
     connectableGeocoder$.connect(); // ignore the subscription
     // since we will remain subscribed till application exits
@@ -29,7 +25,7 @@ export class AgmGeocoder {
   }
 
   private _getGoogleResults(geocoder: google.maps.Geocoder, request: google.maps.GeocoderRequest):
-       Observable<google.maps.GeocoderResult[]> {
+    Observable<google.maps.GeocoderResult[]> {
     const geocodeObservable = bindCallback(geocoder.geocode);
     return geocodeObservable(request).pipe(
       switchMap(([results, status]) => {

packages/core/src/lib/services/managers/polygon-manager.spec.ts

@@ -75,10 +75,9 @@ describe('PolygonManager', () => {
             [PolygonManager, GoogleMapsAPIWrapper],
             (polygonManager: PolygonManager, apiWrapper: GoogleMapsAPIWrapper) => {
         paths = new MvcArrayMock<google.maps.MVCArray<google.maps.LatLng>>();
-        let path = new MvcArrayMock<google.maps.LatLng>();
+        const path: MvcArrayMock<google.maps.LatLng> = new MvcArrayMock<google.maps.LatLng>();
         path.push(initLatLng);
         paths.push(path);
-
         const polygonInstance: any = {
           getPaths: () => paths,
           setMap: jest.fn(),
@@ -113,7 +112,7 @@ describe('PolygonManager', () => {
             if (expectationIndex === expectations.length) {
               done();
             }
-          }, fail /* shouldn't have errors */, fail /* shouldn't finish */);
+          });
           paths.push(new MvcArrayMock());
           paths.push(new MvcArrayMock());
         });
@@ -140,7 +139,7 @@ describe('PolygonManager', () => {
             if (expectationIndex === expectations.length) {
               done();
             }
-          }, fail /* shouldn't have errors */, fail /* shouldn't finish */);
+          });
           paths.pop();
           paths.removeAt(0);
         });
@@ -166,7 +165,7 @@ describe('PolygonManager', () => {
             if (expectationIndex === expectations.length) {
               done();
             }
-          }, fail /* shouldn't have errors */, fail /* shouldn't finish */);
+          });
           const firstMvcArray = new MvcArrayMock<google.maps.LatLng>();
           firstMvcArray.push(initLatLng);
           firstMvcArray.push(initLatLng);
@@ -196,7 +195,7 @@ describe('PolygonManager', () => {
             if (expectationIndex === expectations.length) {
               done();
             }
-          }, fail /* shouldn't have errors */, fail /* shouldn't finish */);
+          });
           paths.getAt(0).push(initLatLng);
           paths.getAt(0).push(initLatLng);
         });
@@ -223,7 +222,7 @@ describe('PolygonManager', () => {
             if (expectationIndex === expectations.length) {
               done();
             }
-          }, fail /* shouldn't have errors */, fail /* shouldn't finish */);
+          });
           paths.getAt(0).pop();
           paths.getAt(0).removeAt(0);
         });
@@ -249,7 +248,7 @@ describe('PolygonManager', () => {
             if (expectationIndex === expectations.length) {
               done();
             }
-          }, fail /* shouldn't have errors */, fail /* shouldn't finish */);
+          });
           paths.push(new MvcArrayMock<google.maps.LatLng>());
           paths.getAt(1).push(initLatLng);
         });
@@ -270,7 +269,7 @@ describe('PolygonManager', () => {
               eventName: 'removed_at',
               ...expectations[expectationIndex++],
             });
-          }, fail /* shouldn't have errors */, fail /* shouldn't finish */);
+          });
           const removedPath = paths.pop();
           removedPath.pop();
           done();