build: update to Angular 17

BREAKING CHANGE: Angular 15 is no more supported

Author: jeremy-eychenne

.github/workflows/angular.yml

@@ -54,11 +54,11 @@ jobs:
       - run: yarn --frozen-lockfile
       - run: yarn build:lib
       - run: yarn build:demo --base-href "/ngx-openlayers/" --progress false
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: lib-build
           path: dist/ngx-openlayers/
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: demo-build
           path: dist/demo-ngx-openlayers/

angular.json

@@ -83,18 +83,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "demo-ngx-openlayers:build"
+            "buildTarget": "demo-ngx-openlayers:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "demo-ngx-openlayers:build:production"
+              "buildTarget": "demo-ngx-openlayers:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "demo-ngx-openlayers:build"
+            "buildTarget": "demo-ngx-openlayers:build"
           }
         },
         "test": {

package.json

@@ -15,39 +15,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.12",
-    "@angular/common": "^16.2.12",
-    "@angular/compiler": "^16.2.12",
-    "@angular/core": "^16.2.12",
-    "@angular/forms": "^16.2.12",
-    "@angular/platform-browser": "^16.2.12",
-    "@angular/platform-browser-dynamic": "^16.2.12",
-    "@angular/router": "^16.2.12",
+    "@angular/animations": "^17.3.12",
+    "@angular/common": "^17.3.12",
+    "@angular/compiler": "^17.3.12",
+    "@angular/core": "^17.3.12",
+    "@angular/forms": "^17.3.12",
+    "@angular/platform-browser": "^17.3.12",
+    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular/router": "^17.3.12",
     "hammerjs": "^2.0.8",
     "ol": "~8.2.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.5.0",
-    "zone.js": "~0.13.3"
+    "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.16",
-    "@angular-eslint/builder": "16.3.1",
-    "@angular-eslint/eslint-plugin": "16.3.1",
-    "@angular-eslint/eslint-plugin-template": "16.3.1",
-    "@angular-eslint/schematics": "16.3.1",
-    "@angular-eslint/template-parser": "16.3.1",
-    "@angular/cli": "^16.2.16",
-    "@angular/compiler-cli": "^16.2.12",
-    "@angular/language-service": "^16.2.12",
+    "@angular-devkit/build-angular": "^17.3.15",
+    "@angular-eslint/builder": "17.5.3",
+    "@angular-eslint/eslint-plugin": "17.5.3",
+    "@angular-eslint/eslint-plugin-template": "17.5.3",
+    "@angular-eslint/schematics": "17.5.3",
+    "@angular-eslint/template-parser": "17.5.3",
+    "@angular/cli": "^17.3.15",
+    "@angular/compiler-cli": "^17.3.12",
+    "@angular/language-service": "^17.3.12",
     "@types/arcgis-rest-api": "^10.4.5",
     "@types/hammerjs": "^2.0.41",
     "@types/jasmine": "~5.1.5",
-    "@types/node": "^12.11.1",
+    "@types/node": "^18.19.86",
     "@types/topojson-specification": "^1.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "commit-and-tag-version": "^12.5.0",
-    "eslint": "^8.39.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsdoc": "^47.0.2",
     "eslint-plugin-prefer-arrow": "latest",
@@ -59,11 +59,11 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "~16.2.3",
+    "ng-packagr": "~17.3.0",
     "prettier": "^3.4.2",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "typescript": "~5.1.6"
+    "typescript": "~5.4.5"
   },
   "volta": {
     "node": "18.20.5"

projects/ngx-openlayers/package.json

@@ -5,8 +5,8 @@
     "release": "commit-and-tag-version -m \"chore(release): version %s\" -t \"\" --prerelease next"
   },
   "peerDependencies": {
-    "@angular/common": ">=15.0.0 <=16.x.x",
-    "@angular/core": ">=15.0.0 <=16.x.x",
+    "@angular/common": ">=16.0.0 <=17.x.x",
+    "@angular/core": ">=16.0.0 <=17.x.x",
     "ol": "~8.2.0"
   }
 }

projects/ngx-openlayers/src/lib/collectioncoordinates.component.ts

