update angular to v22

package.json

@@ -29,13 +29,13 @@
   "packageManager": "npm@11.6.2",
   "dependencies": {
     "@angular/cdk": "21.2.13",
-    "@angular/common": "21.2.15",
+    "@angular/common": "22.0.0",
-    "@angular/compiler": "21.2.15",
+    "@angular/compiler": "22.0.0",
-    "@angular/core": "21.2.15",
+    "@angular/core": "22.0.0",
-    "@angular/forms": "21.2.15",
+    "@angular/forms": "22.0.0",
     "@angular/material": "21.2.13",
-    "@angular/platform-browser": "21.2.15",
+    "@angular/platform-browser": "22.0.0",
-    "@angular/router": "21.2.15",
+    "@angular/router": "22.0.0",
     "ajv": "8.20.0",
     "js-yaml": "4.1.1",
     "lodash-es": "4.18.1",
@@ -43,20 +43,20 @@
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "21.2.13",
+    "@angular/build": "22.0.0",
-    "@angular/cli": "21.2.13",
+    "@angular/cli": "22.0.0",
-    "@angular/compiler-cli": "21.2.15",
+    "@angular/compiler-cli": "22.0.0",
     "@angular/material": "21.2.13",
     "@playwright/test": "1.60.0",
     "@tailwindcss/postcss": "4.3.0",
     "@types/js-yaml": "4.0.9",
     "@types/lodash-es": "4.17.12",
     "jsdom": "29.1.1",
-    "playwright-ng-schematics": "^21.1.0",
+    "playwright-ng-schematics": "21.1.0",
-    "postcss": "8.5.15",
+    "postcss": "8.5.3",
     "prettier": "3.8.3",
     "tailwindcss": "4.3.0",
-    "typescript": "5.9.3",
+    "typescript": "6.0.3",
     "vitest": "4.1.7"
   }
 }

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed, effect, inject, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -29,6 +29,7 @@ import { SettingsService } from './services/settings';
     ConfigPreviewComponent,
   ],
   templateUrl: './app.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './app.css',
 })
 export class App {

src/app/components/array-form/array-form.ts

@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { ParamInfo } from '../../models/form';
@@ -12,6 +12,7 @@ import { parseStringToArray } from '../../utils/params';
   templateUrl: './array-form.html',
   styleUrl: './array-form.css',
   imports: [MatIconModule, FormsModule, CdkDrag, CdkDropList],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class ArrayFormComponent implements OnInit {

src/app/components/config-preview/config-preview.ts

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { Component, computed, input, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -9,6 +9,7 @@ import { Config } from '../../models/config';
   selector: 'app-config-preview',
   imports: [MatIconModule, MatButtonModule, MatTooltipModule],
   templateUrl: './config-preview.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './config-preview.css',
 })
 export class ConfigPreviewComponent {

src/app/components/module-list/module-list.ts

@@ -1,5 +1,5 @@
 import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Component, inject, input, output } from '@angular/core';
+import { Component, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -23,6 +23,7 @@ import { ModuleComponent } from '../module/module';
     CdkDropList,
   ],
   templateUrl: './module-list.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './module-list.css',
 })
 export class ModuleListComponent {

src/app/components/module/module.ts

@@ -1,6 +1,14 @@
 import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
-import { Component, computed, inject, input, output, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -29,6 +37,7 @@ import { ParamsFormComponent } from '../params-form/params-form';
     CdkDragPlaceholder,
   ],
   templateUrl: './module.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './module.css',
 })
 export class ModuleComponent {

src/app/components/params-form/params-form.ts

@@ -1,5 +1,12 @@
 import { JsonPipe } from '@angular/common';
-import { Component, effect, input, OnDestroy, output } from '@angular/core';
+import {
+  Component,
+  effect,
+  input,
+  OnDestroy,
+  output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -26,6 +33,7 @@ import { ArrayFormComponent } from '../array-form/array-form';
     ArrayFormComponent,
     MatTabsModule,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true,
 })
 export class ParamsFormComponent implements OnDestroy {

src/app/components/processor/processor.ts

@@ -1,5 +1,5 @@
 import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
-import { Component, computed, inject, input, output } from '@angular/core';
+import { Component, computed, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { ProcessorConfig } from '../../models/config';
@@ -17,6 +17,7 @@ import { ParamsFormComponent } from '../params-form/params-form';
     CdkDragPlaceholder,
   ],
   templateUrl: './processor.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './processor.css',
 })
 export class ProcessorComponent {

src/app/components/route-list/route-list.ts

@@ -6,7 +6,7 @@ import {
   moveItemInArray,
   transferArrayItem,
 } from '@angular/cdk/drag-drop';
-import { Component, inject, input, output } from '@angular/core';
+import { Component, inject, input, output, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -31,6 +31,7 @@ import { RouteComponent } from '../route/route';
     A11yModule,
   ],
   templateUrl: './route-list.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './route-list.css',
 })
 export class RouteListComponent {

src/app/components/route/route.ts

@@ -7,7 +7,15 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
-import { Component, computed, inject, input, output, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -39,6 +47,7 @@ import { ProcessorComponent } from '../processor/processor';
     CdkDragPlaceholder,
   ],
   templateUrl: './route.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './route.css',
 })
 export class RouteComponent {

tsconfig.app.json

@@ -7,5 +7,13 @@
     "types": []
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["src/**/*.spec.ts"]
+  "exclude": ["src/**/*.spec.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }