chore: update to v22 of Angular/NgRx (#312)

* chore: npx nx migrate latest

* chore: pnpm install --no-frozen-lockfile

* pnpm exec nx migrate --run-migrations

* chore: bump NgRx deps to v22

* chore: bump package's version + peer deps versions

* chore: run `prettier --write ./**/*.{js,ts,json,html,scss,md}`

* chore: update components with explicit `Eager` CD

Author: rainerhahnekamp

.prettierignore

@@ -4,3 +4,5 @@
 /.nx/cache
 .angular
 pnpm-lock.yaml
+
+.nx/self-healing

apps/demo/src/app/app.config.ts

@@ -1,5 +1,9 @@
 import { LayoutModule } from '@angular/cdk/layout';
-import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptors,
+  withXhr,
+} from '@angular/common/http';
 import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
@@ -10,7 +14,7 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(appRoutes, withComponentInputBinding()),
     provideAnimations(),
-    provideHttpClient(withInterceptors([memoryHttpInterceptor])),
+    provideHttpClient(withXhr(), withInterceptors([memoryHttpInterceptor])),
     importProvidersFrom(LayoutModule),
   ],
 };

apps/demo/src/app/events-sample/events-sample.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, inject } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -152,7 +152,7 @@ import { BookStore } from './book.store';
 export class EventsSampleComponent {
   readonly store = inject(BookStore);
   readonly dispatch = injectDispatch(bookEvents);
-  filterText = '';
+  filterText = signal('');
 
   toggleStock(bookId: string, event: Event) {
     event.stopPropagation();

apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.ts

@@ -1,5 +1,5 @@
 import { JsonPipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
@@ -20,7 +20,6 @@ import { SimpleFlightBookingStore } from './flight-booking-simple.store';
   ],
   selector: 'demo-flight-search',
   templateUrl: './flight-search-simple.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FlightSearchSimpleComponent {
   private store = inject(SimpleFlightBookingStore);

apps/demo/src/app/shared/flight-card.component.html

@@ -1,3 +1,6 @@
+@let selected = this.selected();
+@let item = this.item();
+
 <div class="card" [ngClass]="{ 'active-card': selected }">
   <div class="card-header">
     <h2 class="title">{{ item.from }} - {{ item.to }}</h2>

apps/demo/src/app/shared/flight-card.component.ts

@@ -1,32 +1,22 @@
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-} from '@angular/core';
+import { Component, input, model } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { initFlight } from './flight';
 
 @Component({
   selector: 'demo-flight-card',
   imports: [CommonModule, RouterModule],
   templateUrl: './flight-card.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FlightCardComponent {
-  @Input() item = initFlight;
-  @Input() selected: boolean | undefined;
-  @Output() selectedChange = new EventEmitter<boolean>();
+  public readonly item = input(initFlight);
+  public readonly selected = model.required<boolean>();
 
-  select() {
-    this.selected = true;
-    this.selectedChange.next(true);
+  protected select() {
+    this.selected.set(true);
   }
 
-  deselect() {
-    this.selected = false;
-    this.selectedChange.next(false);
+  protected deselect() {
+    this.selected.set(false);
   }
 }

apps/demo/src/app/todo-entity-resource/todo-entity-resource.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -21,7 +21,7 @@ import { TodoEntityResourceStore } from './todo-entity-resource.store';
 })
 export class TodoEntityResourceComponent {
   protected readonly store = inject(TodoEntityResourceStore);
-  protected newTitle = '';
+  protected newTitle = signal('');
   protected readonly dataSource = new MatTableDataSource<{
     id: number;
     title: string;
@@ -43,11 +43,11 @@ export class TodoEntityResourceComponent {
   }
   trackById = (_: number, t: { id: number }) => t.id;
   add() {
-    const title = this.newTitle.trim();
+    const title = this.newTitle().trim();
     if (!title) return;
     const ids = this.store.ids() as Array<number>;
     const nextId = ids.length ? Math.max(...ids) + 1 : 1;
     this.store.addTodo({ id: nextId, title, completed: false });
-    this.newTitle = '';
+    this.newTitle.set('');
   }
 }

apps/demo/tsconfig.app.json

@@ -6,5 +6,13 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

apps/demo/tsconfig.json

@@ -11,7 +11,8 @@
     "noFallthroughCasesInSwitch": true,
     "module": "preserve",
     "moduleResolution": "bundler",
-    "lib": ["dom", "es2022"]
+    "lib": ["dom", "es2022"],
+    "ignoreDeprecations": "6.0"
   },
   "files": [],
   "include": [],

apps/demo/tsconfig.spec.json

@@ -14,5 +14,13 @@
     "src/**/*.test.ts",
     "src/**/*.spec.ts",
     "src/**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }