angular: Migrate to standalone components

MIGRATION.md

@@ -1,5 +1,13 @@
 # Migration guide
 
+## Migrating to JSON Forms 3.7
+
+### Angular support now targets Angular 19 and Angular 20
+
+When using JSON Forms 3.7, your Angular application now needs to target Angular 19 or 20.
+
+Use JSON Forms 3.6 if you need to stay on Angular 18.
+
 ## Migrating to JSON Forms 3.6
 
 ### UI schema type changes

package.json

@@ -21,8 +21,6 @@
     "build:examples-app": "lerna run build:examples-app && node packages/examples-app/prepare-examples-app.js"
   },
   "devDependencies": {
-    "@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",

packages/angular-material/.eslintrc.js

@@ -35,19 +35,19 @@ module.exports = {
     ],
     // workaround for
     // https://github.com/import-js/eslint-plugin-import/issues/1810:
-    "import/no-unresolved": [
-      "error",
+    'import/no-unresolved': [
+      'error',
       {
         ignore: [
-          "@angular/cdk/.*",
-          "@angular/core/.*",
-          "@angular/material/.*",
-          "@angular/platform-browser/.*",
-          "@angular/platform-browser-dynamic/.*",
-          "core-js/es7/.*",
-          "zone.js/.*",
-        ] 
-      }
+          '@angular/cdk/.*',
+          '@angular/core/.*',
+          '@angular/material/.*',
+          '@angular/platform-browser/.*',
+          '@angular/platform-browser-dynamic/.*',
+          'core-js/es7/.*',
+          'zone.js/.*',
+        ],
+      },
     ],
   },
 };

packages/angular-material/angular.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": ".",
   "projects": {
@@ -20,28 +20,23 @@
             "outputPath": "example/dist/",
             "index": "example/index.html",
             "main": "example/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
+            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.example.json",
             "inlineStyleLanguage": "scss",
             "assets": [],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
             ],
             "scripts": [],
-            "allowedCommonJsDependencies": [
-              "lodash",
-              "hammerjs"
-            ],
+            "allowedCommonJsDependencies": ["lodash", "hammerjs"],
             "optimization": false,
             "buildOptimizer": false
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-           "buildTarget": "example:build"
+            "buildTarget": "example:build"
           }
         }
       }
@@ -72,10 +67,7 @@
           "options": {
             "karmaConfig": "karma.conf.js",
             "tsConfig": "tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
+            "polyfills": ["zone.js", "zone.js/testing"]
           }
         }
       }

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

@@ -23,6 +23,8 @@
   THE SOFTWARE.
 */
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { JsonFormsModule } from '@jsonforms/angular';
 import { ExampleDescription, getExamples } from '@jsonforms/examples';
 import {
   JsonFormsI18nState,
@@ -87,7 +89,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [readonly]="readonly"
     ></jsonforms>
   `,
-  standalone: false,
+  imports: [CommonModule, JsonFormsModule],
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;

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

@@ -29,11 +29,11 @@ import { AppComponent } from './app.component';
 import { JsonFormsAngularMaterialModule } from '../../src/library';
 
 @NgModule({
-  declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     JsonFormsAngularMaterialModule,
+    AppComponent,
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

packages/angular-material/package.json

@@ -64,14 +64,14 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/cdk": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/common": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/forms": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/material": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/platform-browser": "^18.0.0 || ^19.0.0 || ^20.0.0",
-    "@angular/router": "^18.0.0 || ^19.0.0 || ^20.0.0",
+    "@angular/animations": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
+    "@angular/cdk": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
+    "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
+    "@angular/core": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
+    "@angular/forms": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
+    "@angular/material": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
+    "@angular/platform-browser": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
+    "@angular/router": "^19.0.0 || ^20.0.0 || ^21.0.0-rc.0",
     "@jsonforms/angular": "3.7.0-alpha.2",
     "@jsonforms/core": "3.7.0-alpha.2",
     "dayjs": "^1.11.10",
@@ -82,29 +82,30 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@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",
+    "@angular-devkit/build-angular": "^19.0.0",
+    "@angular-devkit/core": "^19.0.0",
+    "@angular-eslint/eslint-plugin": "^19.0.0",
+    "@angular-eslint/eslint-plugin-template": "^19.0.0",
+    "@angular-eslint/schematics": "^19.0.0",
+    "@angular-eslint/template-parser": "^19.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/cdk": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/material": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.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": "^18.0.0",
+    "@ngtools/webpack": "^19.0.0",
     "@types/jasmine": "~3.8.0",
     "@types/lodash": "4.14.149",
     "@types/node": "^22.13.8",
@@ -128,7 +129,7 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "ng-packagr": "^18.0.0",
+    "ng-packagr": "^19.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
@@ -141,6 +142,6 @@
     "typescript": "~5.5.0",
     "webpack": "^5.78.0",
     "yargs": "^17.7.2",
-    "zone.js": "~0.14.10"
+    "zone.js": "~0.15.0"
   }
 }

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

@@ -41,6 +41,11 @@ import {
 } from '@jsonforms/core';
 import type { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 
 /**
  * To use this component you will need to add your own tester:
@@ -110,7 +115,13 @@ import { map, startWith } from 'rxjs/operators';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatAutocompleteModule,
+  ],
 })
 export class AutocompleteControlRenderer
   extends JsonFormsControl

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

@@ -30,6 +30,9 @@ import {
 } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   selector: 'BooleanControlRenderer',
@@ -65,7 +68,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [CommonModule, MatCheckboxModule, MatFormFieldModule],
 })
 export class BooleanControlRenderer extends JsonFormsControl {
   constructor(

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

@@ -40,7 +40,14 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { MyFormat } from '../util/date-format';
 import { DayJsDateAdapter } from '../util/dayjs-date-adapter';
-import { MatDatepicker } from '@angular/material/datepicker';
+import {
+  MatDatepicker,
+  MatDatepickerModule,
+} from '@angular/material/datepicker';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'DateControlRenderer',
@@ -105,7 +112,13 @@ import { MatDatepicker } from '@angular/material/datepicker';
       useClass: MyFormat,
     },
   ],
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+  ],
 })
 export class DateControlRenderer extends JsonFormsControl {
   focused = false;

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

@@ -33,6 +33,10 @@ import {
   StatePropsOfControl,
 } from '@jsonforms/core';
 import merge from 'lodash/merge';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'NumberControlRenderer',
@@ -69,7 +73,12 @@ import merge from 'lodash/merge';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
 })
 export class NumberControlRenderer extends JsonFormsControl {
   private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;

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

@@ -29,6 +29,9 @@ import {
 } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
   selector: 'RangeControlRenderer',
@@ -69,7 +72,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [CommonModule, MatSliderModule, MatFormFieldModule],
 })
 export class RangeControlRenderer extends JsonFormsControl {
   min: number;

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

@@ -25,6 +25,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'TextControlRenderer',
@@ -58,7 +62,12 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
 })
 export class TextControlRenderer extends JsonFormsControl {
   focused = false;

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

@@ -25,6 +25,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'TextAreaRenderer',
@@ -57,7 +61,12 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
 })
 export class TextAreaRenderer extends JsonFormsControl {
   focused = false;