feat: migrate to angular 22

And typescript 6

Author: aydex

CLAUDE.md

@@ -8,7 +8,7 @@ Behavioral guidelines for working in the Mikane (PuddingDebt) repo. Reduce commo
 
 Mikane is a shared-expense settlement tool. Two deployables in one repo:
 
-- **Frontend** — `app/mikane/` — Angular 21 (standalone components, signals where present), Angular Material, RxJS, SCSS. Tests via `ng test` (Vitest under the hood).
+- **Frontend** — `app/mikane/` — Angular 22 (standalone components, signals where present), Angular Material, RxJS, SCSS. Tests via `ng test` (Vitest under the hood).
 - **Backend** — `server/` — Express 5 on Node 24, PostgreSQL (via `pg`), session auth (`express-session` + `csrf-sync`). Tests via Vitest + Supertest against a Dockerized test DB.
 
 Layout cheatsheet:

app/mikane/README.md

@@ -1,10 +1,10 @@
 # Mikane — Frontend
 
-Angular 21 frontend for [Mikane](../../README.md). For project overview, installation, and backend setup, see the [root README](../../README.md).
+Angular 22 frontend for [Mikane](../../README.md). For project overview, installation, and backend setup, see the [root README](../../README.md).
 
 ## Stack
 
-- Angular 21 (standalone components, signals where present, `provideZonelessChangeDetection`)
+- Angular 22 (standalone components, signals where present, `provideZonelessChangeDetection`)
 - Angular Material
 - RxJS, SCSS
 - [MSW](https://mswjs.io/) for local mock backend

app/mikane/eslint.config.mjs

@@ -1,24 +1,13 @@
 import parser from "@angular-eslint/template-parser";
-import { FlatCompat } from "@eslint/eslintrc";
-import { default as eslint, default as js } from "@eslint/js";
+import { default as eslint } from "@eslint/js";
 import angular from "angular-eslint";
 import prettier from "eslint-config-prettier";
 import github from "eslint-plugin-github";
 import optimizeRegex from "eslint-plugin-optimize-regex";
 import { defineConfig, globalIgnores } from "eslint/config";
 import globals from "globals";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
 import tseslint from "typescript-eslint";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-	baseDirectory: __dirname,
-	recommendedConfig: js.configs.recommended,
-	allConfig: js.configs.all,
-});
-
 export default defineConfig([
 	globalIgnores(["projects/**/*"]),
 	{
@@ -75,6 +64,7 @@ export default defineConfig([
 				},
 			],
 			"@angular-eslint/prefer-standalone": "warn",
+			"@angular-eslint/prefer-on-push-component-change-detection": "warn",
 			"@typescript-eslint/no-unused-vars": [
 				"error",
 				{
@@ -92,7 +82,7 @@ export default defineConfig([
 	{
 		files: ["**/*.html"],
 
-		extends: compat.extends("plugin:@angular-eslint/template/recommended", "plugin:@angular-eslint/template/accessibility"),
+		extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
 
 		languageOptions: {
 			parser: parser,
@@ -104,7 +94,6 @@ export default defineConfig([
 			"@angular-eslint/template/prefer-self-closing-tags": "warn",
 			"@angular-eslint/template/prefer-ngsrc": "warn",
 			"@angular-eslint/template/prefer-control-flow": "warn",
-			"@angular-eslint/prefer-on-push-component-change-detection": "off",
 		},
 	},
 ]);