@@ -18,7 +18,12 @@ export class CollectionCoordinatesComponent implements OnChanges, OnInit {
   @Input()
   srid = 'EPSG:3857';
 
-  private host: any;
+  private readonly host:
+    | GeometryLinestringComponent
+    | GeometryPolygonComponent
+    | GeometryMultiPointComponent
+    | GeometryMultiLinestringComponent
+    | GeometryMultiPolygonComponent;
   private mapSrid = 'EPSG:3857';
 
   constructor(
@@ -29,16 +34,15 @@ export class CollectionCoordinatesComponent implements OnChanges, OnInit {
     @Optional() geometryMultilinestring: GeometryMultiLinestringComponent,
     @Optional() geometryMultipolygon: GeometryMultiPolygonComponent
   ) {
-    if (!!geometryLinestring) {
-      this.host = geometryLinestring;
-    } else if (!!geometryPolygon) {
-      this.host = geometryPolygon;
-    } else if (!!geometryMultipoint) {
-      this.host = geometryMultipoint;
-    } else if (!!geometryMultilinestring) {
-      this.host = geometryMultilinestring;
-    } else if (!!geometryMultipolygon) {
-      this.host = geometryMultipolygon;
+    const geometryComponent =
+      geometryLinestring ??
+      geometryPolygon ??
+      geometryMultipoint ??
+      geometryMultilinestring ??
+      geometryMultipolygon ??
+      undefined;
+    if (geometryComponent) {
+      this.host = geometryComponent;
     } else {
       throw new Error('aol-collection-coordinates must be a child of a geometry component');
     }
@@ -60,30 +64,23 @@ export class CollectionCoordinatesComponent implements OnChanges, OnInit {
   }
 
   private transformCoordinates(): void {
-    let transformedCoordinates: Coordinate[] | Coordinate[][] | Coordinate[][][];
-
     if (this.srid === this.mapSrid) {
-      transformedCoordinates = this.coordinates;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      this.host.instance.setCoordinates(this.coordinates as any[]);
+    } else if (this.host instanceof GeometryLinestringComponent || this.host instanceof GeometryMultiPointComponent) {
+      this.host.instance.setCoordinates(
+        (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid))
+      );
+    } else if (this.host instanceof GeometryPolygonComponent || this.host instanceof GeometryMultiLinestringComponent) {
+      this.host.instance.setCoordinates(
+        (this.coordinates as Coordinate[][]).map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
+      );
     } else {
-      switch (this.host.componentType) {
-        case 'geometry-linestring':
-        case 'geometry-multipoint':
-          transformedCoordinates = (this.coordinates as Coordinate[]).map((c) => transform(c, this.srid, this.mapSrid));
-          break;
-        case 'geometry-polygon':
-        case 'geometry-multilinestring':
-          transformedCoordinates = (this.coordinates as Coordinate[][]).map((cc) =>
-            cc.map((c) => transform(c, this.srid, this.mapSrid))
-          );
-          break;
-        case 'geometry-multipolygon':
-          transformedCoordinates = (this.coordinates as Coordinate[][][]).map((ccc) =>
-            ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
-          );
-          break;
-      }
+      this.host.instance.setCoordinates(
+        (this.coordinates as Coordinate[][][]).map((ccc) =>
+          ccc.map((cc) => cc.map((c) => transform(c, this.srid, this.mapSrid)))
+        )
+      );
     }
-
-    this.host.instance.setCoordinates(transformedCoordinates);
   }
 }

projects/ngx-openlayers/src/lib/coordinate.component.ts

@@ -18,7 +18,7 @@ export class CoordinateComponent implements OnChanges, OnInit {
   @Input()
   srid = 'EPSG:3857';
 
-  private host: any;
+  private host: ViewComponent | GeometryPointComponent | GeometryCircleComponent | OverlayComponent;
   private mapSrid = 'EPSG:3857';
 
   constructor(
@@ -64,17 +64,12 @@ export class CoordinateComponent implements OnChanges, OnInit {
       transformedCoordinates = transform([this.x, this.y], this.srid, this.mapSrid);
     }
 
-    switch (this.host.componentType) {
-      case 'geometry-point':
-        this.host.instance.setCoordinates(transformedCoordinates);
-        break;
-      case 'geometry-circle':
-      case 'view':
-        this.host.instance.setCenter(transformedCoordinates);
-        break;
-      case 'overlay':
-        this.host.instance.setPosition(transformedCoordinates);
-        break;
+    if (this.host instanceof GeometryPointComponent) {
+      this.host.instance.setCoordinates(transformedCoordinates);
+    } else if (this.host instanceof OverlayComponent) {
+      this.host.instance.setPosition(transformedCoordinates);
+    } else {
+      this.host.instance.setCenter(transformedCoordinates);
     }
   }
 }

projects/ngx-openlayers/src/lib/graticule.component.ts

@@ -2,6 +2,7 @@ import { AfterContentInit, Component, Input, OnChanges, OnDestroy, SimpleChanges
 import { Graticule } from 'ol';
 import { Stroke } from 'ol/style';
 import { MapComponent } from './map.component';
+import { Options } from 'ol/layer/Graticule';
 
 @Component({
   selector: 'aol-graticule',
@@ -23,18 +24,13 @@ export class GraticuleComponent implements AfterContentInit, OnChanges, OnDestro
   constructor(private map: MapComponent) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    const properties: { [index: string]: any } = {};
-
     if (!this.instance) {
       return;
     }
-
+    const properties: Options = {};
     for (const key in changes) {
-      if (changes.hasOwnProperty(key)) {
-        properties[key] = changes[key].currentValue;
-      }
+      properties[key] = changes[key].currentValue;
     }
-
     if (properties) {
       this.instance = new Graticule(properties);
     }

projects/ngx-openlayers/src/lib/layers/layer.component.ts

@@ -3,6 +3,7 @@ import { Extent } from 'ol/extent';
 import RenderEvent from 'ol/render/Event';
 import { MapComponent } from '../map.component';
 import { LayerGroupComponent } from './layergroup.component';
+import BaseObject from 'ol/Object';
 
 @Directive()
 export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
@@ -24,6 +25,7 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   postrender: (evt: RenderEvent) => void;
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   instance: any;
   componentType = 'layer';
 
@@ -44,21 +46,19 @@ export abstract class LayerComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    const properties: { [index: string]: any } = {};
     if (!this.instance) {
       return;
     }
+    const properties: Parameters<BaseObject['setProperties']>[0] = {};
     for (const key in changes) {
-      if (changes.hasOwnProperty(key)) {
-        properties[key] = changes[key].currentValue;
-        if (key === 'prerender') {
-          this.instance.un('prerender', changes[key].previousValue);
-          this.instance.on('prerender', changes[key].currentValue);
-        }
-        if (key === 'postrender') {
-          this.instance.un('postrender', changes[key].previousValue);
-          this.instance.on('postrender', changes[key].currentValue);
-        }
+      properties[key] = changes[key].currentValue;
+      if (key === 'prerender') {
+        this.instance.un('prerender', changes[key].previousValue);
+        this.instance.on('prerender', changes[key].currentValue);
+      }
+      if (key === 'postrender') {
+        this.instance.un('postrender', changes[key].previousValue);
+        this.instance.on('postrender', changes[key].currentValue);
       }
     }
     // console.log('changes detected in aol-layer, setting new properties: ', properties);

projects/ngx-openlayers/src/lib/layers/layergroup.component.ts

@@ -1,27 +1,58 @@
-import { Component, OnDestroy, OnInit, SkipSelf, Optional } from '@angular/core';
+import { Component, Input, OnChanges, OnDestroy, OnInit, Optional, SimpleChanges, SkipSelf } from '@angular/core';
 import { Group } from 'ol/layer';
-import { LayerComponent } from './layer.component';
 import { MapComponent } from '../map.component';
+import { Extent } from 'ol/extent';
+import BaseObject from 'ol/Object';
 
 @Component({
   selector: 'aol-layer-group',
   template: ` <ng-content></ng-content> `,
 })
-export class LayerGroupComponent extends LayerComponent implements OnInit, OnDestroy {
+export class LayerGroupComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  opacity: number;
+  @Input()
+  visible: boolean;
+  @Input()
+  extent: Extent;
+  @Input()
+  zIndex: number;
+  @Input()
+  minResolution: number;
+  @Input()
+  maxResolution: number;
+
   public instance: Group;
+  componentType = 'layer';
+  private host: MapComponent | LayerGroupComponent;
 
   constructor(
     map: MapComponent,
     @SkipSelf()
     @Optional()
     group?: LayerGroupComponent
   ) {
-    super(group || map);
+    this.host = group || map;
   }
 
   ngOnInit(): void {
     // console.log(`creating ol.layer.Group instance with:`, this);
     this.instance = new Group(this);
-    super.ngOnInit();
+    this.host.instance.getLayers().push(this.instance);
+  }
+
+  ngOnDestroy(): void {
+    this.host.instance.getLayers().remove(this.instance);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.instance) {
+      return;
+    }
+    const properties: Parameters<BaseObject['setProperties']>[0] = {};
+    for (const key in changes) {
+      properties[key] = changes[key].currentValue;
+    }
+    this.instance.setProperties(properties, false);
   }
 }