From 3b58277970c0c830b565ce89aeb199ed10a6d47f Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bianchi <72747835+JBBianchi@users.noreply.github.com>
Date: Fri, 5 Jan 2024 13:57:00 +0100
Subject: [PATCH] Build Angular packages with ng-packagr (#2236)

This replaces the use of ngc with ng-packagr when building the angular packages.

With this, the libraries don't provide a cjs output anymore, only (partially compiled) *esm.

In order to tidy the output, the sources have been moved to a library sub folder and exposed via a commonly used public_api file.

The example for the angular material renderer has also been modified to import the output of the library instead of the sources. This allows to actually validate that the package can be loaded and fully compiled (rather than rebuilding everything, the lib + the app, all at once). Therefore, the use of rollup has been dropped in favor of the internal angular browser builder.

This also adds `@angular/core` as dev dependency to root package.json to facilitate the new build
working with angular-material's `dev` npm script from within the package.

---------

Co-authored-by: Lucas Koehler <lkoehler@eclipsesource.com>
---
 package.json                                  |   1 +
 packages/angular-material/build-example.js    |  73 +++++++++++
 packages/angular-material/build-package.js    |  11 ++
 .../example/app/app.component.ts              |   2 +-
 .../example/app/app.module.ts                 |   2 +-
 .../example/index.bundled.html                |  30 -----
 packages/angular-material/example/index.html  |   5 +-
 packages/angular-material/example/main.ts     |   3 +-
 packages/angular-material/ng-package.json     |  10 ++
 packages/angular-material/package.json        |  18 +--
 .../angular-material/rollup.example.config.js |  56 --------
 packages/angular-material/src/index.ts        | 122 +-----------------
 .../controls/autocomplete.renderer.ts         |   0
 .../controls/boolean.renderer.ts              |   0
 .../{ => library}/controls/date.renderer.ts   |   0
 .../src/{ => library}/controls/index.ts       |   0
 .../{ => library}/controls/number.renderer.ts |   0
 .../{ => library}/controls/range.renderer.ts  |   0
 .../{ => library}/controls/text.renderer.ts   |   0
 .../controls/textarea.renderer.ts             |   0
 .../{ => library}/controls/toggle.renderer.ts |   0
 .../angular-material/src/library/index.ts     | 121 +++++++++++++++++
 .../layouts/array-layout.renderer.ts          |   0
 .../layouts/categorization-layout.renderer.ts |   0
 .../layouts/group-layout.renderer.ts          |   0
 .../layouts/horizontal-layout.renderer.ts     |   0
 .../src/{ => library}/layouts/index.ts        |   0
 .../{ => library}/layouts/layout.renderer.ts  |   0
 .../layouts/vertical-layout.renderer.ts       |   0
 .../src/{ => library}/module.ts               |   0
 .../src/{ => library}/other/index.ts          |   0
 .../src/{ => library}/other/label.renderer.ts |   0
 .../other/master-detail/detail.ts             |   0
 .../other/master-detail/index.ts              |   0
 .../other/master-detail/master.ts             |   0
 .../{ => library}/other/object.renderer.ts    |   0
 .../src/{ => library}/other/table.renderer.ts |   0
 .../src/{ => library}/other/util.ts           |   0
 packages/angular-material/src/public_api.ts   |   1 +
 packages/angular-material/test-runner.js      |   4 +-
 .../test/group-layout.spec.ts                 |   4 +-
 .../test/horizontal-layout.spec.ts            |   4 +-
 .../test/label-renderer.spec.ts               |   2 +-
 .../test/master-detail.spec.ts                |   4 +-
 .../test/object-control.spec.ts               |   4 +-
 .../test/table-control.spec.ts                |   2 +-
 .../angular-material/test/tsconfig.test.json  |  11 --
 .../test/vertical-layout.spec.ts              |   4 +-
 packages/angular-material/tsconfig.cjs.json   |   9 --
 .../angular-material/tsconfig.example.json    |  13 +-
 packages/angular-material/tsconfig.json       |   7 +-
 packages/angular-test/build-package.js        |  11 ++
 packages/angular-test/ng-package.json         |   8 ++
 packages/angular-test/package.json            |   5 +-
 packages/angular-test/src/index.ts            |  31 +----
 .../angular-test/src/{ => library}/boolean.ts |   0
 packages/angular-test/src/library/index.ts    |  30 +++++
 .../angular-test/src/{ => library}/layout.ts  |   0
 .../angular-test/src/{ => library}/number.ts  |   0
 .../angular-test/src/{ => library}/range.ts   |   0
 .../angular-test/src/{ => library}/text.ts    |   0
 .../angular-test/src/{ => library}/util.ts    |   0
 packages/angular-test/src/public_api.ts       |   1 +
 packages/angular-test/tsconfig.json           |  14 +-
 packages/angular/build-package.js             |  11 ++
 packages/angular/ng-package.json              |   5 +
 packages/angular/package.json                 |   7 +-
 packages/angular/src/index.ts                 |  34 +----
 .../src/{ => library}/abstract-control.ts     |   0
 .../src/{ => library}/array-control.ts        |   0
 .../src/{ => library}/base.renderer.ts        |   0
 packages/angular/src/{ => library}/control.ts |   0
 packages/angular/src/library/index.ts         |  33 +++++
 .../{ => library}/jsonforms-root.component.ts |   0
 .../src/{ => library}/jsonforms.component.ts  |   0
 .../src/{ => library}/jsonforms.module.ts     |   0
 .../src/{ => library}/jsonforms.service.ts    |   0
 .../src/{ => library}/unknown.component.ts    |   0
 packages/angular/src/public_api.ts            |   1 +
 packages/angular/tsconfig.json                |   7 +-
 pnpm-lock.yaml                                |  99 +-------------
 81 files changed, 379 insertions(+), 441 deletions(-)
 create mode 100644 packages/angular-material/build-example.js
 create mode 100644 packages/angular-material/build-package.js
 delete mode 100644 packages/angular-material/example/index.bundled.html
 create mode 100644 packages/angular-material/ng-package.json
 delete mode 100644 packages/angular-material/rollup.example.config.js
 rename packages/angular-material/src/{ => library}/controls/autocomplete.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/boolean.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/date.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/index.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/number.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/range.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/text.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/textarea.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/controls/toggle.renderer.ts (100%)
 create mode 100644 packages/angular-material/src/library/index.ts
 rename packages/angular-material/src/{ => library}/layouts/array-layout.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/layouts/categorization-layout.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/layouts/group-layout.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/layouts/horizontal-layout.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/layouts/index.ts (100%)
 rename packages/angular-material/src/{ => library}/layouts/layout.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/layouts/vertical-layout.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/module.ts (100%)
 rename packages/angular-material/src/{ => library}/other/index.ts (100%)
 rename packages/angular-material/src/{ => library}/other/label.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/other/master-detail/detail.ts (100%)
 rename packages/angular-material/src/{ => library}/other/master-detail/index.ts (100%)
 rename packages/angular-material/src/{ => library}/other/master-detail/master.ts (100%)
 rename packages/angular-material/src/{ => library}/other/object.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/other/table.renderer.ts (100%)
 rename packages/angular-material/src/{ => library}/other/util.ts (100%)
 create mode 100644 packages/angular-material/src/public_api.ts
 delete mode 100644 packages/angular-material/test/tsconfig.test.json
 delete mode 100644 packages/angular-material/tsconfig.cjs.json
 create mode 100644 packages/angular-test/build-package.js
 create mode 100644 packages/angular-test/ng-package.json
 rename packages/angular-test/src/{ => library}/boolean.ts (100%)
 create mode 100644 packages/angular-test/src/library/index.ts
 rename packages/angular-test/src/{ => library}/layout.ts (100%)
 rename packages/angular-test/src/{ => library}/number.ts (100%)
 rename packages/angular-test/src/{ => library}/range.ts (100%)
 rename packages/angular-test/src/{ => library}/text.ts (100%)
 rename packages/angular-test/src/{ => library}/util.ts (100%)
 create mode 100644 packages/angular-test/src/public_api.ts
 create mode 100644 packages/angular/build-package.js
 create mode 100644 packages/angular/ng-package.json
 rename packages/angular/src/{ => library}/abstract-control.ts (100%)
 rename packages/angular/src/{ => library}/array-control.ts (100%)
 rename packages/angular/src/{ => library}/base.renderer.ts (100%)
 rename packages/angular/src/{ => library}/control.ts (100%)
 create mode 100644 packages/angular/src/library/index.ts
 rename packages/angular/src/{ => library}/jsonforms-root.component.ts (100%)
 rename packages/angular/src/{ => library}/jsonforms.component.ts (100%)
 rename packages/angular/src/{ => library}/jsonforms.module.ts (100%)
 rename packages/angular/src/{ => library}/jsonforms.service.ts (100%)
 rename packages/angular/src/{ => library}/unknown.component.ts (100%)
 create mode 100644 packages/angular/src/public_api.ts

diff --git a/package.json b/package.json
index dbb332f7d0..f7c2ecfb1c 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "build:examples-app": "lerna run build:examples-app && node packages/examples-app/prepare-examples-app.js"
   },
   "devDependencies": {
+    "@angular/core": "^16.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",
diff --git a/packages/angular-material/build-example.js b/packages/angular-material/build-example.js
new file mode 100644
index 0000000000..76ee52538c
--- /dev/null
+++ b/packages/angular-material/build-example.js
@@ -0,0 +1,73 @@
+const path = require('path');
+const ngCore = require('@angular-devkit/core');
+const buildWebpackBrowser = require('@angular-devkit/build-angular/src/builders/browser').buildWebpackBrowser;
+
+const main = async () => new Promise((resolve, reject) => {
+  const project = 'angular-material';
+  const target = 'build';
+  const configuration = '';
+  const workspaceRoot = path.join(process.cwd(), '../..');
+  const root = `packages/${project}`;
+  const options = {
+    outputPath: root + '/example/dist',
+    tsConfig: root + '/tsconfig.example.json',
+    main: root + '/example/main.ts',
+    index: root + '/example/index.html',
+    styles: [
+      root + '/node_modules/@angular/material/prebuilt-themes/indigo-pink.css'
+    ],
+    allowedCommonJsDependencies: [
+      'lodash',
+      'hammerjs'
+    ],
+    watch: false,
+    buildOptimizer: false,
+    optimization: false,
+    outputHashing: 'none',
+  };
+  const sourceRoot = root;
+  const teardownLogics = [];
+  const context = {
+    workspaceRoot,
+    logger: new ngCore.logging.Logger(`${project}:${target}:`),
+    target: {
+        project,
+        configuration,
+        target
+    },
+    getProjectMetadata: (projectName) => Promise.resolve({
+        root,
+        sourceRoot
+    }),
+    getBuilderNameForTarget: () => '@angular-devkit/build-angular:karma',
+    getTargetOptions: (target) => ({...options}),
+    validateOptions: (options) => options,
+    addTeardown: (teardown) => {
+      teardownLogics.push(teardown);
+    }
+  };
+  let exitCode = 1;
+  buildWebpackBrowser(options, context, {}).subscribe({
+    next: out => {
+      if (out.success) {
+        exitCode = 0;
+      }
+    },
+    error: (err) => {
+      reject(err);
+    },
+    complete: () => {
+      if (!exitCode) return resolve();
+      reject();
+    }
+  });
+  return exitCode;
+});
+
+main()
+.then(() => {
+  process.exit(0);
+})
+.catch(err => {
+  process.exit(1);
+});
\ No newline at end of file
diff --git a/packages/angular-material/build-package.js b/packages/angular-material/build-package.js
new file mode 100644
index 0000000000..aef214d1a9
--- /dev/null
+++ b/packages/angular-material/build-package.js
@@ -0,0 +1,11 @@
+const ngPackage = require('ng-packagr');
+
+ngPackage
+  .ngPackagr()
+  .forProject('ng-package.json')
+  .withTsConfig('tsconfig.json')
+  .build()
+  .catch(error => {
+    console.error(error);
+    process.exit(1);
+  });
\ No newline at end of file
diff --git a/packages/angular-material/example/app/app.component.ts b/packages/angular-material/example/app/app.component.ts
index 2a274a6145..ecf04458aa 100644
--- a/packages/angular-material/example/app/app.component.ts
+++ b/packages/angular-material/example/app/app.component.ts
@@ -29,7 +29,7 @@ import {
   UISchemaElement,
   UISchemaTester,
 } from '@jsonforms/core';
-import { angularMaterialRenderers } from '../../src/index';
+import { angularMaterialRenderers } from '../../lib';
 import { DateAdapter } from '@angular/material/core';
 
 const uiSchema = {
diff --git a/packages/angular-material/example/app/app.module.ts b/packages/angular-material/example/app/app.module.ts
index 25cb82bf94..9b532e27a1 100644
--- a/packages/angular-material/example/app/app.module.ts
+++ b/packages/angular-material/example/app/app.module.ts
@@ -26,7 +26,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
-import { JsonFormsAngularMaterialModule } from '../../src/module';
+import { JsonFormsAngularMaterialModule } from '../../lib';
 
 @NgModule({
   declarations: [AppComponent],
diff --git a/packages/angular-material/example/index.bundled.html b/packages/angular-material/example/index.bundled.html
deleted file mode 100644
index 52c0b9b0b3..0000000000
--- a/packages/angular-material/example/index.bundled.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>JSON Forms Angular Material RendererSet</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link href="indigo-pink.css" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100"
-      rel="stylesheet"
-      type="text/css"
-    />
-  </head>
-  <body>
-    <app-root></app-root>
-  </body>
-  <script src="bundle.js"></script>
-</html>
-
-<!--
-Copyright 2017-2018 Google Inc. All Rights Reserved.
-Use of this source code is governed by an MIT-style license that
-can be found in the LICENSE file at http://angular.io/license
--->
diff --git a/packages/angular-material/example/index.html b/packages/angular-material/example/index.html
index 7eb9fa2b81..07875afcb5 100644
--- a/packages/angular-material/example/index.html
+++ b/packages/angular-material/example/index.html
@@ -2,12 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Tour of Heroes</title>
-    <base href="/" />
+    <title>JSON Forms Angular Material RendererSet</title>
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link href="assets/indigo-pink.css" rel="stylesheet" />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
@@ -21,7 +19,6 @@
   <body>
     <app-root></app-root>
   </body>
-  <script src="assets/bundle.js"></script>
 </html>
 
 <!-- 
diff --git a/packages/angular-material/example/main.ts b/packages/angular-material/example/main.ts
index bdb3faa2d9..2a4879ee7b 100644
--- a/packages/angular-material/example/main.ts
+++ b/packages/angular-material/example/main.ts
@@ -22,8 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import 'core-js/es/reflect';
-import 'zone.js/dist/zone';
+import 'zone.js';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import { AppModule } from './app/app.module';
diff --git a/packages/angular-material/ng-package.json b/packages/angular-material/ng-package.json
new file mode 100644
index 0000000000..e13258f5df
--- /dev/null
+++ b/packages/angular-material/ng-package.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./lib",
+  "allowedNonPeerDependencies": [
+    "@jsonforms/angular",
+    "@jsonforms/core",
+    "hammerjs", 
+    "lodash"
+  ]
+}
\ No newline at end of file
diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json
index 01e572bac5..a405e59b67 100644
--- a/packages/angular-material/package.json
+++ b/packages/angular-material/package.json
@@ -34,12 +34,11 @@
     "layout",
     "customization"
   ],
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "typings": "./lib/esm/index.d.ts",
+  "module": "./lib/fesm2022/jsonforms-angular-material.mjs",
+  "typings": "./lib/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 --bundleConfigAsCjs",
+    "build": "node ./build-package.js",
+    "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 .",
@@ -79,6 +78,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-devkit/core": "^16.0.0",
     "@angular-eslint/eslint-plugin": "^16.0.0",
     "@angular-eslint/eslint-plugin-template": "^16.0.0",
     "@angular-eslint/schematics": "^16.0.0",
@@ -101,10 +101,6 @@
     "@jsonforms/core": "workspace:*",
     "@jsonforms/examples": "workspace:*",
     "@ngtools/webpack": "^16.0.0",
-    "@rollup/plugin-commonjs": "^23.0.3",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
     "@types/jasmine": "~3.8.0",
     "@types/lodash": "4.14.149",
     "@types/node": "^18.19.4",
@@ -133,10 +129,6 @@
     "prettier": "^2.8.4",
     "protractor": "^7.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^3.0.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-import-css": "^3.3.1",
-    "rollup-plugin-typescript2": "^0.34.1",
     "rxjs": "^6.6.0",
     "ts-loader": "^6.2.1",
     "tslib": "^2.5.0",
diff --git a/packages/angular-material/rollup.example.config.js b/packages/angular-material/rollup.example.config.js
deleted file mode 100644
index 8452a1d3ea..0000000000
--- a/packages/angular-material/rollup.example.config.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
-import nodeResolve from '@rollup/plugin-node-resolve';
-import replace from '@rollup/plugin-replace';
-import copy from 'rollup-plugin-copy';
-import css from 'rollup-plugin-import-css';
-import typescript from 'rollup-plugin-typescript2';
-
-/**
- * @type {import('rollup').RollupOptions}
- */
-const config = {
-  input: 'example/dist/example/main.js',
-  output: {
-    file: 'example/dist/bundle.js',
-    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'),
-      preventAssignment: true, // recommended to be set by library to be forward compatible
-    }),
-    nodeResolve({ browser: true }),
-    // Transform mixed because some JsonForms modules use import and require
-    commonjs({ transformMixedEsModules: true }),
-    css(),
-    json(),
-    typescript({
-      tsconfigOverride: {
-        compilerOptions: {
-          // Do not emit typescript declarations for our bundled example app
-          declaration: false,
-        },
-      },
-    }),
-    copy({
-      targets: [
-        {
-          src: 'node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
-          dest: 'example/dist',
-        },
-        {
-          src: 'example/index.bundled.html',
-          dest: 'example/dist',
-          rename: () => 'index.html',
-        },
-      ],
-    }),
-  ],
-};
-
-export default config;
diff --git a/packages/angular-material/src/index.ts b/packages/angular-material/src/index.ts
index 64c286e7d7..4aaf8f92ed 100644
--- a/packages/angular-material/src/index.ts
+++ b/packages/angular-material/src/index.ts
@@ -1,121 +1 @@
-/*
-  The MIT License
-  
-  Copyright (c) 2017-2019 EclipseSource Munich
-  https://github.com/eclipsesource/jsonforms
-  
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-  
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-  
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  THE SOFTWARE.
-*/
-import 'hammerjs';
-import { RankedTester } from '@jsonforms/core';
-export * from './module';
-import {
-  BooleanControlRenderer,
-  booleanControlTester,
-} from './controls/boolean.renderer';
-import {
-  TextControlRenderer,
-  TextControlRendererTester,
-} from './controls/text.renderer';
-import {
-  TextAreaRenderer,
-  TextAreaRendererTester,
-} from './controls/textarea.renderer';
-import {
-  NumberControlRenderer,
-  NumberControlRendererTester,
-} from './controls/number.renderer';
-import {
-  RangeControlRenderer,
-  RangeControlRendererTester,
-} from './controls/range.renderer';
-import {
-  DateControlRenderer,
-  DateControlRendererTester,
-} from './controls/date.renderer';
-import {
-  ToggleControlRenderer,
-  ToggleControlRendererTester,
-} from './controls/toggle.renderer';
-import {
-  AutocompleteControlRenderer,
-  enumControlTester,
-} from './controls/autocomplete.renderer';
-import {
-  ObjectControlRenderer,
-  ObjectControlRendererTester,
-} from './other/object.renderer';
-import {
-  VerticalLayoutRenderer,
-  verticalLayoutTester,
-} from './layouts/vertical-layout.renderer';
-import {
-  HorizontalLayoutRenderer,
-  horizontalLayoutTester,
-} from './layouts/horizontal-layout.renderer';
-
-import {
-  CategorizationTabLayoutRenderer,
-  categorizationTester,
-} from './layouts/categorization-layout.renderer';
-
-import { LabelRenderer, LabelRendererTester } from './other/label.renderer';
-import {
-  masterDetailTester,
-  MasterListComponent,
-} from './other/master-detail/master';
-import {
-  GroupLayoutRenderer,
-  groupLayoutTester,
-} from './layouts/group-layout.renderer';
-import { TableRenderer, TableRendererTester } from './other/table.renderer';
-import {
-  ArrayLayoutRenderer,
-  ArrayLayoutRendererTester,
-} from './layouts/array-layout.renderer';
-
-export * from './controls';
-export * from './layouts';
-export * from './other';
-
-export const angularMaterialRenderers: {
-  tester: RankedTester;
-  renderer: any;
-}[] = [
-  // controls
-  { tester: booleanControlTester, renderer: BooleanControlRenderer },
-  { tester: TextControlRendererTester, renderer: TextControlRenderer },
-  { tester: TextAreaRendererTester, renderer: TextAreaRenderer },
-  { tester: NumberControlRendererTester, renderer: NumberControlRenderer },
-  { tester: RangeControlRendererTester, renderer: RangeControlRenderer },
-  { tester: DateControlRendererTester, renderer: DateControlRenderer },
-  { tester: ToggleControlRendererTester, renderer: ToggleControlRenderer },
-  { tester: enumControlTester, renderer: AutocompleteControlRenderer },
-  { tester: ObjectControlRendererTester, renderer: ObjectControlRenderer },
-  // layouts
-  { tester: verticalLayoutTester, renderer: VerticalLayoutRenderer },
-  { tester: groupLayoutTester, renderer: GroupLayoutRenderer },
-  { tester: horizontalLayoutTester, renderer: HorizontalLayoutRenderer },
-  { tester: categorizationTester, renderer: CategorizationTabLayoutRenderer },
-  { tester: LabelRendererTester, renderer: LabelRenderer },
-  { tester: ArrayLayoutRendererTester, renderer: ArrayLayoutRenderer },
-  // other
-  { tester: masterDetailTester, renderer: MasterListComponent },
-  { tester: TableRendererTester, renderer: TableRenderer },
-];
+export * from './public_api';
diff --git a/packages/angular-material/src/controls/autocomplete.renderer.ts b/packages/angular-material/src/library/controls/autocomplete.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/autocomplete.renderer.ts
rename to packages/angular-material/src/library/controls/autocomplete.renderer.ts
diff --git a/packages/angular-material/src/controls/boolean.renderer.ts b/packages/angular-material/src/library/controls/boolean.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/boolean.renderer.ts
rename to packages/angular-material/src/library/controls/boolean.renderer.ts
diff --git a/packages/angular-material/src/controls/date.renderer.ts b/packages/angular-material/src/library/controls/date.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/date.renderer.ts
rename to packages/angular-material/src/library/controls/date.renderer.ts
diff --git a/packages/angular-material/src/controls/index.ts b/packages/angular-material/src/library/controls/index.ts
similarity index 100%
rename from packages/angular-material/src/controls/index.ts
rename to packages/angular-material/src/library/controls/index.ts
diff --git a/packages/angular-material/src/controls/number.renderer.ts b/packages/angular-material/src/library/controls/number.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/number.renderer.ts
rename to packages/angular-material/src/library/controls/number.renderer.ts
diff --git a/packages/angular-material/src/controls/range.renderer.ts b/packages/angular-material/src/library/controls/range.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/range.renderer.ts
rename to packages/angular-material/src/library/controls/range.renderer.ts
diff --git a/packages/angular-material/src/controls/text.renderer.ts b/packages/angular-material/src/library/controls/text.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/text.renderer.ts
rename to packages/angular-material/src/library/controls/text.renderer.ts
diff --git a/packages/angular-material/src/controls/textarea.renderer.ts b/packages/angular-material/src/library/controls/textarea.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/textarea.renderer.ts
rename to packages/angular-material/src/library/controls/textarea.renderer.ts
diff --git a/packages/angular-material/src/controls/toggle.renderer.ts b/packages/angular-material/src/library/controls/toggle.renderer.ts
similarity index 100%
rename from packages/angular-material/src/controls/toggle.renderer.ts
rename to packages/angular-material/src/library/controls/toggle.renderer.ts
diff --git a/packages/angular-material/src/library/index.ts b/packages/angular-material/src/library/index.ts
new file mode 100644
index 0000000000..64c286e7d7
--- /dev/null
+++ b/packages/angular-material/src/library/index.ts
@@ -0,0 +1,121 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import 'hammerjs';
+import { RankedTester } from '@jsonforms/core';
+export * from './module';
+import {
+  BooleanControlRenderer,
+  booleanControlTester,
+} from './controls/boolean.renderer';
+import {
+  TextControlRenderer,
+  TextControlRendererTester,
+} from './controls/text.renderer';
+import {
+  TextAreaRenderer,
+  TextAreaRendererTester,
+} from './controls/textarea.renderer';
+import {
+  NumberControlRenderer,
+  NumberControlRendererTester,
+} from './controls/number.renderer';
+import {
+  RangeControlRenderer,
+  RangeControlRendererTester,
+} from './controls/range.renderer';
+import {
+  DateControlRenderer,
+  DateControlRendererTester,
+} from './controls/date.renderer';
+import {
+  ToggleControlRenderer,
+  ToggleControlRendererTester,
+} from './controls/toggle.renderer';
+import {
+  AutocompleteControlRenderer,
+  enumControlTester,
+} from './controls/autocomplete.renderer';
+import {
+  ObjectControlRenderer,
+  ObjectControlRendererTester,
+} from './other/object.renderer';
+import {
+  VerticalLayoutRenderer,
+  verticalLayoutTester,
+} from './layouts/vertical-layout.renderer';
+import {
+  HorizontalLayoutRenderer,
+  horizontalLayoutTester,
+} from './layouts/horizontal-layout.renderer';
+
+import {
+  CategorizationTabLayoutRenderer,
+  categorizationTester,
+} from './layouts/categorization-layout.renderer';
+
+import { LabelRenderer, LabelRendererTester } from './other/label.renderer';
+import {
+  masterDetailTester,
+  MasterListComponent,
+} from './other/master-detail/master';
+import {
+  GroupLayoutRenderer,
+  groupLayoutTester,
+} from './layouts/group-layout.renderer';
+import { TableRenderer, TableRendererTester } from './other/table.renderer';
+import {
+  ArrayLayoutRenderer,
+  ArrayLayoutRendererTester,
+} from './layouts/array-layout.renderer';
+
+export * from './controls';
+export * from './layouts';
+export * from './other';
+
+export const angularMaterialRenderers: {
+  tester: RankedTester;
+  renderer: any;
+}[] = [
+  // controls
+  { tester: booleanControlTester, renderer: BooleanControlRenderer },
+  { tester: TextControlRendererTester, renderer: TextControlRenderer },
+  { tester: TextAreaRendererTester, renderer: TextAreaRenderer },
+  { tester: NumberControlRendererTester, renderer: NumberControlRenderer },
+  { tester: RangeControlRendererTester, renderer: RangeControlRenderer },
+  { tester: DateControlRendererTester, renderer: DateControlRenderer },
+  { tester: ToggleControlRendererTester, renderer: ToggleControlRenderer },
+  { tester: enumControlTester, renderer: AutocompleteControlRenderer },
+  { tester: ObjectControlRendererTester, renderer: ObjectControlRenderer },
+  // layouts
+  { tester: verticalLayoutTester, renderer: VerticalLayoutRenderer },
+  { tester: groupLayoutTester, renderer: GroupLayoutRenderer },
+  { tester: horizontalLayoutTester, renderer: HorizontalLayoutRenderer },
+  { tester: categorizationTester, renderer: CategorizationTabLayoutRenderer },
+  { tester: LabelRendererTester, renderer: LabelRenderer },
+  { tester: ArrayLayoutRendererTester, renderer: ArrayLayoutRenderer },
+  // other
+  { tester: masterDetailTester, renderer: MasterListComponent },
+  { tester: TableRendererTester, renderer: TableRenderer },
+];
diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/library/layouts/array-layout.renderer.ts
similarity index 100%
rename from packages/angular-material/src/layouts/array-layout.renderer.ts
rename to packages/angular-material/src/library/layouts/array-layout.renderer.ts
diff --git a/packages/angular-material/src/layouts/categorization-layout.renderer.ts b/packages/angular-material/src/library/layouts/categorization-layout.renderer.ts
similarity index 100%
rename from packages/angular-material/src/layouts/categorization-layout.renderer.ts
rename to packages/angular-material/src/library/layouts/categorization-layout.renderer.ts
diff --git a/packages/angular-material/src/layouts/group-layout.renderer.ts b/packages/angular-material/src/library/layouts/group-layout.renderer.ts
similarity index 100%
rename from packages/angular-material/src/layouts/group-layout.renderer.ts
rename to packages/angular-material/src/library/layouts/group-layout.renderer.ts
diff --git a/packages/angular-material/src/layouts/horizontal-layout.renderer.ts b/packages/angular-material/src/library/layouts/horizontal-layout.renderer.ts
similarity index 100%
rename from packages/angular-material/src/layouts/horizontal-layout.renderer.ts
rename to packages/angular-material/src/library/layouts/horizontal-layout.renderer.ts
diff --git a/packages/angular-material/src/layouts/index.ts b/packages/angular-material/src/library/layouts/index.ts
similarity index 100%
rename from packages/angular-material/src/layouts/index.ts
rename to packages/angular-material/src/library/layouts/index.ts
diff --git a/packages/angular-material/src/layouts/layout.renderer.ts b/packages/angular-material/src/library/layouts/layout.renderer.ts
similarity index 100%
rename from packages/angular-material/src/layouts/layout.renderer.ts
rename to packages/angular-material/src/library/layouts/layout.renderer.ts
diff --git a/packages/angular-material/src/layouts/vertical-layout.renderer.ts b/packages/angular-material/src/library/layouts/vertical-layout.renderer.ts
similarity index 100%
rename from packages/angular-material/src/layouts/vertical-layout.renderer.ts
rename to packages/angular-material/src/library/layouts/vertical-layout.renderer.ts
diff --git a/packages/angular-material/src/module.ts b/packages/angular-material/src/library/module.ts
similarity index 100%
rename from packages/angular-material/src/module.ts
rename to packages/angular-material/src/library/module.ts
diff --git a/packages/angular-material/src/other/index.ts b/packages/angular-material/src/library/other/index.ts
similarity index 100%
rename from packages/angular-material/src/other/index.ts
rename to packages/angular-material/src/library/other/index.ts
diff --git a/packages/angular-material/src/other/label.renderer.ts b/packages/angular-material/src/library/other/label.renderer.ts
similarity index 100%
rename from packages/angular-material/src/other/label.renderer.ts
rename to packages/angular-material/src/library/other/label.renderer.ts
diff --git a/packages/angular-material/src/other/master-detail/detail.ts b/packages/angular-material/src/library/other/master-detail/detail.ts
similarity index 100%
rename from packages/angular-material/src/other/master-detail/detail.ts
rename to packages/angular-material/src/library/other/master-detail/detail.ts
diff --git a/packages/angular-material/src/other/master-detail/index.ts b/packages/angular-material/src/library/other/master-detail/index.ts
similarity index 100%
rename from packages/angular-material/src/other/master-detail/index.ts
rename to packages/angular-material/src/library/other/master-detail/index.ts
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/library/other/master-detail/master.ts
similarity index 100%
rename from packages/angular-material/src/other/master-detail/master.ts
rename to packages/angular-material/src/library/other/master-detail/master.ts
diff --git a/packages/angular-material/src/other/object.renderer.ts b/packages/angular-material/src/library/other/object.renderer.ts
similarity index 100%
rename from packages/angular-material/src/other/object.renderer.ts
rename to packages/angular-material/src/library/other/object.renderer.ts
diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/library/other/table.renderer.ts
similarity index 100%
rename from packages/angular-material/src/other/table.renderer.ts
rename to packages/angular-material/src/library/other/table.renderer.ts
diff --git a/packages/angular-material/src/other/util.ts b/packages/angular-material/src/library/other/util.ts
similarity index 100%
rename from packages/angular-material/src/other/util.ts
rename to packages/angular-material/src/library/other/util.ts
diff --git a/packages/angular-material/src/public_api.ts b/packages/angular-material/src/public_api.ts
new file mode 100644
index 0000000000..4b02e6973f
--- /dev/null
+++ b/packages/angular-material/src/public_api.ts
@@ -0,0 +1 @@
+export * from './library';
diff --git a/packages/angular-material/test-runner.js b/packages/angular-material/test-runner.js
index b3f3456468..26591cde8a 100644
--- a/packages/angular-material/test-runner.js
+++ b/packages/angular-material/test-runner.js
@@ -47,7 +47,7 @@ const karmaConfigOptionsTransform = (options, context, karmaConfigOptions) => {
   */
   return karmaConfigOptions;
 };
