build: migrate to Angular workspace (#557)

Author: timdeschryver

.gitignore

@@ -28,8 +28,6 @@
 # misc
 /.angular/cache
 .angular
-.nx
-migrations.json
 .cache
 /.sass-cache
 /connect.lock

angular.json

@@ -0,0 +1,194 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "analytics": false,
+    "cache": {
+      "enabled": true,
+      "path": "./.cache/angular",
+      "environment": "all"
+    }
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "testing-library": {
+      "projectType": "library",
+      "root": "projects/testing-library",
+      "sourceRoot": "projects/testing-library/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/testing-library/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/testing-library/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/testing-library/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-builders/jest:run",
+          "options": {
+            "configPath": "projects/testing-library/jest.config.ts"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["projects/testing-library/**/*.ts", "projects/testing-library/**/*.html"]
+          }
+        }
+      }
+    },
+    "example-app": {
+      "projectType": "application",
+      "root": "apps/example-app",
+      "sourceRoot": "apps/example-app/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/apps/example-app",
+            "index": "apps/example-app/src/index.html",
+            "main": "apps/example-app/src/main.ts",
+            "polyfills": "apps/example-app/src/polyfills.ts",
+            "tsConfig": "apps/example-app/tsconfig.app.json",
+            "assets": ["apps/example-app/src/favicon.ico", "apps/example-app/src/assets"],
+            "styles": ["apps/example-app/src/styles.css"],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "example-app:build:production"
+            },
+            "development": {
+              "buildTarget": "example-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "example-app:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-builders/jest:run",
+          "options": {
+            "configPath": "apps/example-app/jest.config.ts"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["apps/example-app/**/*.ts", "apps/example-app/**/*.html"]
+          }
+        }
+      }
+    },
+    "example-app-karma": {
+      "projectType": "application",
+      "root": "apps/example-app-karma",
+      "sourceRoot": "apps/example-app-karma/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/apps/example-app-karma",
+            "index": "apps/example-app-karma/src/index.html",
+            "main": "apps/example-app-karma/src/main.ts",
+            "tsConfig": "apps/example-app-karma/tsconfig.app.json",
+            "assets": ["apps/example-app-karma/src/favicon.ico", "apps/example-app-karma/src/assets"],
+            "styles": [],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "example-app-karma:build:production"
+            },
+            "development": {
+              "buildTarget": "example-app-karma:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "apps/example-app-karma/src/test.ts",
+            "tsConfig": "apps/example-app-karma/tsconfig.spec.json",
+            "karmaConfig": "apps/example-app-karma/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": ["apps/example-app-karma/**/*.ts", "apps/example-app-karma/**/*.html"]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "style": "scss",
+      "displayBlock": true,
+      "changeDetection": "OnPush"
+    }
+  }
+}

apps/example-app-karma/project.json

@@ -1,8 +1,29 @@
-export default {
+import type { Config } from 'jest';
+
+const config: Config = {
   displayName: {
     name: 'Example App',
     color: 'blue',
   },
-  preset: '../../jest.preset.js',
-  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  preset: 'jest-preset-angular',
+  setupFilesAfterEnv: ['<rootDir>/apps/example-app/src/test-setup.ts'],
+  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+  coverageDirectory: '<rootDir>/coverage/apps/example-app',
+  transform: {
+    '^.+\\.(ts|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/apps/example-app/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
 };
+
+export default config;

apps/example-app/jest.config.ts

@@ -1,4 +1 @@
-import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
 import '@testing-library/jest-dom';
-
-setupZoneTestEnv();

apps/example-app/project.json

@@ -1,5 +1,2 @@
-const { getJestProjectsAsync } = require('@nx/jest');
-
-export default async () => ({
-  projects: await getJestProjectsAsync(),
-});
+// Root jest configuration - not used directly, projects have their own configs
+export default {};