[FIX-eclipsesource#2386] Add support for Angular 19

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,40 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": ".",
+  "projects": {
+    "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": {
+            "tsConfig": "tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

packages/angular-material/package.json

@@ -37,18 +37,18 @@
   "module": "./lib/fesm2022/jsonforms-angular-material.mjs",
   "typings": "./lib/index.d.ts",
   "scripts": {
-    "build": "node ./build-package.js",
+    "build": "ng build",
     "build:examples-app": "pnpm run build && node ./build-example.js",
     "dev": "pnpm run build:examples-app && npx http-server ./example/dist/ -c-1 -o",
     "clean": "rimraf lib coverage 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",
+    "test-cov": "ng test --coverage --watch=false",
     "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,23 +78,23 @@
     "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 || ^19.0.0",
+    "@angular/cdk": "^18.0.0 || ^19.0.0",
+    "@angular/common": "^18.0.0 || ^19.0.0",
+    "@angular/compiler": "^18.0.0 || ^19.0.0",
+    "@angular/compiler-cli": "^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/platform-browser-dynamic": "^18.0.0 || ^19.0.0",
+    "@angular/router": "^18.0.0 || ^19.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@jsonforms/angular": "workspace:*",
@@ -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.15.0"
   }
 }

packages/angular-material/src/library/controls/autocomplete.renderer.ts

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

packages/angular-material/src/library/controls/boolean.renderer.ts

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

packages/angular-material/src/library/controls/date.renderer.ts

@@ -105,6 +105,7 @@ import { MatDatepicker } from '@angular/material/datepicker';
       useClass: MyFormat,
     },
   ],
+  standalone: false,
 })
 export class DateControlRenderer extends JsonFormsControl {
   focused = false;

packages/angular-material/src/library/controls/number.renderer.ts

@@ -69,6 +69,7 @@ import merge from 'lodash/merge';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class NumberControlRenderer extends JsonFormsControl {
   private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;

packages/angular-material/src/library/controls/range.renderer.ts

@@ -69,6 +69,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class RangeControlRenderer extends JsonFormsControl {
   min: number;

packages/angular-material/src/library/controls/text.renderer.ts

@@ -58,6 +58,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class TextControlRenderer extends JsonFormsControl {
   focused = false;

packages/angular-material/src/library/controls/textarea.renderer.ts

@@ -57,6 +57,7 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class TextAreaRenderer extends JsonFormsControl {
   focused = false;

packages/angular-material/src/library/controls/toggle.renderer.ts

@@ -55,6 +55,7 @@ import {
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ToggleControlRenderer extends JsonFormsControl {
   constructor(

packages/angular-material/src/library/layouts/array-layout.renderer.ts

@@ -161,6 +161,7 @@ import {
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ArrayLayoutRenderer
   extends JsonFormsAbstractControl<StatePropsOfArrayLayout>

packages/angular-material/src/library/layouts/categorization-layout.renderer.ts

@@ -65,6 +65,7 @@ import {
       </mat-tab>
     </mat-tab-group>
   `,
+  standalone: false,
 })
 export class CategorizationTabLayoutRenderer
   extends JsonFormsBaseRenderer<Categorization>

packages/angular-material/src/library/layouts/group-layout.renderer.ts

@@ -64,6 +64,7 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class GroupLayoutRenderer extends LayoutRenderer<GroupLayout> {
   constructor(

packages/angular-material/src/library/layouts/horizontal-layout.renderer.ts

@@ -68,6 +68,7 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class HorizontalLayoutRenderer extends LayoutRenderer<HorizontalLayout> {
   constructor(

packages/angular-material/src/library/layouts/layout.renderer.ts

@@ -79,7 +79,10 @@ export class LayoutRenderer<T extends Layout>
   }
 }
 
-@Pipe({ name: 'layoutChildrenRenderProps' })
+@Pipe({
+  name: 'layoutChildrenRenderProps',
+  standalone: false,
+})
 export class LayoutChildrenRenderPropsPipe implements PipeTransform {
   transform(
     uischema: Layout,

packages/angular-material/src/library/layouts/vertical-layout.renderer.ts

@@ -63,6 +63,7 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class VerticalLayoutRenderer extends LayoutRenderer<VerticalLayout> {
   constructor(

packages/angular-material/src/library/other/label.renderer.ts

@@ -47,6 +47,7 @@ import {
       }
     `,
   ],
+  standalone: false,
 })
 export class LabelRenderer
   extends JsonFormsBaseRenderer<LabelElement>

packages/angular-material/src/library/other/master-detail/detail.ts

@@ -31,6 +31,7 @@ import { Component, Input } from '@angular/core';
       <jsonforms-outlet [renderProps]="_item"></jsonforms-outlet>
     </div>
   `,
+  standalone: false,
 })
 export class JsonFormsDetailComponent {
   _item: any;

packages/angular-material/src/library/other/master-detail/master.ts

@@ -159,6 +159,7 @@ export const removeSchemaKeywords = (path: string) => {
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MasterListComponent
   extends JsonFormsArrayControl

packages/angular-material/src/library/other/object.renderer.ts

@@ -62,6 +62,7 @@ import { cloneDeep } from 'lodash';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ObjectControlRenderer extends JsonFormsControlWithDetail {
   detailUiSchema: UISchemaElement;

packages/angular-material/src/library/other/table.renderer.ts

@@ -148,6 +148,7 @@ import {
     '.sort-column { min-width: 12vw;}',
     '.table-container {max-width: 100%; overflow: auto;}',
   ],
+  standalone: false,
 })
 export class TableRenderer extends JsonFormsArrayControl implements OnInit {
   detailUiSchema: UISchemaElement;
@@ -272,7 +273,10 @@ export const controlWithoutLabel = (scope: string): ControlElement => ({
   label: false,
 });
 
-@Pipe({ name: 'getProps' })
+@Pipe({
+  name: 'getProps',
+  standalone: false,
+})
 export class GetProps implements PipeTransform {
   transform(index: number, props: OwnPropsOfRenderer) {
     const rowPath = Paths.compose(props.path, `${index}`);

packages/angular/package.json

@@ -67,20 +67,20 @@
     "lodash": "^4.17.21"
   },
   "peerDependencies": {
-    "@angular/core": "^17.0.0 || ^18.0.0",
-    "@angular/forms": "^17.0.0 || ^18.0.0",
+    "@angular/core": "^18.0.0 || ^19.0.0",
+    "@angular/forms": "^18.0.0 || ^19.0.0",
     "@jsonforms/core": "3.4.1",
     "rxjs": "^6.6.0 || ^7.4.0"
   },
   "devDependencies": {
-    "@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/compiler": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.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/compiler": "^18.0.0 || ^19.0.0",
+    "@angular/compiler-cli": "^18.0.0 || ^19.0.0",
+    "@angular/core": "^18.0.0 || ^19.0.0",
+    "@angular/forms": "^18.0.0 || ^19.0.0",
     "@jsonforms/core": "workspace:*",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
@@ -90,14 +90,14 @@
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "ng-packagr": "^17.0.0",
+    "ng-packagr": "^18.0.0",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
     "rxjs": "^6.6.0",
     "source-map-support": "^0.5.21",
     "tslib": "^2.3.0",
     "typedoc": "~0.25.3",
-    "typescript": "~5.2.2"
+    "typescript": "~5.5.0"
   }
 }