chore: update to v22 of Angular/NgRx

.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"
+      }
+    }
+  }
 }

docs/tsconfig.json

@@ -2,7 +2,8 @@
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
-    "baseUrl": "."
+    "baseUrl": ".",
+    "ignoreDeprecations": "6.0"
   },
   "exclude": [".docusaurus", "build"]
 }

libs/ngrx-toolkit/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@angular-architects/ngrx-toolkit",
-  "version": "21.0.1",
+  "version": "22.0.0",
   "license": "MIT",
   "repository": {
     "type": "GitHub",
     "url": "https://github.com/angular-architects/ngrx-toolkit"
   },
   "peerDependencies": {
-    "@angular/core": "^21.2.0",
-    "@angular/common": "^21.2.0",
-    "@ngrx/signals": "^21.0.0",
-    "@ngrx/store": "^21.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@ngrx/signals": "^22.0.0",
+    "@ngrx/store": "^22.0.0",
     "rxjs": "^7.0.0"
   },
   "peerDependenciesMeta": {

libs/ngrx-toolkit/src/lib/mutation/http-mutation.spec.ts

@@ -1,4 +1,8 @@
-import { HttpEventType, provideHttpClient } from '@angular/common/http';
+import {
+  HttpEventType,
+  provideHttpClient,
+  withXhr,
+} from '@angular/common/http';
 import {
   HttpTestingController,
   provideHttpClientTesting,
@@ -29,7 +33,7 @@ describe('httpMutation', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [provideHttpClient(), provideHttpClientTesting()],
+      providers: [provideHttpClient(withXhr()), provideHttpClientTesting()],
     });
 
     httpTestingController = TestBed.inject(HttpTestingController);

libs/ngrx-toolkit/src/lib/with-redux.spec.ts

@@ -2,6 +2,7 @@ import {
   HttpClient,
   HttpParams,
   provideHttpClient,
+  withXhr,
 } from '@angular/common/http';
 import {
   HttpTestingController,
@@ -45,7 +46,7 @@ const createFlight = (flight: Partial<Flight> = {}) => {
 describe('with redux', () => {
   it('should load flights', () => {
     TestBed.configureTestingModule({
-      providers: [provideHttpClient(), provideHttpClientTesting()],
+      providers: [provideHttpClient(withXhr()), provideHttpClientTesting()],
     });
 
     TestBed.runInInjectionContext(() => {

libs/ngrx-toolkit/src/lib/with-resource.spec.ts

@@ -1,4 +1,4 @@
-import { httpResource, provideHttpClient } from '@angular/common/http';
+import { httpResource, provideHttpClient, withXhr } from '@angular/common/http';
 import {
   HttpTestingController,
   provideHttpClientTesting,
@@ -332,7 +332,7 @@ describe('withResource', () => {
         );
 
         TestBed.configureTestingModule({
-          providers: [provideHttpClient(), provideHttpClientTesting()],
+          providers: [provideHttpClient(withXhr()), provideHttpClientTesting()],
         });
 
         const store = TestBed.inject(Store);

libs/ngrx-toolkit/tsconfig.json

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

libs/ngrx-toolkit/tsconfig.lib.json

@@ -14,5 +14,13 @@
     "jest.config.ts",
     "src/**/*.test.ts"
   ],
-  "include": ["src/**/*.ts", "src/lib/test-utils"]
+  "include": ["src/**/*.ts", "src/lib/test-utils"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

libs/ngrx-toolkit/tsconfig.lib.prod.json

@@ -4,6 +4,12 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "compilationMode": "partial"
+    "compilationMode": "partial",
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
   }
 }

libs/ngrx-toolkit/tsconfig.spec.json

@@ -16,5 +16,13 @@
     "src/**/*.d.ts",
     "src/**/tests/**/*.ts",
     "src/lib/storage-sync/tests/with-storage-sync-indexedb.spec.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }