Migrate to Angular 15 and enable ivy (#2212)

This commit migrates the angular packages to Angular ^15.
Support for older Angular versions is dropped.
Support for newer Angular versions than 15 is not added with this commit.

This gets rid of using Webpack for Angular builds. Only rollup is used there now.
To achieve this without adding an Angular workspace at the repository root,
a custom test runner was implemented.

Relax the Angular package's ESLint configs to not show import/no-unresolved errors for the Angular packages
due to a bug in the eslint import plugin: import-js/eslint-plugin-import#1810

Misc CI change: Adapted the coverage report merge to prepend paths.
This improves and fixes the coverage report because coveralls can recognize the files from the merged report.

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

Author: JBBianchi

.gitignore

@@ -13,4 +13,6 @@ stats.html
 !.vscode/settings.json
 
 .coveralls.yml
-packages/examples-react/build
+packages/examples-react/build
+
+**/.angular/cache

package.json

@@ -1,13 +1,13 @@
 {
   "name": "jsonforms-monorepo",
   "engines": {
-    "node": "^16.13",
+    "node": "^16.14",
     "pnpm": ">=7.13.4"
   },
   "scripts": {
     "lerna": "lerna",
     "preparePublish": "git clean -dfx && pnpm i --frozen-lockfile && pnpm run clean && pnpm run build && pnpm run doc && pnpm run test",
-    "merge-report": "mkdir -p coverage && lcov-result-merger 'packages/**/coverage/lcov.info' 'coverage/lcov.info'",
+    "merge-report": "mkdir -p coverage && lcov-result-merger 'packages/**/coverage/lcov.info' 'coverage/lcov.info' --prepend-source-files",
     "check-format": "echo 'temporarily disabled'",
     "build": "lerna run build",
     "bundle": "lerna run bundle",

packages/angular-material/.eslintrc.js

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

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

@@ -74,7 +74,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
     <div>
       <button (click)="changeLocale('de-DE')">Change locale to de-DE</button>
       <button (click)="changeLocale('en-US')">Change locale to en-US</button>
-      Current locale: {{ currentLocale }}
+      Current locale: {{ i18n.locale }}
       <button (click)="toggleReadonly()">
         {{ readonly ? 'Unset' : 'Set' }} Readonly
       </button>
@@ -85,19 +85,17 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [uischema]="selectedExample.uischema"
       [renderers]="renderers"
       [i18n]="i18n"
-      [uischemas]="uischemas"
       [readonly]="readonly"
-      [config]="config"
     ></jsonforms>
   `,
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;
   readonly examples = getExamples();
-  selectedExample: ExampleDescription;
+  selectedExample: ExampleDescription | undefined;
   i18n: JsonFormsI18nState;
   private dateAdapter;
-  private readonly = false;
+  readonly = false;
   data: any;
   uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[] = [
     { tester: itemTester, uischema: uiSchema },
@@ -114,7 +112,7 @@ export class AppComponent {
     this.selectedExample = this.examples.find(
       (e) => e.name === ev.target.value
     );
-    this.i18n = this.selectedExample.i18n ?? defaultI18n;
+    this.i18n = this.selectedExample?.i18n ?? defaultI18n;
   }
 
   changeLocale(locale: string) {

packages/angular-material/karma.conf.js

@@ -0,0 +1,54 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      subdir: '.',
+      reporters: [
+        { type: 'lcov' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml', 'dots'],
+
+    browsers: [ config.singleRun ? 'ChromeHeadlessNoSandbox' : 'Chrome' ],
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox'],
+      },
+    },
+    restartOnFileChange: true,
+    logLevel: config.LOG_INFO,
+
+    webpackMiddleware: {
+      stats: 'detailed',
+    },
+
+    webpackServer: {
+      noInfo: true,
+    },
+  });
+};

packages/angular-material/package.json

@@ -39,16 +39,17 @@
   "typings": "./lib/esm/index.d.ts",
   "scripts": {
     "build": "ngc && ngc -p tsconfig.cjs.json",
-    "build:examples-app": "rollup -c rollup.example.config.js",
-    "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
+    "build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.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": "karma start ./test-config/karma.conf.js --single-run",
-    "test-ci": "karma start ./test-config/karma.conf.js --single-run",
-    "test-cov": "karma start ./test-config/karma.conf.js --coverage --single-run",
+    "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",
     "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,93 +61,94 @@
     ]
   },
   "peerDependencies": {
-    "@angular/animations": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/cdk": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/flex-layout": "^12.0.0-beta || ^13.0.0-beta || ^14.0.0-beta",
-    "@angular/forms": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/material": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/platform-browser": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/router": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "@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",
     "@jsonforms/angular": "3.2.0-alpha.3",
+    "@jsonforms/angular-test": "^3.2.0-alpha.3",
     "@jsonforms/core": "3.2.0-alpha.3",
-    "core-js": "^2.5.3",
-    "rxjs": "^6.5.3 || ^7.4.0"
+    "rxjs": "^6.6.0 || ^7.4.0"
   },
   "dependencies": {
     "hammerjs": "2.0.8",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@angular-eslint/eslint-plugin": "^12.0.0",
-    "@angular-eslint/eslint-plugin-template": "^12.0.0",
-    "@angular-eslint/schematics": "^12.0.0",
-    "@angular-eslint/template-parser": "^12.0.0",
-    "@angular/animations": "^12.0.0",
-    "@angular/cdk": "^12.0.0",
-    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^12.0.0",
-    "@angular/compiler-cli": "^12.0.0",
-    "@angular/core": "^12.0.0",
-    "@angular/flex-layout": "^12.0.0-beta",
-    "@angular/forms": "^12.0.0",
-    "@angular/material": "^12.0.0",
-    "@angular/platform-browser": "^12.0.0",
-    "@angular/platform-browser-dynamic": "^12.0.0",
-    "@angular/router": "^12.0.0",
+    "@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",
     "@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",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
-    "@types/node": "^16.18.34",
+    "@types/jasmine": "~3.8.0",
+    "@types/lodash": "4.14.149",
+    "@types/node": "^18.10.0",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
-    "angular2-template-loader": "^0.6.2",
     "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.5",
-    "core-js": "^2.5.3",
+    "copy-webpack-plugin": "^11.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
     "html-loader": "^0.5.5",
-    "istanbul-instrumenter-loader": "^3.0.1",
+    "http-server": "^14.1.1",
     "jasmine": "^3.99.0",
     "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^3.1.4",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.2.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-coverage": "~2.0.3",
     "karma-jasmine": "^2.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-sourcemap-loader": "^0.3.8",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "^5.0.0",
+    "ng-packagr": "^15.0.0",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
     "prettier": "^2.8.4",
-    "protractor": "^5.4.1",
-    "request": "^2.88.0",
+    "protractor": "^7.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "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.5.3",
+    "rxjs": "^6.6.0",
     "ts-loader": "^6.2.1",
     "tslib": "^2.5.0",
-    "typedoc": "~0.21.9",
-    "typescript": "4.2.3",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-server": "^3.9.0",
+    "typedoc": "~0.25.3",
+    "typescript": "~4.9.5",
+    "webpack": "^5.78.0",
+    "yargs": "^17.7.2",
     "zone.js": "^0.11.4"
   }
 }

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

@@ -10,7 +10,7 @@ import typescript from 'rollup-plugin-typescript2';
  * @type {import('rollup').RollupOptions}
  */
 const config = {
-  input: 'example/main.ts',
+  input: 'example/dist/example/main.js',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',

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

@@ -108,6 +108,7 @@ export class AutocompleteControlRenderer
   @Input() options: string[];
   filteredOptions: Observable<string[]>;
   shouldFilter: boolean;
+  focused = false;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);

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

@@ -54,6 +54,8 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateControlRenderer extends JsonFormsControl {
+  focused = false;
+
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }

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

@@ -69,6 +69,7 @@ export class NumberControlRenderer extends JsonFormsControl {
   locale: string;
   numberFormat: Intl.NumberFormat;
   decimalSeparator: string;
+  focused = false;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);