refactor: upgrade angular to v21

.docgeni/public/tsconfig.json

@@ -7,7 +7,7 @@
     "downlevelIteration": true,
     "experimentalDecorators": true,
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "esModuleInterop": false,
     "importHelpers": true,
     "target": "ES2022",

package.json

@@ -27,33 +27,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.10",
-    "@angular/cdk": "^20.2.12",
-    "@angular/common": "^20.3.10",
-    "@angular/compiler": "^20.3.10",
-    "@angular/core": "^20.3.10",
-    "@angular/forms": "^20.3.10",
-    "@angular/platform-browser": "^20.3.10",
-    "@angular/platform-browser-dynamic": "^20.3.10",
-    "@angular/router": "^20.3.10",
-    "@tethys/cdk": "^20.0.0",
+    "@angular/animations": "^21.1.2",
+    "@angular/cdk": "^21.1.2",
+    "@angular/common": "^21.1.2",
+    "@angular/compiler": "^21.1.2",
+    "@angular/core": "^21.1.2",
+    "@angular/forms": "^21.1.2",
+    "@angular/platform-browser": "^21.1.2",
+    "@angular/platform-browser-dynamic": "^21.1.2",
+    "@angular/router": "^21.1.2",
+    "@tethys/cdk": "^21.0.0-next.0",
     "rxjs": "^7.8.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "20.6.0",
-    "@angular-eslint/eslint-plugin": "20.6.0",
-    "@angular-eslint/eslint-plugin-template": "20.6.0",
-    "@angular-eslint/schematics": "20.6.0",
-    "@angular-eslint/template-parser": "20.6.0",
-    "@angular/build": "^20.3.10",
-    "@angular/cli": "^20.3.9",
-    "@angular/compiler-cli": "^20.3.10",
+    "@angular-eslint/builder": "^21.1.2",
+    "@angular-eslint/eslint-plugin": "^21.1.2",
+    "@angular-eslint/eslint-plugin-template": "^21.1.2",
+    "@angular-eslint/schematics": "^21.1.2",
+    "@angular-eslint/template-parser": "^21.1.2",
+    "@angular/build": "^21.1.2",
+    "@angular/cli": "^21.1.2",
+    "@angular/compiler-cli": "^21.1.2",
     "@commitlint/cli": "^12.0.1",
     "@commitlint/config-angular": "^12.0.1",
-    "@docgeni/cli": "2.6.0",
-    "@docgeni/template": "2.6.0",
+    "@docgeni/cli": "2.7.0-next.0",
+    "@docgeni/template": "2.7.0-next.0",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^24.10.0",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
@@ -69,7 +69,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^20.3.0",
+    "ng-packagr": "^21.1.0",
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
     "todomvc-app-css": "^2.4.1",

packages/store/package.json

@@ -2,9 +2,9 @@
   "name": "@tethys/store",
   "version": "20.0.0",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@tethys/cdk": ">=20.0.0"
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@tethys/cdk": ">=21.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

packages/store/store/examples/active/active.component.html

@@ -29,7 +29,7 @@
   </section>
 }
 
-<p>activeItemsStore.activeId :{{ activeItemsStore.activeId }}</p>
-<p>activeItemsStore.activeEntity:{{ activeItemsStore.activeEntity | json }}</p>
+<p>activeItemsStore.activeId :{{ activeItemsStore.activeId() }}</p>
+<p>activeItemsStore.activeEntity:{{ activeItemsStore.activeEntity() | json }}</p>
 <p>activeItemsStore.activeId$:{{ activeItemsStore.activeId$ | async }}</p>
 <p>activeItemsStore.activeEntity$:{{ activeItemsStore.activeEntity$ | async | json }}</p>

packages/store/store/examples/cancellation/cancellation.component.html

@@ -1,7 +1,7 @@
 <button class="dg-btn dg-btn-primary dg-btn-sm" (click)="fetchItems()">Fetch Items</button>
 <button class="dg-btn dg-btn-primary dg-btn-sm" (click)="cancel()">Cancel</button>
 
-@if (loadingDone) {
+@if (loadingDone()) {
   <div>
     @for (item of todos$ | async; track item.title) {
       <div>
@@ -14,7 +14,7 @@
 }
 
 <div class="messages">
-  @for (message of messages; track message) {
+  @for (message of messages(); track message) {
     <div>
       {{ message }}
     </div>

packages/store/store/examples/cancellation/cancellation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject, signal } from '@angular/core';
 import { TodosStore } from './items.store';
 import { takeUntil, finalize, switchMap, catchError } from 'rxjs/operators';
 import { MonoTypeOperatorFunction, of, Subject, Observable } from 'rxjs';
@@ -14,9 +14,9 @@ export class ThyStoreCancellationExampleComponent implements OnInit {
     public todosStore = inject(TodosStore);
     destroy$ = new Subject<void>();
 
-    loadingDone = false;
+    loadingDone = signal(false);
 
-    messages: string[] = [];
+    messages = signal([]);
 
     todos$ = this.todosStore.select$((state) => {
         return state.items;
@@ -29,18 +29,18 @@ export class ThyStoreCancellationExampleComponent implements OnInit {
     }
 
     fetchItems() {
-        this.loadingDone = false;
+        this.loadingDone.set(false);
         this.todosStore
             .fetchItems()
             .pipe(
                 finalize(() => {
-                    this.loadingDone = true;
+                    this.loadingDone.set(true);
                 })
             )
             .subscribe({
                 next: (result) => {
                     console.log(`next`, result);
-                    this.messages.push(`Items fetched ${new Date()}`);
+                    this.messages.set([...this.messages(), `Items fetched ${new Date()}`]);
                 },
                 error: (error: Error) => {
                     console.log(error);

packages/store/store/examples/counter/counter.component.ts

@@ -6,13 +6,13 @@ import { CounterStore } from './counter.store';
     selector: 'thy-store-counter-example',
     templateUrl: './counter.component.html',
     styleUrls: ['./counter.component.scss'],
-    standalone: false
+    standalone: false,
+    providers: [CounterStore]
 })
 export class ThyStoreCounterExampleComponent implements OnInit {
     public counterStore = inject(CounterStore);
 
     count$: Observable<number> = this.counterStore.select$(CounterStore.countSelector);
-
     count: Signal<number> = this.counterStore.select(CounterStore.countSelector);
 
     constructor() {

packages/store/store/examples/form/form.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="newUserForm" [thyStoreForm]="userFormStore" thyStateKey="user" (ngSubmit)="onSubmit()">
+<form [formGroup]="newUserForm" [thyStoreForm]="userFormStore" thyStatePath="user" (ngSubmit)="onSubmit()">
   <input type="text" formControlName="name" />
   <button type="submit">Create</button>
 </form>

packages/store/store/examples/module.ts

@@ -1,9 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ThyStoreModule } from '@tethys/store';
 import { StoreFormPluginModule } from '@tethys/store/form';
-import { CounterStore } from './counter/counter.store';
 
 export default {
-    imports: [CommonModule, FormsModule, ReactiveFormsModule, StoreFormPluginModule, ThyStoreModule.forFeature([CounterStore])]
+    imports: [CommonModule, FormsModule, ReactiveFormsModule, StoreFormPluginModule]
 };

packages/store/tsconfig.lib.json

@@ -6,8 +6,7 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": [],
-    "lib": ["dom", "esnext"]
+    "types": []
   },
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,

tsconfig.json

@@ -16,7 +16,6 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "es2020",
-    "lib": ["esnext", "dom"],
     "useDefineForClassFields": false
   },
   "angularCompilerOptions": {