Migrate to Angular 20 and move away from nx

.github/copilot-instructions.md

@@ -0,0 +1,47 @@
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection

.github/workflows/actions/build-projects/action.yml

@@ -0,0 +1,30 @@
+name: Build Projects
+
+inputs:
+  version:
+    description: 'The version to build'
+    required: true
+
+runs:
+  using: 'composite'
+  steps:
+    - id: get-version
+      shell: bash
+      run: |
+        VERSION="${{ inputs.version }}"
+        echo "Building projects with version: $VERSION"
+
+        ROOT_DIR=$(pwd)
+        cd projects/angular-tofu
+
+        # Set the version in package.json files
+        npm version "$VERSION" --no-git-tag-version
+
+        cd "$ROOT_DIR"
+
+        echo "Building projects..."
+        npm run build angular-tofu
+        npm run build angular-tofu-showcase
+
+        echo "angular-tofu library version set to:"
+        cat ./dist/angular-tofu/package.json | jq '.version'

.github/workflows/actions/get-version-from-git/action.yml

@@ -15,20 +15,30 @@ runs:
         # Get latest tag
         latest_tag=$(git describe --tags --abbrev=0 2>/dev/null || echo "v0.0.0")
 
+        echo "latest_tag=${latest_tag}"
         # Remove 'v' prefix if present
         version=${latest_tag#v}
+        echo "version=${version}"
 
         IFS='.' read -r -a VERSION_PARTS <<< "$version"
         BUILD_RUN=${{ github.run_number }}
 
+        commitCountSinceTag=$(git rev-list --count ${latest_tag}..HEAD 2>/dev/null || echo 0)
+        echo "commitCountSinceTag=${commitCountSinceTag}"
+
         # Increment the patch version
-        if [ ${#VERSION_PARTS[@]} -eq 3 ]; then
-          version="${VERSION_PARTS[0]}.${VERSION_PARTS[1]}.${VERSION_PARTS[2]}.$BUILD_RUN"
+        if [ ${#VERSION_PARTS[@]} -eq 2 ]; then
+          version="${VERSION_PARTS[0]}.${VERSION_PARTS[1]}.${commitCountSinceTag}"
         else
           echo "Error: Invalid version format. Expected 'x.y.z'."
           exit 1
         fi
 
+        current_branch=$(git branch --show-current)
+        if [ "$current_branch" != "main" ]; then
+          version="${version}-prerelease"
+        fi
+
         echo "version=${version}"
 
         echo "version=${version}" >> $GITHUB_OUTPUT

.github/workflows/integration.yml

@@ -19,19 +19,23 @@ jobs:
           fetch-depth: 0
           fetch-tags: 'true'
 
-      # Cache node_modules
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: 'npm'
 
       - run: npm ci --legacy-peer-deps
-      #- run: npx playwright install --with-deps
-      - uses: nrwl/nx-set-shas@v4
-
-      # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud
-      # - run: npx nx-cloud record -- echo Hello World
-      # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected
-      # When you enable task distribution, run the e2e-ci task instead of e2e
-      - run: |
-          bash ./build.sh nxTargets
+
+      - uses: ./.github/workflows/actions/get-version-from-git
+        id: get-version
+
+      - name: Build projects
+        uses: ./.github/workflows/actions/build-projects
+        with:
+          version: ${{ steps.get-version.outputs.version }}
+
+      - name: Run unit tests (headless)
+        env:
+          CI: 'true'
+        run: |
+          npm run test -- --watch=false --browsers=ChromeHeadless --code-coverage

.github/workflows/main.yml

@@ -19,25 +19,24 @@ jobs:
           fetch-depth: 0
           fetch-tags: 'true'
 
-      # This enables task distribution via Nx Cloud
-      # Run this command as early as possible, before dependencies are installed
-      # Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun
-      # Uncomment this line to enable task distribution
-      # - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci"
-
-      # Cache node_modules
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: 'npm'
 
       - run: npm ci --legacy-peer-deps
-      - uses: nrwl/nx-set-shas@v4
 
-      - name: Publish to npm
-        if: github.ref == 'refs/heads/main' # Nur auf dem main-Branch
-        run: |
-          bash ./build.sh nxTargets
+      - uses: ./.github/workflows/actions/get-version-from-git
+        id: get-version
+
+      - name: Build projects
+        uses: ./.github/workflows/actions/build-projects
+        with:
+          version: ${{ steps.get-version.outputs.version }}
 
+      - name: Run unit tests (headless)
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # NPM-Token aus GitHub Secrets
+          CI: 'true'
+        run: |
+          npm run test -- --watch=false --browsers=ChromeHeadless --code-coverage
+

.github/workflows/release.yml

@@ -19,55 +19,32 @@ jobs:
           fetch-depth: 0
           fetch-tags: 'true'
 
-      # This enables task distribution via Nx Cloud
-      # Run this command as early as possible, before dependencies are installed
-      # Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun
-      # Uncomment this line to enable task distribution
-      # - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci"
-
-      # Cache node_modules
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: 'npm'
           registry-url: https://registry.npmjs.org/
 
       - run: npm ci --legacy-peer-deps
-      - run: npx playwright install --with-deps
-      - uses: nrwl/nx-set-shas@v4
 
-      # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud
-      # - run: npx nx-cloud record -- echo Hello World
-      # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected
-      # When you enable task distribution, run the e2e-ci task instead of e2e
-      #      - run: npx nx affected -t lint test build e2e
-      #
-      #      - name: Get version from git tags
-      #        id: get-version
-      #        uses: ./.github/workflows/actions/get-version-from-git
+      - uses: ./.github/workflows/actions/get-version-from-git
+        id: get-version
+
+      - name: Build projects
+        uses: ./.github/workflows/actions/build-projects
+        with:
+          version: ${{ steps.get-version.outputs.version }}
 
-      - name: Publish to npm
+      - name: Run unit tests (headless)
+        env:
+          CI: 'true'
         run: |
-          bash ./build.sh publishNpmPackage
+          npm run test -- --watch=false --browsers=ChromeHeadless --code-coverage
 
-        #          LATEST_TAG=$(git describe --tags --abbrev=0)
-        #          echo "Last Tag: $LATEST_TAG"
-        #
-        #          version=${LATEST_TAG#v}
-        #
-        #          #read version from tag
-        #          #TAG=${GITHUB_REF#refs/tags/v}
-        #
-        #          BUILD_RUN=${{ github.run_number }}
-        #
-        #          IFS='.' read -r -a VERSION_PARTS <<< "$version"
-        #
-        #          NEW_VERSION="${VERSION_PARTS[0]}.${VERSION_PARTS[1]}.${VERSION_PARTS[2]}-prerelease+$BUILD_RUN"
-        #
-        #          echo "New version: $NEW_VERSION"
-        #
-        #          npx nx release version ${NEW_VERSION}
-        #
-        #          npx nx run angular-tofu:nx-release-publish --access public
+      - name: Publish angular-tofu library to NPM
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} # NPM-Token aus GitHub Secrets
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: |
+          cd dist/angular-tofu
+
+          #npm publish --access public

.junie/guidelines.md

@@ -0,0 +1,47 @@
+You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
+
+## TypeScript Best Practices
+
+- Use strict type checking
+- Prefer type inference when the type is obvious
+- Avoid the `any` type; use `unknown` when type is uncertain
+
+## Angular Best Practices
+
+- Always use standalone components over NgModules
+- Must NOT set `standalone: true` inside Angular decorators. It's the default.
+- Use signals for state management
+- Implement lazy loading for feature routes
+- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
+- Use `NgOptimizedImage` for all static images.
+  - `NgOptimizedImage` does not work for inline base64 images.
+
+## Components
+
+- Keep components small and focused on a single responsibility
+- Use `input()` and `output()` functions instead of decorators
+- Use `computed()` for derived state
+- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Prefer inline templates for small components
+- Prefer Reactive forms instead of Template-driven ones
+- Do NOT use `ngClass`, use `class` bindings instead
+- Do NOT use `ngStyle`, use `style` bindings instead
+
+## State Management
+
+- Use signals for local component state
+- Use `computed()` for derived state
+- Keep state transformations pure and predictable
+- Do NOT use `mutate` on signals, use `update` or `set` instead
+
+## Templates
+
+- Keep templates simple and avoid complex logic
+- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
+- Use the async pipe to handle observables
+
+## Services
+
+- Design services around a single responsibility
+- Use the `providedIn: 'root'` option for singleton services
+- Use the `inject()` function instead of constructor injection