Update project to Angular v20

.github/workflows/pr-checks.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24.7.0'
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -29,4 +29,4 @@ jobs:
         run: pnpm lint
 
       - name: Run tests
-        run: pnpm test
+        run: pnpm test

README.md

@@ -11,7 +11,7 @@ A modern task management application built with Angular and NgRx Signals, demons
 
 ## Tech Stack
 
-- Angular 19+
+- Angular 20+
 - NgRx Signals for state management
 - RxJS for reactive programming
 - Vitest for testing

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/task-tracker-ngrx",
             "index": "src/index.html",
@@ -62,7 +62,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "task-tracker-ngrx:build:production"
@@ -74,7 +74,7 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
           "builder": "@analogjs/vitest-angular:test"
@@ -91,5 +91,31 @@
   "cli": {
     "analytics": "43e28769-9766-4ad2-ae87-a0b58498705f",
     "schematicCollections": ["angular-eslint"]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

package.json

@@ -27,44 +27,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/platform-server": "^19.2.0",
-    "@angular/router": "^19.2.0",
-    "@angular/ssr": "^19.2.12",
-    "@ngrx/signals": "^19.2.0",
+    "@angular/common": "^20.3.4",
+    "@angular/compiler": "^20.3.4",
+    "@angular/core": "^20.3.4",
+    "@angular/forms": "^20.3.4",
+    "@angular/platform-browser": "^20.3.4",
+    "@angular/platform-browser-dynamic": "^20.3.4",
+    "@angular/platform-server": "^20.3.4",
+    "@angular/router": "^20.3.4",
+    "@angular/ssr": "^20.3.5",
+    "@ngrx/signals": "^20.0.1",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.16.1",
-    "@analogjs/vitest-angular": "^1.16.1",
-    "@angular-devkit/build-angular": "^19.2.12",
-    "@angular/cli": "^19.2.12",
-    "@angular/compiler-cli": "^19.2.0",
+    "@analogjs/vite-plugin-angular": "^1.21.2",
+    "@analogjs/vitest-angular": "^1.21.2",
+    "@angular/build": "^20.3.5",
+    "@angular/cli": "^20.3.5",
+    "@angular/compiler-cli": "^20.3.4",
     "@types/express": "^4.17.17",
     "@types/jasmine": "^5.1.8",
-    "@types/node": "^18.18.0",
+    "@types/node": "^24.7.0",
     "angular-eslint": "19.4.0",
     "eslint": "^9.26.0",
     "husky": "^9.1.7",
     "jasmine-core": "^5.7.1",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.0.0",
     "prettier": "^3.5.3",
-    "typescript": "~5.7.2",
-    "typescript-eslint": "8.32.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "8.46.0",
     "vite": "^6.3.5",
     "vitest": "^3.1.3"
   },
   "volta": {
-    "node": "22.15.1",
+    "node": "24.7.0",
     "pnpm": "10.11.0"
   }
 }

src/app/app.config.server.ts

@@ -1,11 +1,10 @@
+import { provideServerRendering, withRoutes } from '@angular/ssr';
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import { provideServerRendering } from '@angular/platform-server';
-import { provideServerRouting } from '@angular/ssr';
 import { appConfig } from './app.config';
 import { serverRoutes } from './app.routes.server';
 
 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering(), provideServerRouting(serverRoutes)],
+  providers: [provideServerRendering(withRoutes(serverRoutes))],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

src/app/pages/task-board/task-board.component.html

@@ -8,16 +8,16 @@ <h2>Task Tracker Pro</h2>
         formControlName="title"
         placeholder="Task title"
         class="form-control" />
-      <div
-        *ngIf="taskForm.get('title')?.invalid && taskForm.get('title')?.touched"
-        class="error-message">
-        <span *ngIf="taskForm.get('title')?.errors?.['required']"
-          >Title is required</span
-        >
-        <span *ngIf="taskForm.get('title')?.errors?.['minlength']"
-          >Title must be at least 3 characters</span
-        >
-      </div>
+      @if (taskForm.get('title')?.invalid && taskForm.get('title')?.touched) {
+        <div class="error-message">
+          @if (taskForm.get('title')?.errors?.['required']) {
+            <span>Title is required</span>
+          }
+          @if (taskForm.get('title')?.errors?.['minlength']) {
+            <span>Title must be at least 3 characters</span>
+          }
+        </div>
+      }
     </div>
     <div class="form-group">
       <textarea

src/app/pages/task-board/task-board.component.ts

@@ -1,5 +1,5 @@
 import { Component, inject, Signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import {
   FormBuilder,
   FormGroup,
@@ -12,7 +12,7 @@ import { Task } from '../../interfaces/task';
 @Component({
   selector: 'app-task-board',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [ReactiveFormsModule],
   templateUrl: './task-board.component.html',
   styleUrls: ['./task-board.component.scss'],
   providers: [TaskStore],

src/app/stores/task.store.spec.ts

@@ -4,12 +4,10 @@ import { TaskService } from '../services/task.service';
 import { Task } from '../interfaces/task';
 import { of, throwError } from 'rxjs';
 import { TestBed } from '@angular/core/testing';
-import { runInInjectionContext } from '@angular/core';
 
 describe('TaskStore', () => {
   let store: InstanceType<typeof TaskStore>;
   let mockTaskService: Partial<TaskService>;
-  let injector: TestBed;
 
   const mockTasks: Task[] = [
     {
@@ -43,7 +41,7 @@ describe('TaskStore', () => {
       updateTaskStatus: vi.fn(),
     };
 
-    injector = TestBed.configureTestingModule({
+    TestBed.configureTestingModule({
       providers: [
         TaskStore,
         { provide: TaskService, useValue: mockTaskService },
@@ -59,8 +57,8 @@ describe('TaskStore', () => {
       ],
     });
 
-    // Create a new instance of the store for each test using runInInjectionContext
-    store = runInInjectionContext(injector, () => new TaskStore());
+    // Create a new instance of the store for each test using TestBed
+    store = TestBed.inject(TaskStore);
   });
 
   describe('Initial State', () => {

src/main.server.ts

@@ -1,7 +1,11 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import {
+  bootstrapApplication,
+  BootstrapContext,
+} from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, config, context);
 
 export default bootstrap;