feat!: upgrade to nx 19.1 and angular 18 (#209)

## PR Checklist Please check if your PR fulfills the following requirements: - [x] The commit message follows our guidelines: CONTRIBUTING.md#commit - [ ] Tests for the changes have been added (for bug fixes / features) - [x] Docs have been added / updated (for bug fixes / features) ## PR Type What kind of change does this PR introduce?  ``` [ ] Bugfix [x] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [x] Build related changes [ ] CI related changes [x] Documentation content changes [ ] Other... Please describe: ``` ## What is the current behavior? We are supporting the previous version of Angular (17) ## What is the new behavior? - We support the latest version of Angular (18) - We have migrated to the latest version of Nx (19.1) ## Does this PR introduce a breaking change? ``` [x] Yes [ ] No ``` We increased the major version of the compatibility to Angular 18.
ngworker · Jul 13, 2024 · e6bd458 · e6bd458
1 parent 5c8cb54
commit e6bd458
Show file tree

Hide file tree

Showing 30 changed files with 24,479 additions and 18,059 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -46,7 +46,10 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
@@ -57,7 +60,10 @@
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
     },
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],

diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -29,18 +29,17 @@ runs:
       id: node_version
       shell: bash
       run: echo "node_version=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 9
+
     - name: Use Node.js
       uses: actions/setup-node@v4
       with:
-        cache: yarn
         node-version: ${{ steps.node_version.outputs.node_version }}
-        # This doesn't just set the registry url, but also sets
-        # the right configuration in .npmrc that reads NPM token
-        # from NPM_AUTH_TOKEN environment variable.
-        # It actually creates a .npmrc in a temporary folder
-        # and sets the NPM_CONFIG_USERCONFIG environment variable.
-        registry-url: https://registry.npmjs.org
+        cache: 'pnpm'
 
     - name: Install dependencies
       shell: bash
-      run: yarn install --immutable --immutable-cache
+      run: pnpm install
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -6,6 +6,10 @@ on:
       - main
   pull_request: {}
 
+permissions:
+  actions: read
+  contents: read
+
 concurrency:
   # Group concurrency on workflow, then:
   # - Is merge run? Group on branch name (`refs/heads/main`)
@@ -24,73 +28,80 @@ env:
   NODE_OPTIONS: --max-old-space-size=6144
 
 jobs:
