Merge pull request #258 from ReadAlongs/dev.angular-migration-rebased

Migrate to Angular 17 / Nx 18

.eslintrc.json

@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -23,12 +23,12 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {}
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {

.github/workflows/end-to-end-tests.yml

@@ -8,10 +8,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Install everything
         run: npm install
       - name: Ng test for studio-web

.github/workflows/preview.yml

@@ -12,10 +12,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
       - name: Install
         run: |
           # The default config is for the monorepo, while this is for standalone

.github/workflows/publish.yml

@@ -10,10 +10,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Use Node.js 18
+      - name: Use Node.js 20
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
       - name: Install
         run: |
           # The default config is for the monorepo, while this is for standalone

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: "https://registry.npmjs.org"
           scope: "@readalongs"
       - run: npm install
@@ -32,6 +32,10 @@ jobs:
       - run: cd ./packages/web-component && npm version patch
       - run: cd ./packages/ngx-web-component && npm version patch
       - run: npx nx build web-component && npx nx bundle web-component && npx nx build ngx-web-component
+        # We have to do this now because nx is broken (see https://github.com/nrwl/nx/issues/19989)
+      - run: |
+          export VERSION=$(npm view node_modules/@readalongs/web-component version)
+          perl -i -lne 'if (/peerDependencies/) {print; print "\"\@readalongs/web-component\": \"'$VERSION'\","} else { print }' dist/packages/ngx-web-component/package.json
       - run: |
           cd dist/packages/web-component && npm publish --access=public
         env:
@@ -43,7 +47,7 @@ jobs:
       - name: Determine tag
         id: determine_tag
         run: |
-          echo "TAG_VERSION=$(npm view @readalongs/web-component version)" >> $GITHUB_OUTPUT
+          echo "TAG_VERSION=$(npm view node_modules/@readalongs/web-component version)" >> $GITHUB_OUTPUT
       - name: Bump version and push tag
         id: tag_version
         uses: mathieudutour/[email protected]

.gitignore

@@ -5,4 +5,5 @@ packages/ngx-web-component/**/generated
 dist
 www
 .nx
-.python-version
+.python-version
+*~

.prettierignore

@@ -12,3 +12,5 @@ node_modules/
 .angular/
 www/
 packages/ngx-web-component/**/generated
+
+/.nx/cache

README.md

@@ -146,7 +146,7 @@ tcp 3333`):
 
     npx nx serve web-component
 
-Make sure this command is serving the test data on port 5000:
+Make sure this command is serving the test data on port 8941:
 
     npx nx serve-test-data web-component
 
@@ -193,7 +193,19 @@ The publication of the web component and its angular wrapper has been automated
 
 WARNING: only use this process if the release workflow is broken.
 
-To publish the web component, first you must belong to the [@readalongs organization](https://www.npmjs.com/org/readalongs) on NPM. Then, bump the version number in both `packages/web-component/package.json` and `packages/ngx-web-component/package.json`, run `npm install` to reflect that bump in `package-lock.json`, and build both the web component and angular wrapper:
+To publish the web component, first you must belong to the
+[@readalongs organization](https://www.npmjs.com/org/readalongs) on
+NPM. Then, bump the version number in both
+`packages/web-component/package.json` and
+`packages/ngx-web-component/package.json` (note that Nx now
+unfortunately no longer manages dependencies among projects properly,
+so you must also update the version in `peerDependencies` for
+`@readalongs/web-component` in
+`packages/ngx-web-component/package.json` - if you find this to be
+less than useful feel free to add your voice to [this bug
+report](https://github.com/nrwl/nx/issues/19989)), run `npm install`
+to reflect that bump in `package-lock.json`, and build both the web
+component and angular wrapper:
 
     npx nx build web-component
     npx nx build ngx-web-component

jest.config.ts

@@ -1,4 +1,4 @@
-import { getJestProjects } from "@nrwl/jest";
+import { getJestProjects } from "@nx/jest";
 
 export default {
   projects: getJestProjects(),

jest.preset.js

@@ -1,3 +1,3 @@
-const nxPreset = require("@nrwl/jest/preset").default;
+const nxPreset = require("@nx/jest/preset").default;
 
 module.exports = { ...nxPreset };

nx.json

@@ -1,25 +1,17 @@
 {
-  "tasksRunnerOptions": {
-    "default": {
-      "runner": "nx/tasks-runners/default",
-      "options": {
-        "cacheableOperations": []
-      }
-    }
-  },
   "defaultBase": "main",
   "generators": {
-    "@nrwl/angular:application": {
+    "@nx/angular:application": {
       "style": "css",
       "linter": "eslint",
       "unitTestRunner": "jest",
       "e2eTestRunner": "none"
     },
-    "@nrwl/angular:library": {
+    "@nx/angular:library": {
       "linter": "eslint",
       "unitTestRunner": "jest"
     },
-    "@nrwl/angular:component": {
+    "@nx/angular:component": {
       "style": "css"
     }
   },
@@ -30,5 +22,6 @@
     "lint": {
       "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
     }
-  }
+  },
+  "useInferencePlugins": false
 }