feat: upgrade to NgRx 19

mikeshtro · rainerhahnekamp · commit f257624959e0 · 2025-01-04T19:11:59.000+01:00
diff --git a/apps/demo/.eslintrc.json b/apps/demo/.eslintrc.json
@@ -24,7 +24,8 @@
             "prefix": "demo",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -14,7 +14,6 @@ import { MatListItem, MatListModule } from '@angular/material/list';
 @Component({
     selector: 'demo-root',
     templateUrl: './app.component.html',
-    standalone: true,
     styleUrl: './app.component.css',
     imports: [
         MatTableModule,
diff --git a/apps/demo/src/app/core/sidebar/sidebar.component.ts b/apps/demo/src/app/core/sidebar/sidebar.component.ts
@@ -10,7 +10,6 @@ import { RouterModule } from '@angular/router';
 import { map, shareReplay } from 'rxjs';
 
 @Component({
-    standalone: true,
     selector: 'demo-sidebar-cmp',
     imports: [
         RouterModule,
diff --git a/apps/demo/src/app/flight-search-data-service-dynamic/flight-edit.component.ts b/apps/demo/src/app/flight-search-data-service-dynamic/flight-edit.component.ts
@@ -6,7 +6,6 @@ import { FlightBookingStore } from './flight-booking.store';
 import { Flight } from '../shared/flight';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, RouterModule, FormsModule],
   selector: 'demo-flight-edit',
   templateUrl: './flight-edit.component.html',
diff --git a/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.ts b/apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.ts
@@ -6,7 +6,6 @@ import { RouterLink } from '@angular/router';
 import { FlightBookingStore } from './flight-booking.store';
 
 @Component({
-  standalone: true,
   imports: [
     NgIf,
     NgForOf,
diff --git a/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.ts b/apps/demo/src/app/flight-search-data-service-simple/flight-edit-simple.component.ts
@@ -6,7 +6,6 @@ import { SimpleFlightBookingStore } from './flight-booking-simple.store';
 import { Flight } from '../shared/flight';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, RouterModule, FormsModule],
   selector: 'demo-flight-edit-simple',
   templateUrl: './flight-edit-simple.component.html',
diff --git a/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.ts b/apps/demo/src/app/flight-search-data-service-simple/flight-search-simple.component.ts
@@ -10,7 +10,6 @@ import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
 
 @Component({
-  standalone: true,
   imports: [
     NgIf,
     NgForOf,
diff --git a/apps/demo/src/app/flight-search-redux-connector/flight-search.component.ts b/apps/demo/src/app/flight-search-redux-connector/flight-search.component.ts
@@ -10,7 +10,6 @@ import { FlightFilter } from '../shared/flight.service';
 import { Flight } from '../shared/flight';
 
 @Component({
-  standalone: true,
   imports: [
     JsonPipe,
     RouterLink,
diff --git a/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.ts b/apps/demo/src/app/flight-search-with-pagination/flight-search-with-pagination.component.ts
@@ -12,7 +12,6 @@ import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
 @Component({
   selector: 'demo-flight-search-with-pagination',
   templateUrl: 'flight-search-with-pagination.component.html',
-  standalone: true,
   imports: [
     MatTableModule,
     MatPaginatorModule,
diff --git a/apps/demo/src/app/flight-search/flight-search.component.ts b/apps/demo/src/app/flight-search/flight-search.component.ts
@@ -11,7 +11,6 @@ import { MatButtonModule } from '@angular/material/button';
 @Component({
   selector: 'demo-flight-search',
   templateUrl: 'flight-search.component.html',
-  standalone: true,
   imports: [
     MatTableModule,
     DatePipe,
diff --git a/apps/demo/src/app/shared/flight-card.component.ts b/apps/demo/src/app/shared/flight-card.component.ts
@@ -4,7 +4,6 @@ import { RouterModule } from "@angular/router";
 import { initFlight } from "./flight";
 
 @Component({
-  standalone: true,
   selector: 'demo-flight-card',
   imports: [CommonModule, RouterModule],
   templateUrl: './flight-card.component.html',
diff --git a/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.ts b/apps/demo/src/app/todo-storage-sync/todo-storage-sync.component.ts
@@ -9,7 +9,6 @@ import { Todo } from '../todo-store';
 
 @Component({
   selector: 'demo-todo-storage-sync',
-  standalone: true,
   imports: [MatCheckboxModule, MatIconModule, MatTableModule],
   templateUrl: './todo-storage-sync.component.html',
   styleUrl: './todo-storage-sync.component.scss',
diff --git a/apps/demo/src/app/todo/todo.component.ts b/apps/demo/src/app/todo/todo.component.ts
@@ -10,7 +10,6 @@ import { SelectionModel } from '@angular/cdk/collections';
   selector: 'demo-todo',
   templateUrl: 'todo.component.html',
   styleUrl: 'todo.component.scss',
-  standalone: true,
   imports: [MatCheckboxModule, MatIconModule, MatTableModule],
 })
 export class TodoComponent {
diff --git a/jest.config.ts b/jest.config.ts
@@ -1,5 +1,5 @@
-import { getJestProjects } from '@nx/jest';
+import { getJestProjectsAsync } from '@nx/jest';
 
-export default {
-  projects: getJestProjects(),
-};
+export default async () => ({
+  projects: await getJestProjectsAsync(),
+});
diff --git a/libs/ngrx-toolkit/.eslintrc.json b/libs/ngrx-toolkit/.eslintrc.json
@@ -24,7 +24,8 @@
             "prefix": "ngrx-toolkit",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {
diff --git a/libs/ngrx-toolkit/package.json b/libs/ngrx-toolkit/package.json
@@ -7,8 +7,8 @@
     "url": "https://github.com/angular-architects/ngrx-toolkit"
   },
   "peerDependencies": {
-    "@ngrx/signals": "^18.1.0",
-    "@ngrx/store": "^18.0.0"
+    "@ngrx/signals": "^19.0.0",
+    "@ngrx/store": "^19.0.0"
   },
   "peerDependenciesMeta": {
     "@ngrx/store": {
diff --git a/libs/ngrx-toolkit/redux-connector/src/lib/create-redux.ts b/libs/ngrx-toolkit/redux-connector/src/lib/create-redux.ts
@@ -1,4 +1,4 @@
-import { ENVIRONMENT_INITIALIZER, inject, makeEnvironmentProviders } from "@angular/core";
+import { inject, makeEnvironmentProviders, provideEnvironmentInitializer } from "@angular/core";
 import { ActionCreator, ActionType } from "@ngrx/store/src/models";
 import { CreateReduxState, ExtractActionTypes, MapperTypes, Store } from "./model";
 import { SignalReduxStore, injectReduxDispatch } from "./signal-redux-store";
@@ -70,10 +70,8 @@ export function createReduxState<
   return {
     [`provide${capitalize(storeName)}Store`]: (connectReduxDevtools = false) => makeEnvironmentProviders([
       isRootProvider? [] : signalStore,
-      {
-        provide: ENVIRONMENT_INITIALIZER,
-        multi: true,
-        useFactory: (
+      provideEnvironmentInitializer(() => {
+        const initializerFn = ((
           signalReduxStore = inject(SignalReduxStore),
           store = inject(signalStore)
         ) => () => {
@@ -83,8 +81,9 @@ export function createReduxState<
           signalReduxStore.connectFeatureStore(
             withActionMappers(store)
           );
-        }
-      }
+        })();
+        return initializerFn();
+      })
     ]),
     [`inject${capitalize(storeName)}Store`]: () => Object.assign(
       inject(signalStore),
diff --git a/libs/ngrx-toolkit/redux-connector/src/lib/rxjs-interop/redux-method.ts b/libs/ngrx-toolkit/redux-connector/src/lib/rxjs-interop/redux-method.ts
@@ -5,10 +5,14 @@ import { Observable, Unsubscribable, map, pipe } from "rxjs";
 
 type RxMethodInput<Input> = Input | Observable<Input> | Signal<Input>;
 
+type RxMethodRef = {
+  destroy: () => void;
+}
+
 type RxMethod<Input, MethodInput = Input, MethodResult = unknown> = ((
   input: RxMethodInput<Input>,
   resultMethod: (input: MethodInput) => MethodResult
-) => Unsubscribable) & Unsubscribable;
+) => RxMethodRef) & RxMethodRef;
 
 export function reduxMethod<Input, MethodInput = Input>(
   generator: (source$: Observable<Input>) => Observable<MethodInput>,
@@ -47,12 +51,12 @@ export function reduxMethod<Input, MethodInput = Input, MethodResult = unknown>(
         injector: config?.injector || injector
       });
       const rxWithInput = rxMethodWithResult(input);
-      unsubscribable = { unsubscribe: rxWithInput.unsubscribe.bind(rxWithInput) };
+      unsubscribable = { unsubscribe: rxWithInput.destroy.bind(rxWithInput) };
 
       return rxWithInput;
     }) as RxMethod<Input, MethodInput, MethodResult>;
 
-    inputResultFn.unsubscribe = () => unsubscribable?.unsubscribe();
+    inputResultFn.destroy = () => unsubscribable?.unsubscribe();
 
     return inputResultFn;
   }
diff --git a/libs/ngrx-toolkit/src/lib/with-call-state.ts b/libs/ngrx-toolkit/src/lib/with-call-state.ts
@@ -47,14 +47,14 @@ export function withCallState<Collection extends string>(config: {
   EmptyFeatureResult,
   EmptyFeatureResult & {
     state: NamedCallStateSlice<Collection>;
-    computed: NamedCallStateSignals<Collection>;
+    props: NamedCallStateSignals<Collection>;
   }
 >;
 export function withCallState(): SignalStoreFeature<
   EmptyFeatureResult,
   EmptyFeatureResult & {
     state: CallStateSlice;
-    computed: CallStateSignals;
+    props: CallStateSignals;
   }
 >;
 export function withCallState<Collection extends string>(config?: {
diff --git a/libs/ngrx-toolkit/src/lib/with-data-service.ts b/libs/ngrx-toolkit/src/lib/with-data-service.ts
@@ -204,10 +204,10 @@ export function withDataService<
   // These alternatives break type inference:
   // state: { callState: CallState } & NamedEntityState<E, Collection>,
   // state: NamedEntityState<E, Collection>,
-  EmptyFeatureResult & { computed: NamedEntityComputed<E, Collection> },
+  EmptyFeatureResult & { props: NamedEntityComputed<E, Collection> },
   {
     state: NamedDataServiceState<E, F, Collection>;
-    computed: NamedDataServiceComputed<E, Collection>;
+    props: NamedDataServiceComputed<E, Collection>;
     methods: NamedDataServiceMethods<E, F, Collection>;
   }
 >;
@@ -218,7 +218,7 @@ export function withDataService<E extends Entity, F extends Filter>(options: {
   EmptyFeatureResult & { state: { callState: CallState } & EntityState<E> },
   {
     state: DataServiceState<E, F>;
-    computed: DataServiceComputed<E>;
+    props: DataServiceComputed<E>;
     methods: DataServiceMethods<E, F>;
   }
 >;
diff --git a/libs/ngrx-toolkit/src/lib/with-pagination.ts b/libs/ngrx-toolkit/src/lib/with-pagination.ts
@@ -119,22 +119,22 @@ export function withPagination<E, Collection extends string>(options: {
   entity: E;
   collection: Collection;
 }): SignalStoreFeature<
-  EmptyFeatureResult & { computed: NamedEntityComputed<E, Collection> },
+  EmptyFeatureResult & { props: NamedEntityComputed<E, Collection> },
   {
     state: NamedPaginationServiceState<E, Collection>;
-    computed: NamedPaginationServiceSignals<E, Collection>;
+    props: NamedPaginationServiceSignals<E, Collection>;
     methods: NamedPaginationServiceMethods<Collection>;
   }
 >;
 
 export function withPagination<E>(): SignalStoreFeature<
   EmptyFeatureResult & {
     state: EntityState<E>;
-    computed: EntityComputed<E>;
+    props: EntityComputed<E>;
   },
   {
     state: PaginationServiceState<E>;
-    computed: PaginationServiceSignals<E>;
+    props: PaginationServiceSignals<E>;
     methods: PaginationServiceMethods;
   }
 >;
diff --git a/libs/ngrx-toolkit/src/lib/with-undo-redo.ts b/libs/ngrx-toolkit/src/lib/with-undo-redo.ts
@@ -42,8 +42,8 @@ type NonNever<T> = T extends never ? never : T;
 type ExtractEntityCollection<T> = T extends `${infer U}Entities` ? U : never;
 
 type ExtractEntityCollections<Store extends SignalStoreFeatureResult> = NonNever<{
-  [K in keyof Store['computed']]: ExtractEntityCollection<K>;
-}[keyof Store['computed']]>;
+  [K in keyof Store['props']]: ExtractEntityCollection<K>;
+}[keyof Store['props']]>;
 
 type OptionsForState<Store extends SignalStoreFeatureResult> = Partial<Omit<NormalizedUndoRedoOptions, 'collections' | 'keys'>> & {
   collections?: ExtractEntityCollections<Store>[];
@@ -54,7 +54,7 @@ export function withUndoRedo<
   Input extends EmptyFeatureResult>(options?: OptionsForState<Input>): SignalStoreFeature<
   Input,
   EmptyFeatureResult & {
-  computed: {
+  props: {
     canUndo: Signal<boolean>;
     canRedo: Signal<boolean>;
   };
diff --git a/migrations.json b/migrations.json
diff --git a/nx.json b/nx.json
diff --git a/package.json b/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,8 @@`
`24`	`24`	`"prefix": "demo",`
`25`	`25`	`"style": "kebab-case"`
`26`	`26`	`}`
`27`		`- ]`
	`27`	`+ ],`
	`28`	`+ "@angular-eslint/prefer-standalone": "off"`
`28`	`29`	`}`
`29`	`30`	`},`
`30`	`31`	`{`