-  # We're using Nx Cloud for Distributed Task Execution
-  # Reference: https://nx.dev/using-nx/dte
-  #
-  # The coordinator outputs the combination of task outputs from the agents,
-  # both terminal and file outputs
-  dte_coordinator:
-    name: DTE Coordinator
-    uses: nrwl/ci/.github/workflows/[email protected]
-    secrets:
-      NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-    permissions:
-      contents: read
-      actions: read
-    with:
-      main-branch-name: main
-      # Must match dte_agents.number-of-agents
-      number-of-agents: 4
-      # The --stop-agents-after parameter must match the task target listed last
-      # in the parallel-commands-on-agents command list
-      # The --agent-count parameter must match the number-of-agents parameter
-      init-commands: |
-        yarn nx-cloud start-ci-run --stop-agents-after="e2e" --agent-count=4
-      # Commands run in parallel on this DTE coordinator
-      parallel-commands: |
-        yarn nx-cloud record -- yarn nx format:check
-      # Commands distributed between DTE agents
-      # Distribution strategy for 2 vCPUs per hosted runner (GitHub Free):
-      # lint: 2 tasks assigned at a time, 1 task per vCPU
-      # test: 1 task assigned at a time with 2 parallel processes, 1 process per vCPU
-      # build: 2 tasks assigned at a time, 1 task per vCPU
-      # e2e: 1 task assigned at a time, 1 task total
-      parallel-commands-on-agents: |
-        yarn nx run-many --all --target=lint --configuration=report --parallel=2 --max-warnings=0
-        yarn nx run-many --all --target=test --configuration=coverage --parallel=1 --max-workers=2
-        yarn nx affected --target=build --parallel=2
-        yarn nx affected --target=e2e --parallel=1
-      # Commands run sequentially on this DTE coordinator after parallel jobs
-      # final-commands: |
-
-  # We're using Nx Cloud for Distributed Task Execution
-  # Reference: https://nx.dev/using-nx/dte
-  #
-  # Agents receive tasks to execute in bulk whenever they are ready or have
-  # finished their previous tasks
-  dte_agents:
-    name: DTE Agents
-    uses: nrwl/ci/.github/workflows/[email protected]
-    secrets:
-      NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-    permissions:
-      contents: read
-      actions: read
-    with:
-      # The Free GitHub plan has a limit of 20 concurrent jobs on Ubuntu images
-      # Reference: https://docs.github.com/en/actions/learn-github-actions/usage-limits-billing-and-administration
-      # If we need to, we can optimize for 2 simultaneous workflow runs:
-      # 2 x 1 main job   =  2 concurrent jobs
-      # 2 x 9 agent jobs = 18 concurrent jobs
-      # Total            = 20 concurrent jobs
-      #
-      # However, we don't have many projects or targets in this workspace, so we
-      # lower the number of agents to reduce spent compute time.
-      number-of-agents: 4
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      # Connect your workspace on nx.app and uncomment this to enable task distribution.
+      # The "--stop-agents-after" is optional, but allows idle agents to shut down once the "build" targets have been requested
+      # - run: npx nx-cloud start-ci-run --distribute-on="5 linux-medium-js" --stop-agents-after="build"
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9
+      # Cache node_modules
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - uses: nrwl/nx-set-shas@v4
+
+      # Restore the previous npm modules and Cypress binary archives.
+      # Any updated archives will be saved automatically after the entire
+      # workflow successfully finishes.
+      # See https://github.com/actions/cache
+      # we use exact restore key to avoid npm module snowballing
+      # https://glebbahmutov.com/blog/do-not-let-npm-cache-snowball/
+      - name: Cache central npm modules
+        uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ github.ref }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-${{ github.ref }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      # we use the exact restore key to avoid Cypress binary snowballing
+      # https://glebbahmutov.com/blog/do-not-let-cypress-cache-snowball/
+      - name: Cache Cypress binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: cypress-${{ runner.os }}-cypress-${{ github.ref }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            cypress-${{ runner.os }}-cypress-${{ github.ref }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      # Cache local node_modules to pass to testing jobs
+      - name: Cache local node_modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-modules-${{ github.ref }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-node-modules-${{ github.ref }}-
+
+      - name: install dependencies and verify Cypress
+        env:
+          # make sure every Cypress install prints minimal information
+          CI: 1
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm exec cypress cache path
+          pnpm exec cypress cache list
+          pnpm exec cypress verify
+          pnpm exec cypress info
+
+      - name: Run NX Commands
+        run: |
+          pnpm exec nx-cloud record -- nx format:check
+          pnpm exec nx affected -t lint test build
+          pnpm exec nx affected -t e2e-ci --parallel=1
 
   deploy-docs:
     name: '[Merge] Deploy docs to GitHub Pages'
-    needs: dte_coordinator
+    needs: main
     if: github.event_name == 'push' && github.ref_name == 'main'
     runs-on: ubuntu-latest
     permissions:
@@ -110,9 +121,9 @@ jobs:
         uses: ./.github/actions/setup
       # Uses the cache generated in the distributed step
       - name: Build docs
-        run: yarn nx build docs-lumberjack-docs-app
+        run: pnpm exec nx build docs-lumberjack-docs-app
       - name: Set up GitHub Pages
-        uses: actions/configure-pages@v4
+        uses: actions/nonfigure-pages@v4
       - name: Upload docs to GitHub Pages
         uses: actions/upload-pages-artifact@v3
         with:
@@ -123,7 +134,7 @@ jobs:
 
   sonarcloud:
     name: SonarCloud
-    needs: dte_coordinator
+    needs: main
     runs-on: ubuntu-latest
     permissions:
       id-token: write
@@ -138,13 +149,13 @@ jobs:
         uses: ./.github/actions/setup
       # Uses the cache generated in the distributed step (Needed for the sonar eslint reports).
       - name: Lint with reports
-        run: yarn nx run-many --all --target=lint --configuration=report --parallel=2 --max-warnings=0
+        run: pnpm exec nx run-many --all --target=lint --configuration=report --parallel=2 --max-warnings=0
         # Uses the cache generated in the distributed step (Needed for the sonar jest coverage reports).
       - name: Tests with coverage
-        run: yarn nx run-many --all --target=test --configuration=coverage --parallel=1 --max-workers=2
+        run: pnpm exec nx run-many --all --target=test --configuration=coverage --parallel=1 --max-workers=2
 
       - name: Configure Sonar report paths
-        run: yarn configure-sonar-report-paths
+        run: pnpm run configure-sonar-report-paths
 
       - name: SonarCloud Scan
         uses: sonarsource/[email protected]

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -46,7 +46,7 @@ jobs:
         # Generates the changelog commit and tags and pushes them to Github.
         # Use two post actions to Create a release in Github and for Publishing the package to NPM
         shell: bash
-        run: npx nx version ngworker-lumberjack --releaseAs=${{ github.event.inputs.release_as }}
+        run: pnpm exec nx version ngworker-lumberjack --releaseAs=${{ github.event.inputs.release_as }}
 
       # Needed if we want to automize multiple releases with the affected commands.
       - name: Tag last-release

diff --git a/.gitignore b/.gitignore
@@ -48,4 +48,6 @@ migrations.json
 .docusaurus/
 .cache-loader/
 
-.nx/cache
+.nx/cache
+.nx/workspace-data
+.angular
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.19.0
+20
diff --git a/.prettierignore b/.prettierignore
@@ -5,8 +5,12 @@
 /reports
 /.angular/
 .docusaurus/
+build
 
 # Generated files
 packages/**/CHANGELOG.md
 
-/.nx/cache
+/.nx/cache
+.angular
+
+/.nx/workspace-data
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -7,26 +7,26 @@
 Start by installing all dependencies:
 
 ```bash
-yarn
+pnpm install
 ```
 
 Run the tests:
 
 ```bash
-yarn test
-yarn e2e
+pnpm exec test
+pnpm exec e2e
 ```
 
 Run the playground app:
 
 ```bash
-yarn start
+pnpm exec start
 ```
 
 ## Building
 
 ```bash
-yarn build
+pnpm exec build
 ```
 
 ## <a name="rules"></a> Coding Rules

diff --git a/e2e/docs/lumberjack-docs-app-e2e/cypress.config.ts b/e2e/docs/lumberjack-docs-app-e2e/cypress.config.ts
@@ -3,6 +3,14 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
-    ...nxE2EPreset(__dirname),
+    ...nxE2EPreset(__filename, {
+      cypressDir: 'src',
+      webServerCommands: {
+        default: 'nx run docs-lumberjack-docs-app:serve:development',
+        production: 'nx run docs-lumberjack-docs-app:serve:production',
+      },
+      ciWebServerCommand: 'nx run docs-lumberjack-docs-app:start',
+    }),
+    baseUrl: 'http://localhost:3000',
   },
 });
diff --git a/e2e/docs/lumberjack-docs-app-e2e/project.json b/e2e/docs/lumberjack-docs-app-e2e/project.json
@@ -3,38 +3,7 @@
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "e2e/docs/lumberjack-docs-app-e2e/src",
   "projectType": "application",
-  "targets": {
-    "e2e": {
-      "executor": "@nx/cypress:cypress",
-      "dependsOn": [
-        {
-          "target": "build",
-          "dependencies": true
-        }
-      ],
-      "options": {
-        "cypressConfig": "e2e/docs/lumberjack-docs-app-e2e/cypress.config.ts",
-        "devServerTarget": "docs-lumberjack-docs-app:serve:development",
-        "testingType": "e2e"
-      },
-      "configurations": {
-        "production": {
-          "devServerTarget": "docs-lumberjack-docs-app:serve:production"
-        }
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
-      "configurations": {
-        "report": {
-          "format": "json",
-          "force": true,
-          "outputFile": "reports/e2e/docs/lumberjack-docs-app-e2e/lint/report.json"
-        }
-      }
-    }
-  },
-  "tags": [],
-  "implicitDependencies": ["docs-lumberjack-docs-app"]
+  "tags": ["scope:internal", "type:e2e"],
+  "implicitDependencies": ["docs-lumberjack-docs-app"],
+  "targets": {}
 }
diff --git a/e2e/examples/lumberjack-app-e2e/.eslintrc.json b/e2e/examples/lumberjack-app-e2e/.eslintrc.json
@@ -5,13 +5,6 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {}
-    },
-    {
-      "files": ["src/plugins/index.js"],
-      "rules": {
-        "@typescript-eslint/no-var-requires": "off",
-        "no-undef": "off"
-      }
     }
   ]
 }