Task/upgrade Angular to version 22.1.1 (#7663)

* chore(deps): bump angular from v21 to v22 * fix(client): simplify date adapter injection * fix(api): suppress API deprecation warnings in tsconfig * feat(docs): update changelog * fix(client): migrate custom date adapter to inject function * fix(ui): migrate eslint configuration to native flat config format * feat(docs): update changelog * fix(ui): reorder typescript-eslint plugin import * chore(deps): bump angular from 22.1.1 to 22.1.2 * chore(deps): bump babel packages
20 hours ago · d83d9cac59
6 changed files with 5504 additions and 4286 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

+## Unreleased
+
+### Changed
+
+- Upgraded `angular` from version `21.2.19` to `22.1.2`
+- Upgraded `ngx-device-detector` from version `11.0.0` to `12.0.0`
+- Upgraded `ngx-markdown` from version `21.2.0` to `22.0.0`
+
 ## 3.54.0 - 2026-08-18

 ### Changed
--- a/apps/api/tsconfig.app.json
+++ b/apps/api/tsconfig.app.json
@ -4,6 +4,7 @@
    "outDir": "../../dist/out-tsc",
    "types": ["node"],
    "emitDecoratorMetadata": true,
+    "ignoreDeprecations": "6.0",
    "moduleResolution": "node10",
    "target": "es2021",
    "module": "commonjs"
--- a/apps/client/src/app/adapter/custom-date-adapter.ts
+++ b/apps/client/src/app/adapter/custom-date-adapter.ts
@ -1,16 +1,11 @@
 import { getDateFormatString } from '@ghostfolio/common/helper';

-import { Inject, forwardRef } from '@angular/core';
+import { inject } from '@angular/core';
 import { MAT_DATE_LOCALE, NativeDateAdapter } from '@angular/material/core';
 import { addYears, format, getYear, parse } from 'date-fns';

 export class CustomDateAdapter extends NativeDateAdapter {
-  public constructor(
-    @Inject(MAT_DATE_LOCALE) public override locale: string,
-    @Inject(forwardRef(() => MAT_DATE_LOCALE)) matDateLocale: string
-  ) {
-    super(matDateLocale);
-  }
+  public override locale = inject<string>(MAT_DATE_LOCALE);

  /**
   * Formats a date as a string
--- a/libs/ui/eslint.config.cjs
+++ b/libs/ui/eslint.config.cjs
@ -1,66 +1,58 @@
-const { FlatCompat } = require('@eslint/eslintrc');
-const js = require('@eslint/js');
 const baseConfig = require('../../eslint.config.cjs');
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended
-});
+const angularEslintPlugin = require('@angular-eslint/eslint-plugin');
+const angularTemplateEslintPlugin = require('@angular-eslint/eslint-plugin-template');
+const angularTemplateParser = require('@angular-eslint/template-parser');
+const typescriptEslintPlugin = require('@typescript-eslint/eslint-plugin');

 module.exports = [
  {
    ignores: ['**/dist']
  },
  ...baseConfig,
-  ...compat
-    .config({
-      extends: [
-        'plugin:@nx/angular',
-        'plugin:@angular-eslint/template/process-inline-templates'
-      ]
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-      rules: {
-        ...config.rules,
-        '@angular-eslint/directive-selector': [
-          'error',
-          {
-            type: 'attribute',
-            prefix: 'gf',
-            style: 'camelCase'
-          }
-        ],
-        '@angular-eslint/component-selector': [
-          'error',
-          {
-            type: 'element',
-            prefix: 'gf',
-            style: 'kebab-case'
-          }
-        ],
-        '@angular-eslint/prefer-inject': 'off',
-        '@angular-eslint/prefer-standalone': 'off',
-        '@typescript-eslint/prefer-nullish-coalescing': 'error'
-      },
-      languageOptions: {
-        parserOptions: {
-          project: ['libs/ui/tsconfig.*?.json']
+  {
+    plugins: {
+      '@angular-eslint': angularEslintPlugin,
+      '@typescript-eslint': typescriptEslintPlugin
+    }
+  },
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    rules: {
+      '@angular-eslint/directive-selector': [
+        'error',
+        {
+          type: 'attribute',
+          prefix: 'gf',
+          style: 'camelCase'
        }
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        {
+          type: 'element',
+          prefix: 'gf',
+          style: 'kebab-case'
+        }
+      ],
+      '@angular-eslint/prefer-inject': 'off',
+      '@angular-eslint/prefer-standalone': 'off',
+      '@typescript-eslint/prefer-nullish-coalescing': 'error'
+    },
+    languageOptions: {
+      parserOptions: {
+        project: ['libs/ui/tsconfig.*?.json']
      }
-    })),
-  ...compat
-    .config({
-      extends: ['plugin:@nx/angular-template']
-    })
-    .map((config) => ({
-      ...config,
-      files: ['**/*.html'],
-      rules: {
-        ...config.rules
-      }
-    })),
+    }
+  },
+  {
+    files: ['**/*.html'],
+    plugins: {
+      '@angular-eslint/template': angularTemplateEslintPlugin
+    },
+    languageOptions: {
+      parser: angularTemplateParser
+    }
+  },
  {
    ignores: ['**/*.stories.ts']
  }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -54,17 +54,17 @@
    "workspace-generator": "nx workspace-generator"
  },
  "dependencies": {
-    "@angular/animations": "21.2.19",
-    "@angular/cdk": "21.2.14",
-    "@angular/common": "21.2.19",
-    "@angular/compiler": "21.2.19",
-    "@angular/core": "21.2.19",
-    "@angular/forms": "21.2.19",
-    "@angular/material": "21.2.14",
-    "@angular/platform-browser": "21.2.19",
-    "@angular/platform-browser-dynamic": "21.2.19",
-    "@angular/router": "21.2.19",
-    "@angular/service-worker": "21.2.19",
+    "@angular/animations": "22.1.2",
+    "@angular/cdk": "22.1.2",
+    "@angular/common": "22.1.2",
+    "@angular/compiler": "22.1.2",
+    "@angular/core": "22.1.2",
+    "@angular/forms": "22.1.2",
+    "@angular/material": "22.1.2",
+    "@angular/platform-browser": "22.1.2",
+    "@angular/platform-browser-dynamic": "22.1.2",
+    "@angular/router": "22.1.2",
+    "@angular/service-worker": "22.1.2",
    "@bull-board/api": "8.6.0",
    "@bull-board/express": "8.6.0",
    "@bull-board/nestjs": "8.6.0",
@ -124,8 +124,8 @@
    "marked": "17.0.2",
    "ms": "3.0.0-canary.1",
    "ng-extract-i18n-merge": "3.4.0",
-    "ngx-device-detector": "11.0.0",
-    "ngx-markdown": "21.2.0",
+    "ngx-device-detector": "12.0.0",
+    "ngx-markdown": "22.0.0",
    "ngx-skeleton-loader": "12.0.0",
    "open-color": "1.9.1",
    "papaparse": "5.5.3",
@ -147,17 +147,17 @@
    "zone.js": "0.16.1"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "21.2.21",
-    "@angular-devkit/core": "21.2.21",
-    "@angular-devkit/schematics": "21.2.21",
-    "@angular-eslint/eslint-plugin": "21.4.0",
-    "@angular-eslint/eslint-plugin-template": "21.4.0",
-    "@angular-eslint/template-parser": "21.4.0",
-    "@angular/cli": "21.2.21",
-    "@angular/compiler-cli": "21.2.19",
-    "@angular/language-service": "21.2.19",
-    "@angular/localize": "21.2.19",
-    "@angular/pwa": "21.2.21",
+    "@angular-devkit/build-angular": "22.1.4",
+    "@angular-devkit/core": "22.1.4",
+    "@angular-devkit/schematics": "22.1.4",
+    "@angular-eslint/eslint-plugin": "22.1.0",
+    "@angular-eslint/eslint-plugin-template": "22.1.0",
+    "@angular-eslint/template-parser": "22.1.0",
+    "@angular/cli": "22.1.4",
+    "@angular/compiler-cli": "22.1.2",
+    "@angular/language-service": "22.1.2",
+    "@angular/localize": "22.1.2",
+    "@angular/pwa": "22.1.4",
    "@eslint/eslintrc": "3.3.1",
    "@eslint/js": "9.35.0",
    "@nestjs/schematics": "11.1.0",
@ -173,7 +173,7 @@
    "@nx/web": "23.1.1",
    "@nx/workspace": "23.1.1",
    "@prisma/config": "7.9.1",
-    "@schematics/angular": "21.2.21",
+    "@schematics/angular": "22.1.4",
    "@storybook/addon-docs": "10.5.7",
    "@storybook/addon-themes": "10.5.7",
    "@storybook/angular": "10.5.7",
@ -211,7 +211,7 @@
    "ts-jest": "29.4.12",
    "ts-node": "10.9.2",
    "tslib": "2.8.1",
-    "typescript": "5.9.2",
+    "typescript": "6.0.3",
    "webpack-cli": "7.1.0"
  },
  "engines": {