Upgrade Angular support to Angular 18 and 19 (#2403)

* Upgrade angular packages to support Angular 18 and 19. Develop against Angular 18.
* Update all packages to Typescript ~5.5.0.
* angular-material: Use a Angular workspace and remove custom build and test scripts, and test.ts.
* Add Angular version increase to migration guide

---------

Co-authored-by: Laurent Grangier <laurent.grangier@codeblock.ch>

Author: lucas-koehler

MIGRATION.md

@@ -1,5 +1,13 @@
 # Migration guide
 
+## Migrating to JSON Forms 3.5
+
+### Angular support now targets Angular 18 and Angular 19
+
+When using JSON Forms 3.5, your Angular application now needs to target Angular 18 or 19.
+
+Use JSON Forms 3.4 if you need to stay on Angular 17.
+
 ## Migrating to JSON Forms 3.3
 
 ### Angular support now targets Angular 17 and Angular 18

package.json

@@ -20,7 +20,8 @@
     "build:examples-app": "lerna run build:examples-app && node packages/examples-app/prepare-examples-app.js"
   },
   "devDependencies": {
-    "@angular/core": "^17.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/cli": "^18.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
@@ -44,7 +45,7 @@
     "ts-loader": "^9.5.1",
     "ts-node": "^10.4.0",
     "tslib": "^2.5.0",
-    "typescript": "~5.2.2",
+    "typescript": "~5.5.0",
     "webpack": "^5.78.0",
     "webpack-merge": "^5.10.0"
   }

packages/angular-material/angular.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": ".",
+  "projects": {
+    "example": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "example",
+      "sourceRoot": "example",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "example/dist/",
+            "index": "example/index.html",
+            "main": "example/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.example.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
+            ],
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+              "lodash",
+              "hammerjs"
+            ],
+            "optimization": false,
+            "buildOptimizer": false
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server"
+        }
+      }
+    },
+    "angular-material": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": ".",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.json"
+            },
+            "development": {
+              "tsConfig": "tsconfig.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "karmaConfig": "karma.conf.js",
+            "tsConfig": "tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

packages/angular-material/build-example.js

@@ -87,6 +87,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [readonly]="readonly"
     ></jsonforms>
   `,
+  standalone: false,
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;

packages/angular-material/build-package.js

@@ -33,7 +33,7 @@ module.exports = function (config) {
     },
     reporters: ['progress', 'kjhtml', 'dots'],
 
-    browsers: [ config.singleRun ? 'ChromeHeadlessNoSandbox' : 'Chrome' ],
+    browsers: [ 'ChromeHeadlessNoSandbox' ],
     customLaunchers: {
       ChromeHeadlessNoSandbox: {
         base: 'ChromeHeadless',

packages/angular-material/example/app/app.component.ts

@@ -37,18 +37,18 @@
   "module": "./lib/fesm2022/jsonforms-angular-material.mjs",
   "typings": "./lib/index.d.ts",
   "scripts": {
-    "build": "node ./build-package.js",
-    "build:examples-app": "pnpm run build && node ./build-example.js",
+    "build": "ng build",
+    "build:examples-app": "pnpm run build && ng build --project=example",
     "dev": "pnpm run build:examples-app && npx http-server ./example/dist/ -c-1 -o",
-    "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
+    "clean": "rimraf lib coverage example/dist .nyc_output 2> /dev/null",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "doc": "typedoc --name 'JSON Forms Angular Material Renderers' --out docs src",
-    "test-dbg": "node ./test-runner",
-    "test": "node ./test-runner --single-run",
-    "test-ci": "node ./test-runner --single-run",
-    "test-cov": "node ./test-runner --coverage --single-run",
+    "test-dbg": "ng test",
+    "test": "ng test --watch=false",
+    "test-ci": "ng test --watch=false --browsers ChromeHeadlessNoSandbox",
+    "test-cov": "ng test --watch=false --code-coverage --browsers ChromeHeadlessNoSandbox",
     "e2e": "npm run e2e-update && npm run e2e-test",
     "e2e-test": "protractor ./test-config/protractor.conf.js",
     "e2e-update": "webdriver-manager update --standalone false --gecko false"
@@ -60,14 +60,14 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^17.0.0 || ^18.0.0",
-    "@angular/cdk": "^17.0.0 || ^18.0.0",
-    "@angular/common": "^17.0.0 || ^18.0.0",
-    "@angular/core": "^17.0.0 || ^18.0.0",
-    "@angular/forms": "^17.0.0 || ^18.0.0",
-    "@angular/material": "^17.0.0 || ^18.0.0",
-    "@angular/platform-browser": "^17.0.0 || ^18.0.0",
-    "@angular/router": "^17.0.0 || ^18.0.0",
+    "@angular/animations": "^18.0.0 || ^19.0.0",
+    "@angular/cdk": "^18.0.0 || ^19.0.0",
+    "@angular/common": "^18.0.0 || ^19.0.0",
+    "@angular/core": "^18.0.0 || ^19.0.0",
+    "@angular/forms": "^18.0.0 || ^19.0.0",
+    "@angular/material": "^18.0.0 || ^19.0.0",
+    "@angular/platform-browser": "^18.0.0 || ^19.0.0",
+    "@angular/router": "^18.0.0 || ^19.0.0",
     "@jsonforms/angular": "3.4.1",
     "@jsonforms/core": "3.4.1",
     "dayjs": "^1.11.10",
@@ -78,29 +78,29 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular-devkit/core": "^17.0.0",
-    "@angular-eslint/eslint-plugin": "^17.0.0",
-    "@angular-eslint/eslint-plugin-template": "^17.0.0",
-    "@angular-eslint/schematics": "^17.0.0",
-    "@angular-eslint/template-parser": "^17.0.0",
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular-devkit/core": "^18.0.0",
+    "@angular-eslint/eslint-plugin": "^18.0.0",
+    "@angular-eslint/eslint-plugin-template": "^18.0.0",
+    "@angular-eslint/schematics": "^18.0.0",
+    "@angular-eslint/template-parser": "^18.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@jsonforms/angular": "workspace:*",
     "@jsonforms/core": "workspace:*",
     "@jsonforms/examples": "workspace:*",
-    "@ngtools/webpack": "^17.0.0",
+    "@ngtools/webpack": "^18.0.0",
     "@types/jasmine": "~3.8.0",
     "@types/lodash": "4.14.149",
     "@types/node": "^18.19.4",
@@ -124,7 +124,7 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "ng-packagr": "^17.0.0",
+    "ng-packagr": "^18.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
@@ -134,9 +134,9 @@
     "ts-loader": "^9.5.1",
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
-    "typescript": "~5.2.2",
+    "typescript": "~5.5.0",
     "webpack": "^5.78.0",
     "yargs": "^17.7.2",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.14.10"
   }
 }

packages/angular-material/karma.conf.js

@@ -110,6 +110,7 @@ import { map, startWith } from 'rxjs/operators';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AutocompleteControlRenderer
   extends JsonFormsControl

packages/angular-material/package.json

@@ -65,6 +65,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class BooleanControlRenderer extends JsonFormsControl {
   constructor(