chore: migrate to angular 14

Author: jeremy-eychenne

angular.json

@@ -170,8 +170,9 @@
       }
     }
   },
-  "defaultProject": "demo-ngx-openlayers",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

package.json

@@ -15,50 +15,50 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~13.4.0",
-    "@angular/common": "~13.4.0",
-    "@angular/compiler": "~13.4.0",
-    "@angular/core": "~13.4.0",
-    "@angular/forms": "~13.4.0",
-    "@angular/platform-browser": "~13.4.0",
-    "@angular/platform-browser-dynamic": "~13.4.0",
-    "@angular/router": "~13.4.0",
+    "@angular/animations": "^14.3.0",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
     "hammerjs": "^2.0.8",
     "ol": "~6.3.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.5.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.11",
-    "@angular-eslint/builder": "13.5.0",
-    "@angular-eslint/eslint-plugin": "13.5.0",
-    "@angular-eslint/eslint-plugin-template": "13.5.0",
-    "@angular-eslint/schematics": "13.5.0",
-    "@angular-eslint/template-parser": "13.5.0",
-    "@angular/cli": "~13.3.11",
-    "@angular/compiler-cli": "~13.4.0",
-    "@angular/language-service": "~13.4.0",
-    "@types/jasmine": "~3.8.0",
+    "@angular-devkit/build-angular": "^14.2.11",
+    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "14.4.0",
+    "@angular/cli": "^14.2.11",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/language-service": "^14.3.0",
+    "@types/jasmine": "~4.3.1",
     "@types/node": "^12.11.1",
-    "@typescript-eslint/eslint-plugin": "5.27.1",
-    "@typescript-eslint/parser": "5.27.1",
-    "eslint": "^8.17.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "eslint": "^8.23.0",
     "eslint-plugin-import": "latest",
     "eslint-plugin-jsdoc": "latest",
     "eslint-plugin-prefer-arrow": "latest",
-    "jasmine-core": "~4.0.0",
+    "jasmine-core": "~4.3.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~6.4.1",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.1.0",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "ng-packagr": "^13.3.1",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "ng-packagr": "^14.2.2",
     "prettier": "^2.0.3",
     "protractor": "~7.0.0",
     "standard-version": "^7.1.0",
     "ts-node": "~8.3.0",
-    "typescript": "~4.6.4"
+    "typescript": "~4.7.2"
   }
-}
+}

projects/ngx-openlayers/package.json

@@ -8,8 +8,8 @@
     "postchangelog": "cp projects/ngx-openlayers/CHANGELOG.md dist/ngx-openlayers/CHANGELOG.md"
   },
   "peerDependencies": {
-    "@angular/common": ">=6.0.0 <=13.x.x",
-    "@angular/core": ">=6.0.0 <=13.x.x",
+    "@angular/common": ">=6.0.0 <=14.x.x",
+    "@angular/core": ">=6.0.0 <=14.x.x",
     "ol": "^6.0.0"
   }
 }

projects/ngx-openlayers/tsconfig.lib.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "declarationMap": true,
-    "target": "es2018",
+    "target": "es2020",
     "declaration": true,
     "inlineSources": true,
     "types": [],

src/app/examples-list/examples-list.component.ts

@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { examplesList } from '../example-list';
 
+interface ExamplesListForm {
+  term: FormControl<string>;
+}
 @Component({
   selector: 'app-examples-list',
   template: `
@@ -73,7 +76,7 @@ import { examplesList } from '../example-list';
   ],
 })
 export class ExamplesListComponent implements OnInit {
-  form: FormGroup;
+  form: FormGroup<ExamplesListForm>;
   list = examplesList;
 
   constructor(private fb: FormBuilder) {}

src/app/map-position/map-position.component.ts

@@ -1,9 +1,14 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MapComponent, ViewComponent } from 'ngx-openlayers';
-import { FormBuilder, FormGroup } from '@angular/forms';
 import { transform } from 'ol/proj';
 import Projection from 'ol/proj/Projection';
 
+interface MapPositionForm {
+  x: FormControl<number>;
+  y: FormControl<number>;
+  zoom: FormControl<number>;
+}
 @Component({
   selector: 'app-map-position',
   template: `
@@ -93,7 +98,7 @@ export class MapPositionComponent implements OnInit {
   currentLon = 0;
   currentLat = 0;
 
-  form: FormGroup;
+  form: FormGroup<MapPositionForm>;
 
   constructor(private fb: FormBuilder) {}
 

tsconfig.json

@@ -13,7 +13,7 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],