- const main = async (params) => new Promise((resolve, reject) => {
+const main = async (params) => new Promise((resolve, reject) => {
   const singleRun = !!params.singleRun;
   const coverage = !!params.coverage;
   const project = 'angular-material';
@@ -65,7 +65,7 @@ const karmaConfigOptionsTransform = (options, context, karmaConfigOptions) => {
     ],
     tsConfig: 'packages/angular-material/tsconfig.spec.json',
     karmaConfig: 'packages/angular-material/karma.conf.js'
-  }
+  };
   const root = `packages/${project}`;
   const sourceRoot = root + '/src';
   const teardownLogics = [];
diff --git a/packages/angular-material/test/group-layout.spec.ts b/packages/angular-material/test/group-layout.spec.ts
index f112bb8c4c..ab41a05b75 100644
--- a/packages/angular-material/test/group-layout.spec.ts
+++ b/packages/angular-material/test/group-layout.spec.ts
@@ -28,11 +28,11 @@ import { MatCard, MatCardTitle } from '@angular/material/card';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
 import { beforeEachLayoutTest, setupMockStore } from '@jsonforms/angular-test';
-import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
+import { LayoutChildrenRenderPropsPipe } from '../src/library/layouts/layout.renderer';
 import {
   GroupLayoutRenderer,
   groupLayoutTester,
-} from '../src/layouts/group-layout.renderer';
+} from '../src/library/layouts/group-layout.renderer';
 
 describe('Group layout tester', () => {
   it('should succeed', () => {
diff --git a/packages/angular-material/test/horizontal-layout.spec.ts b/packages/angular-material/test/horizontal-layout.spec.ts
index 0c42b918d7..0f374342ae 100644
--- a/packages/angular-material/test/horizontal-layout.spec.ts
+++ b/packages/angular-material/test/horizontal-layout.spec.ts
@@ -28,8 +28,8 @@ import { beforeEachLayoutTest, setupMockStore } from '@jsonforms/angular-test';
 import {
   HorizontalLayoutRenderer,
   horizontalLayoutTester,
-} from '../src/layouts/horizontal-layout.renderer';
-import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
+} from '../src/library/layouts/horizontal-layout.renderer';
+import { LayoutChildrenRenderPropsPipe } from '../src/library/layouts/layout.renderer';
 
 describe('Horizontal layout tester', () => {
   it('should succeed', () => {
diff --git a/packages/angular-material/test/label-renderer.spec.ts b/packages/angular-material/test/label-renderer.spec.ts
index c7c2646078..fb04f4765b 100644
--- a/packages/angular-material/test/label-renderer.spec.ts
+++ b/packages/angular-material/test/label-renderer.spec.ts
@@ -26,7 +26,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { JsonSchema, LabelElement } from '@jsonforms/core';
 
-import { LabelRenderer, LabelRendererTester } from '../src/other';
+import { LabelRenderer, LabelRendererTester } from '../src/library/other';
 import { setupMockStore } from '@jsonforms/angular-test';
 import { JsonFormsAngularService } from '@jsonforms/angular';
 
diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
index 0d72f4de66..959f908bf3 100644
--- a/packages/angular-material/test/master-detail.spec.ts
+++ b/packages/angular-material/test/master-detail.spec.ts
@@ -35,8 +35,8 @@ import {
   UnknownRenderer,
 } from '@jsonforms/angular';
 import { DebugElement } from '@angular/core';
-import { MasterListComponent } from '../src/other/master-detail/master';
-import { JsonFormsDetailComponent } from '../src/other/master-detail/detail';
+import { MasterListComponent } from '../src/library/other/master-detail/master';
+import { JsonFormsDetailComponent } from '../src/library/other/master-detail/detail';
 import { getJsonFormsService, setupMockStore } from '@jsonforms/angular-test';
 import { Actions } from '@jsonforms/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
diff --git a/packages/angular-material/test/object-control.spec.ts b/packages/angular-material/test/object-control.spec.ts
index a353ccdcf7..22246a2956 100644
--- a/packages/angular-material/test/object-control.spec.ts
+++ b/packages/angular-material/test/object-control.spec.ts
@@ -42,9 +42,9 @@ import {
 import {
   ObjectControlRenderer,
   ObjectControlRendererTester,
-} from '../src/other/object.renderer';
+} from '../src/library/other/object.renderer';
 import { getJsonFormsService } from '@jsonforms/angular-test';
-import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
+import { LayoutChildrenRenderPropsPipe } from '../src/library/layouts/layout.renderer';
 
 const uischema1: ControlElement = { type: 'Control', scope: '#' };
 const uischema2: ControlElement = {
diff --git a/packages/angular-material/test/table-control.spec.ts b/packages/angular-material/test/table-control.spec.ts
index 7e6dad9f07..b350bdf1cd 100644
--- a/packages/angular-material/test/table-control.spec.ts
+++ b/packages/angular-material/test/table-control.spec.ts
@@ -37,7 +37,7 @@ import { TextControlRenderer, TextControlRendererTester } from '../src';
 import {
   TableRenderer,
   TableRendererTester,
-} from '../src/other/table.renderer';
+} from '../src/library/other/table.renderer';
 import { setupMockStore } from '@jsonforms/angular-test';
 import { createTesterContext } from './util';
 import { MatTooltipModule } from '@angular/material/tooltip';
diff --git a/packages/angular-material/test/tsconfig.test.json b/packages/angular-material/test/tsconfig.test.json
deleted file mode 100644
index 8b6cff6dc8..0000000000
--- a/packages/angular-material/test/tsconfig.test.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "../dist/test",
-    "target": "es6",
-    "inlineSourceMap": true
-  },
-  "include": ["**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"],
-  "files": ["../src/index.ts"]
-}
diff --git a/packages/angular-material/test/vertical-layout.spec.ts b/packages/angular-material/test/vertical-layout.spec.ts
index 2f65d8da46..76306a3da3 100644
--- a/packages/angular-material/test/vertical-layout.spec.ts
+++ b/packages/angular-material/test/vertical-layout.spec.ts
@@ -28,8 +28,8 @@ import { beforeEachLayoutTest, setupMockStore } from '@jsonforms/angular-test';
 import {
   VerticalLayoutRenderer,
   verticalLayoutTester,
-} from '../src/layouts/vertical-layout.renderer';
-import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
+} from '../src/library/layouts/vertical-layout.renderer';
+import { LayoutChildrenRenderPropsPipe } from '../src/library/layouts/layout.renderer';
 
 describe('Vertical layout tester', () => {
   it('should succeed', () => {
diff --git a/packages/angular-material/tsconfig.cjs.json b/packages/angular-material/tsconfig.cjs.json
deleted file mode 100644
index b0c215c3d9..0000000000
--- a/packages/angular-material/tsconfig.cjs.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "./tsconfig",
-  "compilerOptions": {
-    "outDir": "./lib/cjs",
-    "sourceMap": true,
-    "target": "es5",
-    "module": "commonjs"
-  }
-}
diff --git a/packages/angular-material/tsconfig.example.json b/packages/angular-material/tsconfig.example.json
index 54b06f1013..46c487ea84 100644
--- a/packages/angular-material/tsconfig.example.json
+++ b/packages/angular-material/tsconfig.example.json
@@ -1,16 +1,13 @@
 {
-  "extends": "../../tsconfig.base",
+  "extends": "./tsconfig",
   "compilerOptions": {
-    "outDir": "./example/dist",
-    "sourceMap": true,
-    "target": "es5"
+    "outDir": "./example/dist"
   },
-  "exclude": ["node_modules"],
   "files": ["./example/main.ts"],
   "angularCompilerOptions": {
-    "compilationMode": "partial",
+    "compilationMode": "full",
     "strictMetadataEmit": true,
-    "generateCodeForLibraries": true,
-    "skipTemplateCodegen": true,
+    "generateCodeForLibraries": false,
+    "skipTemplateCodegen": true
   }
 }
diff --git a/packages/angular-material/tsconfig.json b/packages/angular-material/tsconfig.json
index 08fc97a76c..64692753aa 100644
--- a/packages/angular-material/tsconfig.json
+++ b/packages/angular-material/tsconfig.json
@@ -1,12 +1,13 @@
 {
   "extends": "../../tsconfig.base",
   "compilerOptions": {
-    "outDir": "./lib/esm",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
     "sourceMap": true,
-    "target": "es5"
   },
   "exclude": ["node_modules"],
-  "files": ["./src/index.ts"],
+  "files": ["src/index.ts"],
   "angularCompilerOptions": {
     "compilationMode": "partial",
     "strictMetadataEmit": true,
diff --git a/packages/angular-test/build-package.js b/packages/angular-test/build-package.js
new file mode 100644
index 0000000000..aef214d1a9
--- /dev/null
+++ b/packages/angular-test/build-package.js
@@ -0,0 +1,11 @@
+const ngPackage = require('ng-packagr');
+
+ngPackage
+  .ngPackagr()
+  .forProject('ng-package.json')
+  .withTsConfig('tsconfig.json')
+  .build()
+  .catch(error => {
+    console.error(error);
+    process.exit(1);
+  });
\ No newline at end of file
diff --git a/packages/angular-test/ng-package.json b/packages/angular-test/ng-package.json
new file mode 100644
index 0000000000..0ce52f72cc
--- /dev/null
+++ b/packages/angular-test/ng-package.json
@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./lib",
+  "allowedNonPeerDependencies": [
+    "@jsonforms/angular",
+    "@jsonforms/core"
+  ]
+}
\ No newline at end of file
diff --git a/packages/angular-test/package.json b/packages/angular-test/package.json
index a756b0643a..4553647f28 100644
--- a/packages/angular-test/package.json
+++ b/packages/angular-test/package.json
@@ -2,7 +2,8 @@
   "name": "@jsonforms/angular-test",
   "version": "3.2.0-beta.0",
   "private": true,
-  "main": "./lib/index.js",
+  "module": "./lib/fesm2022/jsonforms-angular-test.mjs",
+  "typings": "./lib/index.d.ts",
   "dependencies": {
     "@jsonforms/angular": "workspace:*",
     "@jsonforms/core": "workspace:*"
@@ -37,7 +38,7 @@
     "typescript": "~4.9.5"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "node ./build-package.js",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "echo 'Nothing to do'"
diff --git a/packages/angular-test/src/index.ts b/packages/angular-test/src/index.ts
index 5739d05f88..4aaf8f92ed 100644
--- a/packages/angular-test/src/index.ts
+++ b/packages/angular-test/src/index.ts
@@ -1,30 +1 @@
-/*
-  The MIT License
-  
-  Copyright (c) 2017-2019 EclipseSource Munich
-  https://github.com/eclipsesource/jsonforms
-  
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-  
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-  
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  THE SOFTWARE.
-*/
-export * from './boolean';
-export * from './text';
-export * from './number';
-export * from './range';
-export * from './util';
-export * from './layout';
+export * from './public_api';
diff --git a/packages/angular-test/src/boolean.ts b/packages/angular-test/src/library/boolean.ts
similarity index 100%
rename from packages/angular-test/src/boolean.ts
rename to packages/angular-test/src/library/boolean.ts
diff --git a/packages/angular-test/src/library/index.ts b/packages/angular-test/src/library/index.ts
new file mode 100644
index 0000000000..5739d05f88
--- /dev/null
+++ b/packages/angular-test/src/library/index.ts
@@ -0,0 +1,30 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+export * from './boolean';
+export * from './text';
+export * from './number';
+export * from './range';
+export * from './util';
+export * from './layout';
diff --git a/packages/angular-test/src/layout.ts b/packages/angular-test/src/library/layout.ts
similarity index 100%
rename from packages/angular-test/src/layout.ts
rename to packages/angular-test/src/library/layout.ts
diff --git a/packages/angular-test/src/number.ts b/packages/angular-test/src/library/number.ts
similarity index 100%
rename from packages/angular-test/src/number.ts
rename to packages/angular-test/src/library/number.ts
diff --git a/packages/angular-test/src/range.ts b/packages/angular-test/src/library/range.ts
similarity index 100%
rename from packages/angular-test/src/range.ts
rename to packages/angular-test/src/library/range.ts
diff --git a/packages/angular-test/src/text.ts b/packages/angular-test/src/library/text.ts
similarity index 100%
rename from packages/angular-test/src/text.ts
rename to packages/angular-test/src/library/text.ts
diff --git a/packages/angular-test/src/util.ts b/packages/angular-test/src/library/util.ts
similarity index 100%
rename from packages/angular-test/src/util.ts
rename to packages/angular-test/src/library/util.ts
diff --git a/packages/angular-test/src/public_api.ts b/packages/angular-test/src/public_api.ts
new file mode 100644
index 0000000000..4b02e6973f
--- /dev/null
+++ b/packages/angular-test/src/public_api.ts
@@ -0,0 +1 @@
+export * from './library';
diff --git a/packages/angular-test/tsconfig.json b/packages/angular-test/tsconfig.json
index 9af7ef8c91..64692753aa 100644
--- a/packages/angular-test/tsconfig.json
+++ b/packages/angular-test/tsconfig.json
@@ -1,9 +1,17 @@
 {
   "extends": "../../tsconfig.base",
   "compilerOptions": {
-    "outDir": "./lib",
-    "sourceMap": true
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "sourceMap": true,
   },
   "exclude": ["node_modules"],
-  "files": ["./src/index.ts"]
+  "files": ["src/index.ts"],
+  "angularCompilerOptions": {
+    "compilationMode": "partial",
+    "strictMetadataEmit": true,
+    "generateCodeForLibraries": false,
+    "skipTemplateCodegen": true
+  }
 }
diff --git a/packages/angular/build-package.js b/packages/angular/build-package.js
new file mode 100644
index 0000000000..aef214d1a9
--- /dev/null
+++ b/packages/angular/build-package.js
@@ -0,0 +1,11 @@
+const ngPackage = require('ng-packagr');
+
+ngPackage
+  .ngPackagr()
+  .forProject('ng-package.json')
+  .withTsConfig('tsconfig.json')
+  .build()
+  .catch(error => {
+    console.error(error);
+    process.exit(1);
+  });
\ No newline at end of file
diff --git a/packages/angular/ng-package.json b/packages/angular/ng-package.json
new file mode 100644
index 0000000000..84439008d2
--- /dev/null
+++ b/packages/angular/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./lib",
+  "allowedNonPeerDependencies": ["lodash"]
+}
\ No newline at end of file
diff --git a/packages/angular/package.json b/packages/angular/package.json
index b2b9af4fd7..55a570833b 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -33,11 +33,10 @@
     "layout",
     "customization"
   ],
-  "main": "./lib/cjs/index.js",
-  "module": "./lib/esm/index.js",
-  "typings": "./lib/esm/index.d.ts",
+  "module": "./lib/fesm2022/jsonforms-angular.mjs",
+  "typings": "./lib/index.d.ts",
   "scripts": {
-    "build": "ngc && ngc -p tsconfig.cjs.json",
+    "build": "node ./build-package.js",
     "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index c68de6b6b5..4aaf8f92ed 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -1,33 +1 @@
-/*
-  The MIT License
-  
-  Copyright (c) 2017-2020 EclipseSource Munich
-  https://github.com/eclipsesource/jsonforms
-  
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-  
-  The above copyright notice and this permission notice shall be included in
-  all copies or substantial portions of the Software.
-  
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-  THE SOFTWARE.
-*/
-export * from './base.renderer';
-export * from './control';
-export * from './array-control';
-export * from './jsonforms.component';
-export * from './jsonforms.module';
-export * from './unknown.component';
-export * from './jsonforms.service';
-export * from './jsonforms-root.component';
-export * from './abstract-control';
+export * from './public_api';
diff --git a/packages/angular/src/abstract-control.ts b/packages/angular/src/library/abstract-control.ts
similarity index 100%
rename from packages/angular/src/abstract-control.ts
rename to packages/angular/src/library/abstract-control.ts
diff --git a/packages/angular/src/array-control.ts b/packages/angular/src/library/array-control.ts
similarity index 100%
rename from packages/angular/src/array-control.ts
rename to packages/angular/src/library/array-control.ts
diff --git a/packages/angular/src/base.renderer.ts b/packages/angular/src/library/base.renderer.ts
similarity index 100%
rename from packages/angular/src/base.renderer.ts
rename to packages/angular/src/library/base.renderer.ts
diff --git a/packages/angular/src/control.ts b/packages/angular/src/library/control.ts
similarity index 100%
rename from packages/angular/src/control.ts
rename to packages/angular/src/library/control.ts
diff --git a/packages/angular/src/library/index.ts b/packages/angular/src/library/index.ts
new file mode 100644
index 0000000000..c68de6b6b5
--- /dev/null
+++ b/packages/angular/src/library/index.ts
@@ -0,0 +1,33 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2020 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+export * from './base.renderer';
+export * from './control';
+export * from './array-control';
+export * from './jsonforms.component';
+export * from './jsonforms.module';
+export * from './unknown.component';
+export * from './jsonforms.service';
+export * from './jsonforms-root.component';
+export * from './abstract-control';
diff --git a/packages/angular/src/jsonforms-root.component.ts b/packages/angular/src/library/jsonforms-root.component.ts
similarity index 100%
rename from packages/angular/src/jsonforms-root.component.ts
rename to packages/angular/src/library/jsonforms-root.component.ts
diff --git a/packages/angular/src/jsonforms.component.ts b/packages/angular/src/library/jsonforms.component.ts
similarity index 100%
rename from packages/angular/src/jsonforms.component.ts
rename to packages/angular/src/library/jsonforms.component.ts
diff --git a/packages/angular/src/jsonforms.module.ts b/packages/angular/src/library/jsonforms.module.ts
similarity index 100%
rename from packages/angular/src/jsonforms.module.ts
rename to packages/angular/src/library/jsonforms.module.ts
diff --git a/packages/angular/src/jsonforms.service.ts b/packages/angular/src/library/jsonforms.service.ts
similarity index 100%
rename from packages/angular/src/jsonforms.service.ts
rename to packages/angular/src/library/jsonforms.service.ts
diff --git a/packages/angular/src/unknown.component.ts b/packages/angular/src/library/unknown.component.ts
similarity index 100%
rename from packages/angular/src/unknown.component.ts
rename to packages/angular/src/library/unknown.component.ts
diff --git a/packages/angular/src/public_api.ts b/packages/angular/src/public_api.ts
new file mode 100644
index 0000000000..4b02e6973f
--- /dev/null
+++ b/packages/angular/src/public_api.ts
@@ -0,0 +1 @@
+export * from './library';
diff --git a/packages/angular/tsconfig.json b/packages/angular/tsconfig.json
index 08fc97a76c..64692753aa 100644
--- a/packages/angular/tsconfig.json
+++ b/packages/angular/tsconfig.json
@@ -1,12 +1,13 @@
 {
   "extends": "../../tsconfig.base",
   "compilerOptions": {
-    "outDir": "./lib/esm",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
     "sourceMap": true,
-    "target": "es5"
   },
   "exclude": ["node_modules"],
-  "files": ["./src/index.ts"],
+  "files": ["src/index.ts"],
   "angularCompilerOptions": {
     "compilationMode": "partial",
     "strictMetadataEmit": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2f4a760760..1cf2dbf326 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ overrides:
 importers:
   .:
     devDependencies:
+      '@angular/core':
+        specifier: ^16.0.0
+        version: 16.2.12(rxjs@6.6.7)(zone.js@0.13.3)
       '@babel/plugin-proposal-nullish-coalescing-operator':
         specifier: ^7.16.5
         version: 7.18.6(@babel/core@7.23.7)
@@ -190,6 +193,9 @@ importers:
       '@angular-devkit/build-angular':
         specifier: ^16.0.0
         version: 16.2.11(@angular/compiler-cli@16.2.12)(@types/node@18.19.4)(karma@6.4.2)(ng-packagr@16.2.3)(protractor@7.0.0)(typescript@4.9.5)
+      '@angular-devkit/core':
+        specifier: ^16.0.0
+        version: 16.2.11(chokidar@3.5.3)
       '@angular-eslint/eslint-plugin':
         specifier: ^16.0.0
         version: 16.3.1(eslint@7.32.0)(typescript@4.9.5)
@@ -256,18 +262,6 @@ importers:
       '@ngtools/webpack':
         specifier: ^16.0.0
         version: 16.2.11(@angular/compiler-cli@16.2.12)(typescript@4.9.5)(webpack@5.89.0)
-      '@rollup/plugin-commonjs':
-        specifier: ^23.0.3
-        version: 23.0.7(rollup@3.29.4)
-      '@rollup/plugin-json':
-        specifier: ^6.0.0
-        version: 6.1.0(rollup@3.29.4)
-      '@rollup/plugin-node-resolve':
-        specifier: ^15.0.1
-        version: 15.2.3(rollup@3.29.4)
-      '@rollup/plugin-replace':
-        specifier: ^5.0.1
-        version: 5.0.5(rollup@3.29.4)
       '@types/jasmine':
         specifier: ~3.8.0
         version: 3.8.2
@@ -352,18 +346,6 @@ importers:
       rimraf:
         specifier: ^3.0.2
         version: 3.0.2
-      rollup:
-        specifier: ^3.0.0
-        version: 3.29.4
-      rollup-plugin-copy:
-        specifier: ^3.4.0
-        version: 3.5.0
-      rollup-plugin-import-css:
-        specifier: ^3.3.1
-        version: 3.3.5(rollup@3.29.4)
-      rollup-plugin-typescript2:
-        specifier: ^0.34.1
-        version: 0.34.1(rollup@3.29.4)(typescript@4.9.5)
       rxjs:
         specifier: ^6.6.0
         version: 6.6.7
@@ -8746,27 +8728,6 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/plugin-commonjs@23.0.7(rollup@3.29.4):
-    resolution:
-      {
-        integrity: sha512-hsSD5Qzyuat/swzrExGG5l7EuIlPhwTsT7KwKbSCQzIcJWjRxiimi/0tyMYY2bByitNb3i1p+6JWEDGa0NvT0Q==,
-      }
-    engines: { node: '>=14.0.0' }
-    peerDependencies:
-      rollup: ^2.68.0||^3.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
-      commondir: 1.0.1
-      estree-walker: 2.0.2
-      glob: 8.1.0
-      is-reference: 1.2.1
-      magic-string: 0.27.0
-      rollup: 3.29.4
-    dev: true
-
   /@rollup/plugin-json@5.0.2(rollup@2.79.1):
     resolution:
       {
@@ -8858,23 +8819,6 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /@rollup/plugin-replace@5.0.5(rollup@3.29.4):
-    resolution:
-      {
-        integrity: sha512-rYO4fOi8lMaTg/z5Jb+hKnrHHVn8j2lwkqwyS4kTRhKyWOLf2wST2sWXr4WzWiTcoHTp2sTjqUbqIj2E39slKQ==,
-      }
-    engines: { node: '>=14.0.0' }
-    peerDependencies:
-      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
-    peerDependenciesMeta:
-      rollup:
-        optional: true
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
-      magic-string: 0.30.5
-      rollup: 3.29.4
-    dev: true
-
   /@rollup/pluginutils@4.2.1:
     resolution:
       {
@@ -30679,19 +30623,6 @@ packages:
       rollup: 2.79.1
     dev: true
 
-  /rollup-plugin-import-css@3.3.5(rollup@3.29.4):
-    resolution:
-      {
-        integrity: sha512-wSfzveEzvUDlVevo70kmVD5Mk785UN55NG4C7VVnrmdE0qZ8apcVVFajyCPfFYSNxq5YkccOcrGUT2T/2HnEcQ==,
-      }
-    engines: { node: '>=16' }
-    peerDependencies:
-      rollup: ^2.x.x || ^3.x.x || ^4.x.x
-    dependencies:
-      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
-      rollup: 3.29.4
-    dev: true
-
   /rollup-plugin-typescript2@0.34.1(rollup@2.79.1)(typescript@4.2.3):
     resolution:
       {
@@ -30710,24 +30641,6 @@ packages:
       typescript: 4.2.3
     dev: true
 
-  /rollup-plugin-typescript2@0.34.1(rollup@3.29.4)(typescript@4.9.5):
-    resolution:
-      {
-        integrity: sha512-P4cHLtGikESmqi1CA+tdMDUv8WbQV48mzPYt77TSTOPJpERyZ9TXdDgjSDix8Fkqce6soYz3+fa4lrC93IEkcw==,
-      }
-    peerDependencies:
-      rollup: '>=1.26.3'
-      typescript: '>=2.4.0'
-    dependencies:
-      '@rollup/pluginutils': 4.2.1
-      find-cache-dir: 3.3.2
-      fs-extra: 10.1.0
-      rollup: 3.29.4
-      semver: 7.5.4
-      tslib: 2.6.2
-      typescript: 4.9.5
-    dev: true
-
   /rollup-plugin-visualizer@5.12.0(rollup@2.79.1):
     resolution:
       {