chore: update Angular to v21

apps/demo/project.json

@@ -72,7 +72,8 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/demo/jest.config.ts"
+        "jestConfig": "apps/demo/jest.config.ts",
+        "tsConfig": "apps/demo/tsconfig.spec.json"
       }
     },
     "e2e": {

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

@@ -1,12 +1,11 @@
-import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { Flight } from '../shared/flight';
 import { FlightBookingStore } from './flight-booking.store';
 
 @Component({
-  imports: [CommonModule, RouterModule, FormsModule],
+  imports: [RouterModule, FormsModule],
   selector: 'demo-flight-edit',
   templateUrl: './flight-edit.component.html',
 })

apps/demo/src/app/flight-search-data-service-dynamic/flight-search.component.html

@@ -47,24 +47,27 @@ <h2 class="title">Flight Search (Dynamic)</h2>
 </form>
 
 <div>
-  <b *ngIf="loading()">Loading ...</b>
+  @if (loading()) {
+    <b>Loading ...</b>
+  }
 </div>
 
 <div class="row">
-  <div
-    *ngFor="let f of flights()"
-    class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3"
-  >
-    <demo-flight-card
-      [item]="f"
-      [selected]="selectedIds()[f.id]"
-      (selectedChange)="updateBasket(f.id, $event)"
-    >
-      <a class="btn btn-default" [routerLink]="['../flight-edit-dynamic', f.id]"
-        >Edit</a
+  @for (f of flights(); track f) {
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
+      <demo-flight-card
+        [item]="f"
+        [selected]="selectedIds()[f.id]"
+        (selectedChange)="updateBasket(f.id, $event)"
       >
-    </demo-flight-card>
-  </div>
+        <a
+          class="btn btn-default"
+          [routerLink]="['../flight-edit-dynamic', f.id]"
+          >Edit</a
+        >
+      </demo-flight-card>
+    </div>
+  }
 </div>
 
 <pre>{{ selected() | json }}</pre>

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

@@ -1,19 +1,12 @@
-import { JsonPipe, NgForOf, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
 import { FlightCardComponent } from '../shared/flight-card.component';
 import { FlightBookingStore } from './flight-booking.store';
 
 @Component({
-  imports: [
-    NgIf,
-    NgForOf,
-    JsonPipe,
-    FormsModule,
-    FlightCardComponent,
-    RouterLink,
-  ],
+  imports: [JsonPipe, FormsModule, FlightCardComponent, RouterLink],
   selector: 'demo-flight-search',
   templateUrl: './flight-search.component.html',
 })

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

@@ -1,12 +1,11 @@
-import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
 import { FormsModule, NgForm } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { Flight } from '../shared/flight';
 import { SimpleFlightBookingStore } from './flight-booking-simple.store';
 
 @Component({
-  imports: [CommonModule, RouterModule, FormsModule],
+  imports: [RouterModule, FormsModule],
   selector: 'demo-flight-edit-simple',
   templateUrl: './flight-edit-simple.component.html',
 })

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

@@ -14,12 +14,9 @@ <h2 class="title">Flight Search (Simple)</h2>
     </label>
   </div>
 
-  <div
-    class="alert alert-warning"
-    *ngIf="form?.controls?.['from']?.hasError('appCity')"
-  >
-    Invalid city!
-  </div>
+  @if (form?.controls?.['from']?.hasError('appCity')) {
+    <div class="alert alert-warning">Invalid city!</div>
+  }
 
   <div class="form-group">
     <label
@@ -52,24 +49,27 @@ <h2 class="title">Flight Search (Simple)</h2>
 </form>
 
 <div>
-  <b *ngIf="loading()">Loading ...</b>
+  @if (loading()) {
+    <b>Loading ...</b>
+  }
 </div>
 
 <div class="row">
-  <div
-    *ngFor="let f of flights()"
-    class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3"
-  >
-    <demo-flight-card
-      [item]="f"
-      [selected]="selectedIds()[f.id]"
-      (selectedChange)="updateBasket(f.id, $event)"
-    >
-      <a class="btn btn-default" [routerLink]="['../flight-edit-simple', f.id]"
-        >Edit</a
+  @for (f of flights(); track f) {
+    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3">
+      <demo-flight-card
+        [item]="f"
+        [selected]="selectedIds()[f.id]"
+        (selectedChange)="updateBasket(f.id, $event)"
       >
-    </demo-flight-card>
-  </div>
+        <a
+          class="btn btn-default"
+          [routerLink]="['../flight-edit-simple', f.id]"
+          >Edit</a
+        >
+      </demo-flight-card>
+    </div>
+  }
 </div>
 
 <pre>{{ selected() | json }}</pre>

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

@@ -1,4 +1,4 @@
-import { JsonPipe, NgForOf, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -10,8 +10,6 @@ import { SimpleFlightBookingStore } from './flight-booking-simple.store';
 
 @Component({
   imports: [
-    NgIf,
-    NgForOf,
     JsonPipe,
     FormsModule,
     FlightCardComponent,

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

@@ -7,12 +7,12 @@ <h2 class="title">{{ item.from }} - {{ item.to }}</h2>
     <p>Flight-No.: #{{ item.id }}</p>
     <p>Date: {{ item.date | date: 'dd.MM.yyyy HH:mm:ss' }}</p>
     <p>
-      <button class="btn btn-default" *ngIf="!selected" (click)="select()">
-        Select
-      </button>
-      <button class="btn btn-default" *ngIf="selected" (click)="deselect()">
-        Remove
-      </button>
+      @if (!selected) {
+        <button class="btn btn-default" (click)="select()">Select</button>
+      }
+      @if (selected) {
+        <button class="btn btn-default" (click)="deselect()">Remove</button>
+      }
       <ng-content></ng-content>
     </p>
   </div>

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { Component, computed, effect, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
@@ -11,7 +10,6 @@ import { TodoEntityResourceStore } from './todo-entity-resource.store';
   selector: 'demo-todo-entity-resource',
   standalone: true,
   imports: [
-    CommonModule,
     FormsModule,
     MatIcon,
     MatInputModule,

apps/demo/src/main.ts

@@ -1,7 +1,9 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
-);
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((err) => console.error(err));

apps/demo/tsconfig.json

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

apps/demo/tsconfig.spec.json

@@ -2,9 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [

libs/ngrx-toolkit/package.json

@@ -7,10 +7,10 @@
     "url": "https://github.com/angular-architects/ngrx-toolkit"
   },
   "peerDependencies": {
-    "@angular/core": "^20.0.0",
-    "@angular/common": "^20.0.0",
-    "@ngrx/signals": "^20.0.0",
-    "@ngrx/store": "^20.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/common": "^21.0.0",
+    "@ngrx/signals": "^21.0.0",
+    "@ngrx/store": "^21.0.0",
     "rxjs": "^7.0.0"
   },
   "peerDependenciesMeta": {

libs/ngrx-toolkit/project.json

@@ -10,23 +10,23 @@
       "executor": "@nx/angular:package",
       "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
       "options": {
-        "project": "libs/ngrx-toolkit/ng-package.json"
+        "project": "libs/ngrx-toolkit/ng-package.json",
+        "tsConfig": "libs/ngrx-toolkit/tsconfig.lib.json"
       },
       "configurations": {
         "production": {
           "tsConfig": "libs/ngrx-toolkit/tsconfig.lib.prod.json"
         },
-        "development": {
-          "tsConfig": "libs/ngrx-toolkit/tsconfig.lib.json"
-        }
+        "development": {}
       },
       "defaultConfiguration": "production"
     },
     "test": {
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "libs/ngrx-toolkit/jest.config.ts"
+        "jestConfig": "libs/ngrx-toolkit/jest.config.ts",
+        "tsConfig": "libs/ngrx-toolkit/tsconfig.spec.json"
       }
     },
     "lint": {

libs/ngrx-toolkit/redux-connector/src/lib/create-redux.ts

@@ -3,7 +3,7 @@ import {
   makeEnvironmentProviders,
   provideEnvironmentInitializer,
 } from '@angular/core';
-import { ActionCreator, ActionType } from '@ngrx/store/src/models';
+import { ActionCreator, ActionType } from '@ngrx/store';
 import {
   CreateReduxState,
   ExtractActionTypes,

libs/ngrx-toolkit/redux-connector/src/lib/model.ts

@@ -1,15 +1,11 @@
 import { EnvironmentProviders, Signal, Type } from '@angular/core';
-import { DeepSignal } from '@ngrx/signals/src/deep-signal';
 import {
+  DeepSignal,
+  Prettify,
   SignalStoreFeatureResult,
   StateSignals,
-} from '@ngrx/signals/src/signal-store-models';
-import {
-  Action,
-  ActionCreator,
-  ActionType,
-  Prettify,
-} from '@ngrx/store/src/models';
+} from '@ngrx/signals';
+import { Action, ActionCreator, ActionType } from '@ngrx/store';
 import { Observable, Unsubscribable } from 'rxjs';
 
 export type IncludePropType<

libs/ngrx-toolkit/tsconfig.json

@@ -7,7 +7,10 @@
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"]
   },
   "files": [],
   "include": [],

libs/ngrx-toolkit/tsconfig.spec.json

@@ -2,9 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test-setup.ts"],
   "include": [