Support Angular 16 and 17 (#2229)

This adds support for Angular 16 and 17 and drops support for any older version.

* fix(angular-material): improved compatibility by removing angular flex layout
* fix(angular-test): added broader compatibility with angular
* fix(angular-material): fixed @angular-devkit/build-angular version
* fix(angular-material): fixed tests by removing empty component styles.
* fix(angular): updated to Angular 16
- readded angularCompilerOptions in tests tsconfig
- removed empty imports array in tests
- applied flex to divs only in group-layout renderer
- removed html comment in range renderer
* fix(angular-material): added padding on "mat cards"
* fix(angular): Fix range control event binding
* Update dependencies and restrict vue via pnpm override to ~3.3.13

Co-authored-by: Lucas Koehler <[email protected]>

Author: JBBianchi

.vscode/settings.json

@@ -49,5 +49,10 @@
     "**/node_modules": true,
     "**/lib": true
   },
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[javascript][javascriptreact][typescript][typescriptreact][vue]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+  }
 }

package.json

@@ -48,5 +48,11 @@
     "typescript": "4.2.3",
     "webpack": "^4.41.2",
     "webpack-merge": "^4.2.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "vue": "~3.3.13",
+      "@vue/compiler-sfc": "~3.3.13"
+    }
   }
 }

packages/angular-material/example/main.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import 'core-js/es7/reflect';
+import 'core-js/es/reflect';
 import 'zone.js/dist/zone';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

packages/angular-material/package.json

@@ -39,7 +39,7 @@
   "typings": "./lib/esm/index.d.ts",
   "scripts": {
     "build": "ngc && ngc -p tsconfig.cjs.json",
-    "build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js",
+    "build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js --bundleConfigAsCjs",
     "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 .",
@@ -61,15 +61,14 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^15.0.0",
-    "@angular/cdk": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/flex-layout": "^15.0.0-beta",
-    "@angular/forms": "^15.0.0",
-    "@angular/material": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/router": "^15.0.0",
+    "@angular/animations": "^16.0.0 || ^17.0.0",
+    "@angular/cdk": "^16.0.0 || ^17.0.0",
+    "@angular/common": "^16.0.0 || ^17.0.0",
+    "@angular/core": "^16.0.0 || ^17.0.0",
+    "@angular/forms": "^16.0.0 || ^17.0.0",
+    "@angular/material": "^16.0.0 || ^17.0.0",
+    "@angular/platform-browser": "^16.0.0 || ^17.0.0",
+    "@angular/router": "^16.0.0 || ^17.0.0",
     "@jsonforms/angular": "3.2.0-alpha.4",
     "@jsonforms/core": "3.2.0-alpha.4",
     "rxjs": "^6.6.0 || ^7.4.0"
@@ -79,32 +78,31 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~15.2.10",
-    "@angular-eslint/eslint-plugin": "^15.0.0",
-    "@angular-eslint/eslint-plugin-template": "^15.0.0",
-    "@angular-eslint/schematics": "^15.0.0",
-    "@angular-eslint/template-parser": "^15.0.0",
-    "@angular/animations": "^15.0.0",
-    "@angular/cdk": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/flex-layout": "^15.0.0-beta",
-    "@angular/forms": "^15.0.0",
-    "@angular/material": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/router": "^15.0.0",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-eslint/eslint-plugin": "^16.0.0",
+    "@angular-eslint/eslint-plugin-template": "^16.0.0",
+    "@angular-eslint/schematics": "^16.0.0",
+    "@angular-eslint/template-parser": "^16.0.0",
+    "@angular/animations": "^16.0.0",
+    "@angular/cdk": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/forms": "^16.0.0",
+    "@angular/material": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/router": "^16.0.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
     "@babel/plugin-proposal-optional-chaining": "^7.16.5",
     "@jsonforms/angular": "workspace:*",
     "@jsonforms/angular-test": "workspace:*",
     "@jsonforms/core": "workspace:*",
     "@jsonforms/examples": "workspace:*",
-    "@ngtools/webpack": "^15.0.0",
+    "@ngtools/webpack": "^16.0.0",
     "@rollup/plugin-commonjs": "^23.0.3",
-    "@rollup/plugin-json": "^5.0.2",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@types/jasmine": "~3.8.0",
@@ -129,25 +127,23 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
     "karma-webpack": "^5.0.0",
-    "ng-packagr": "^15.0.0",
+    "ng-packagr": "^16.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
     "protractor": "^7.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.78.0",
-    "rollup-plugin-cleanup": "^3.2.1",
+    "rollup": "^3.0.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.3.1",
     "rollup-plugin-typescript2": "^0.34.1",
-    "rollup-plugin-visualizer": "^5.4.1",
     "rxjs": "^6.6.0",
     "ts-loader": "^6.2.1",
     "tslib": "^2.5.0",
     "typedoc": "~0.25.3",
     "typescript": "~4.9.5",
     "webpack": "^5.78.0",
     "yargs": "^17.7.2",
-    "zone.js": "^0.11.4"
+    "zone.js": "~0.13.0"
   }
 }

