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>

Author: JBBianchi

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",

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);
+});

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);
+  });

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 = {

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],

packages/angular-material/example/index.bundled.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>
 
 <!-- 

packages/angular-material/example/index.html

@@ -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';

packages/angular-material/example/main.ts

@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "./lib",
+  "allowedNonPeerDependencies": [
+    "@jsonforms/angular",
+    "@jsonforms/core",
+    "hammerjs", 
+    "lodash"
+  ]
+}

packages/angular-material/ng-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",