migrate to latest Nx and Angular 19

.env

@@ -0,0 +1 @@
+CP_API_KEY="cp_42858fd467d094364e7577a3daf8613258da53e77e0195dffbff66c300dcf2cb"

.github/workflows/ci.yml

@@ -2,37 +2,39 @@ name: CI
 
 on:
   push:
-    branches:
-      - master
+    branches: [main]
   pull_request:
+    branches: [main]
 
 permissions:
   actions: read
   contents: read
 
 jobs:
-  main:
+  checks:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
       # 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
-      - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci"
+      - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="test"
 
-      # Cache node_modules
-      - uses: actions/setup-node@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
-          cache: 'npm'
+          node-version-file: .nvmrc
+          cache: npm
 
-      - run: npm ci --legacy-peer-deps
-      - uses: nrwl/nx-set-shas@v4
+      - name: Set base and head for Nx affected commands
+        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
-      - run: npx nx affected -t lint test build e2e-ci
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npx nx run-many -t test --configuration=ci

.github/workflows/code-pushup.yml

@@ -0,0 +1,39 @@
+name: Code PushUp
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+  actions: read
+  pull-requests: write
+
+env:
+  CP_API_KEY: ${{ secrets.CP_API_KEY }}
+
+jobs:
+  code_pushup:
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    name: Code PushUp
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run Code PushUp action
+        uses: code-pushup/github-action@v0
+        with:
+          bin: npx @code-pushup/cli -- --no-progress --verbose
+          retention: 14

.gitignore

@@ -42,3 +42,5 @@ Thumbs.db
 .nx/workspace-data
 
 .angular
+.env
+.code-pushup

.nvmrc

@@ -0,0 +1 @@
+20.11.1

apps/ng-demo/eslint.config.js

@@ -1,34 +1,22 @@
-const nx = require('@nx/eslint-plugin');
-const baseConfig = require('../../eslint.config.js');
+import angular from '@code-pushup/eslint-config/angular';
+import storybook from '@code-pushup/eslint-config/storybook';
+import tsESLint from 'typescript-eslint';
+import baseConfig from '../../eslint.config.js';
 
-module.exports = [
-  ...baseConfig,
-  ...nx.configs['flat/angular'],
-  ...nx.configs['flat/angular-template'],
-  {
-    files: ['**/*.ts'],
-    rules: {
-      '@angular-eslint/directive-selector': [
-        'error',
-        {
-          type: 'attribute',
-          prefix: 'app',
-          style: 'camelCase',
-        },
-      ],
-      '@angular-eslint/component-selector': [
-        'error',
-        {
-          type: 'element',
-          prefix: 'app',
-          style: 'kebab-case',
-        },
-      ],
+export default tsESLint.config(...baseConfig, ...angular, ...storybook, {
+  files: ['**/*.ts'],
+  languageOptions: {
+    parserOptions: {
+      projectService: true,
+      tsconfigRootDir: import.meta.dirname,
     },
   },
-  {
-    files: ['**/*.html'],
-    // Override or add rules here
-    rules: {},
+  rules: {
+    '@angular-eslint/prefer-standalone': 'error',
+
+    '@typescript-eslint/explicit-module-boundary-types': 'error',
+    '@typescript-eslint/prefer-readonly': 'warn',
+    '@typescript-eslint/prefer-readonly-parameter-types': 'warn',
+    '@typescript-eslint/prefer-ts-expect-error': 'error',
   },
-];
+});

apps/ng-demo/src/app/app.component.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  template: `
+    selector: 'app-root',
+    template: `
     <app-header></app-header>
     <router-outlet></router-outlet>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: block;
         max-width: var(--screen-width);
@@ -16,6 +16,7 @@ import { Component } from '@angular/core';
         box-sizing: border-box;
       }
     `,
-  ],
+    ],
+    standalone: false
 })
 export class AppComponent {}

apps/ng-demo/src/components/article-card/article-card.component.ts

@@ -7,9 +7,10 @@ import { Article } from '../../models/articles';
 import { DateagoPipe } from '../../pipes/dateago.pipe';
 
 @Component({
-  selector: 'app-article-card',
-  templateUrl: './article-card.component.html',
-  styleUrls: ['./article-card.component.scss'],
+    selector: 'app-article-card',
+    templateUrl: './article-card.component.html',
+    styleUrls: ['./article-card.component.scss'],
+    standalone: false
 })
 export class ArticleCardComponent implements OnChanges {
   @Input() article!: Article;

apps/ng-demo/src/components/header/header.component.ts

@@ -3,9 +3,10 @@ import { Component, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss'],
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: false
 })
 export class HeaderComponent {
   constructor() {}
@@ -16,4 +17,4 @@ export class HeaderComponent {
   imports: [CommonModule, RouterModule.forChild([])],
   exports: [HeaderComponent],
 })
-export class HeaderModule {}
+export class HeaderModule {}

apps/ng-demo/src/components/scoll-tracker/scroll-tracker.directive.ts

@@ -9,8 +9,9 @@ import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 
 @Directive({
-  /* eslint-disable @angular-eslint/directive-selector */
-  selector: '[scrollTracker]',
+    /* eslint-disable @angular-eslint/directive-selector */
+    selector: '[scrollTracker]',
+    standalone: false
 })
 export class ScrollTrackerDirective implements OnDestroy, OnInit {
   @Output() scrollingFinished = new EventEmitter<void>();

apps/ng-demo/src/pages/article-detail/article-detail.component.ts

@@ -7,8 +7,8 @@ import { UserStore } from '../../state/user.store';
 import { UserArticlesStore } from '../../state/user-articles.store';
 
 @Component({
-  selector: 'app-article-detail',
-  template: `
+    selector: 'app-article-detail',
+    template: `
     <aside>
       <app-reactions
         *ngIf="reaction$ | async as reactions"
@@ -25,8 +25,8 @@ import { UserArticlesStore } from '../../state/user-articles.store';
       <app-user-detail *ngIf="user" [user]="user"></app-user-detail>
     </ng-container>
   `,
-  styles: [
-    `
+    styles: [
+        `
       :host {
         display: grid;
         grid-gap: 1rem;
@@ -37,8 +37,9 @@ import { UserArticlesStore } from '../../state/user-articles.store';
         grid-template-columns: 4rem minmax(0, 7fr) minmax(0, 3fr);
       }
     `,
-  ],
-  viewProviders: [ArticleDetailStore, UserStore, CommentsStore],
+    ],
+    viewProviders: [ArticleDetailStore, UserStore, CommentsStore],
+    standalone: false
 })
 export class ArticleDetailComponent implements OnInit {
   article$ = this.articleDetailStore.article$.pipe(