packages/angular-material/rollup.example.config.js

@@ -16,6 +16,9 @@ const config = {
     format: 'iife',
     sourcemap: true,
   },
+  // Disable treeshaking when generating bundles
+  // see: https://github.com/angular/angular/pull/32069
+  treeshake: false,
   plugins: [
     replace({
       'process.env.NODE_ENV': JSON.stringify('production'),

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

@@ -59,16 +59,15 @@ import { map, startWith } from 'rxjs/operators';
  * <pre><code>
  * ...
  * imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],
- * declarations: [AutocompleteControlRenderer],
- * entryComponents: [AutocompleteControlRenderer]
+ * declarations: [AutocompleteControlRenderer]
  * ...
  * </code></pre>
  *
  */
 @Component({
   selector: 'AutocompleteControlRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
@@ -99,6 +98,17 @@ import { map, startWith } from 'rxjs/operators';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: row;
+      }
+      mat-form-field {
+        flex: 1 1 auto;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteControlRenderer

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

@@ -34,12 +34,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'BooleanControlRenderer',
   template: `
-    <div
-      [fxHide]="hidden"
-      fxLayout="column"
-      fxLayoutAlign="center"
-      style="height:100%"
-    >
+    <div [ngStyle]="{ display: hidden ? 'none' : '' }" class="boolean-control">
       <mat-checkbox
         (change)="onChange($event)"
         [checked]="isChecked()"
@@ -54,6 +49,21 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: row;
+      }
+      .boolean-control {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 100%;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BooleanControlRenderer extends JsonFormsControl {

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

@@ -29,7 +29,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 @Component({
   selector: 'DateControlRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
@@ -51,6 +51,17 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: row;
+      }
+      mat-form-field {
+        flex: 1 1 auto;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateControlRenderer extends JsonFormsControl {

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

@@ -37,7 +37,7 @@ import merge from 'lodash/merge';
 @Component({
   selector: 'NumberControlRenderer',
   template: `
-    <mat-form-field fxFlex [fxHide]="hidden">
+    <mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
       <mat-label>{{ label }}</mat-label>
       <input
         matInput
@@ -57,6 +57,17 @@ import merge from 'lodash/merge';
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: row;
+      }
+      mat-form-field {
+        flex: 1 1 auto;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NumberControlRenderer extends JsonFormsControl {

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

@@ -33,7 +33,7 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
 @Component({
   selector: 'RangeControlRenderer',
   template: `
-    <div fxFlex fxLayout="column" [fxHide]="hidden">
+    <div [ngStyle]="{ display: hidden ? 'none' : '' }" class="range-control">
       <label class="mat-caption" style="color:rgba(0,0,0,.54)">{{
         label
       }}</label>
@@ -47,14 +47,27 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
         showTickMarks
         #ngSlider
       >
-        <input matSliderThumb />
+        <input matSliderThumb (valueChange)="onChange($event)" />
       </mat-slider>
       <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{
         description
       }}</mat-hint>
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: row;
+      }
+      .range-control {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RangeControlRenderer extends JsonFormsControl {
@@ -69,7 +82,7 @@ export class RangeControlRenderer extends JsonFormsControl {
   ) {
     super(jsonformsService);
   }
-  getEventValue = (event: any) => Number(event.value);
+  getEventValue = (event: number) => Number(event);
   mapAdditionalProps() {
     if (this.scopedSchema) {
       this.min = this.scopedSchema.minimum;