chore(deps): upgrade to Angular 22.2.3 and Node 24

.github/workflows/ci.yaml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v5
       - uses: actions/setup-node@v5
         with:
-          node-version: "20.19"
+          node-version: "24.22.0"
           cache: npm
       - run: npm ci
       - run: npm run lint

.nvmrc

@@ -1 +1 @@
-20.19.0
+24.22.0

CHANGELOG.md

@@ -7,8 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- **Dependencies**: Node.js `24.22.0` (engines `^24.22.0 || ^26.0.0`), Angular `22.2.3`, and AG Grid Community `32.3.9`.
+
 ### Fixed
 
+- **Tests**: Jest specs match Angular 22 realities (`ng-reflect-*` opt-in, HostListener rename, `@if (; as)` syntax, jsdom Location, FileReader under Node 24) and use a 30s default timeout.
+
 - **Layers**: An Image feature-information field stores max width and max height in its options. The picture address stays unchanged.
 - **Layers**: Image options label max width and max height. An empty value stays unset, so the viewer sizes the picture automatically.
 - **Templates**: Roles and Territories assigned on the template, document-export, and map-image task forms persist after save ([#467](https://github.com/sitmun/sitmun-admin-app/issues/467)).

README.md

@@ -62,8 +62,8 @@ This frontend integrates seamlessly with the [SITMUN Backend Core](https://githu
 
 ### Prerequisites
 
-- **Node.js**: 20.19.0+ ([Download](https://nodejs.org/)); use `nvm use 20.19.0` if using nvm (see [.nvmrc](.nvmrc)). Build and tests verified with **Node.js v20.19.0+**.
-- **npm**: Version 8.x or higher (comes with Node.js)
+- **Node.js**: 24.22.0+ ([Download](https://nodejs.org/)); use `nvm use 24.22.0` if using nvm (see [.nvmrc](.nvmrc)). Engines allow `^24.22.0 || ^26.0.0`. Build and tests verified with **Node.js v24.22.0+**.
+- **npm**: Version 11.x or higher (comes with Node.js)
 - **SITMUN Backend Core**: Running instance ([Setup Guide](https://github.com/sitmun/sitmun-backend-core))
 
 ### Quick Setup

angular.json

@@ -187,5 +187,31 @@
     "schematicCollections": [
       "angular-eslint"
     ]
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

eslint.config.js

@@ -68,6 +68,8 @@ module.exports = tseslint.config(
       "import/newline-after-import": "error",
       "import/no-duplicates": "error",
       "@angular-eslint/prefer-standalone": "off",
+      "@angular-eslint/prefer-inject": "off",
+      "@angular-eslint/prefer-on-push-component-change-detection": "off",
     },
   },
   {

jest.config.ts

@@ -1,6 +1,6 @@
 import type {Config} from 'jest';
 
-import {createJestConfig} from './jest/create-jest-config';
+import {createJestConfig} from './jest/create-jest-config.ts';
 
 const config: Config = createJestConfig({collectCoverage: false});
 

jest.coverage.config.ts

@@ -1,6 +1,6 @@
 import type {Config} from 'jest';
 
-import {createJestConfig} from './jest/create-jest-config';
+import {createJestConfig} from './jest/create-jest-config.ts';
 
 const config: Config = createJestConfig({collectCoverage: true});
 

jest/create-jest-config.ts

@@ -78,6 +78,7 @@ export function createJestConfig(
     preset: 'jest-preset-angular',
     clearMocks: true,
     restoreMocks: true,
+    testTimeout: 30_000,
     collectCoverage: mode.collectCoverage,
     coverageDirectory: contract.coverageDirectory,
     coverageProvider: 'v8',

jest/sonar-jest-contract.spec.ts

@@ -1,9 +1,14 @@
 import {readFileSync} from 'node:fs';
 import {posix} from 'node:path';
 
-import coverageConfig from '../jest.coverage.config';
-import jestConfig from '../jest.config';
-import {loadSonarJestContract, parseSonarJestContract} from './create-jest-config';
+import {
+  createJestConfig,
+  loadSonarJestContract,
+  parseSonarJestContract,
+} from './create-jest-config';
+
+const jestConfig = createJestConfig({collectCoverage: false});
+const coverageConfig = createJestConfig({collectCoverage: true});
 
 function sonarValue(key: string): string {
   const match = readFileSync('sonar-project.properties', 'utf8').match(
@@ -86,6 +91,15 @@ describe('Sonar Jest contract', () => {
     expect(scripts['test:coverage']).toMatch(/jest\.coverage\.config/);
   });
 
+  it('keeps thin jest config entrypoints wired to the factory', () => {
+    expect(readFileSync('jest.config.ts', 'utf8')).toContain(
+      "createJestConfig({collectCoverage: false})"
+    );
+    expect(readFileSync('jest.coverage.config.ts', 'utf8')).toContain(
+      "createJestConfig({collectCoverage: true})"
+    );
+  });
+
   it('maps AG Grid, echarts, and Material barrels onto Jest stubs', () => {
     const mapper = jestConfig.moduleNameMapper as Record<string, string>;
     expect(mapper['^@ag-grid-community/angular$']).toContain('jest/stubs/ag-grid-angular');