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

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

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"

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(
+  public override locale = inject<string>(MAT_DATE_LOCALE);
-    @Inject(MAT_DATE_LOCALE) public override locale: string,
-    @Inject(forwardRef(() => MAT_DATE_LOCALE)) matDateLocale: string
-  ) {
-    super(matDateLocale);
-  }
 
   /**
    * Formats a date as a string

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 angularEslintPlugin = require('@angular-eslint/eslint-plugin');
-const compat = new FlatCompat({
+const angularTemplateEslintPlugin = require('@angular-eslint/eslint-plugin-template');
-  baseDirectory: __dirname,
+const angularTemplateParser = require('@angular-eslint/template-parser');
-  recommendedConfig: js.configs.recommended
+const typescriptEslintPlugin = require('@typescript-eslint/eslint-plugin');
-});
 
 module.exports = [
   {
     ignores: ['**/dist']
   },
   ...baseConfig,
-  ...compat
+  {
-    .config({
+    plugins: {
-      extends: [
+      '@angular-eslint': angularEslintPlugin,
-        'plugin:@nx/angular',
+      '@typescript-eslint': typescriptEslintPlugin
-        'plugin:@angular-eslint/template/process-inline-templates'
+    }
-      ]
+  },
-    })
+  {
-    .map((config) => ({
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-      ...config,
+    rules: {
-      files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+      '@angular-eslint/directive-selector': [
-      rules: {
+        'error',
-        ...config.rules,
+        {
-        '@angular-eslint/directive-selector': [
+          type: 'attribute',
-          'error',
+          prefix: 'gf',
-          {
+          style: 'camelCase'
-            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']
         }
+      ],
+      '@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']
+    files: ['**/*.html'],
-    })
+    plugins: {
-    .map((config) => ({
+      '@angular-eslint/template': angularTemplateEslintPlugin
-      ...config,
+    },
-      files: ['**/*.html'],
+    languageOptions: {
-      rules: {
+      parser: angularTemplateParser
-        ...config.rules
+    }
-      }
+  },
-    })),
   {
     ignores: ['**/*.stories.ts']
   }

package.json

@@ -54,17 +54,17 @@
     "workspace-generator": "nx workspace-generator"
   },
   "dependencies": {
-    "@angular/animations": "21.2.19",
+    "@angular/animations": "22.1.2",
-    "@angular/cdk": "21.2.14",
+    "@angular/cdk": "22.1.2",
-    "@angular/common": "21.2.19",
+    "@angular/common": "22.1.2",
-    "@angular/compiler": "21.2.19",
+    "@angular/compiler": "22.1.2",
-    "@angular/core": "21.2.19",
+    "@angular/core": "22.1.2",
-    "@angular/forms": "21.2.19",
+    "@angular/forms": "22.1.2",
-    "@angular/material": "21.2.14",
+    "@angular/material": "22.1.2",
-    "@angular/platform-browser": "21.2.19",
+    "@angular/platform-browser": "22.1.2",
-    "@angular/platform-browser-dynamic": "21.2.19",
+    "@angular/platform-browser-dynamic": "22.1.2",
-    "@angular/router": "21.2.19",
+    "@angular/router": "22.1.2",
-    "@angular/service-worker": "21.2.19",
+    "@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-device-detector": "12.0.0",
-    "ngx-markdown": "21.2.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/build-angular": "22.1.4",
-    "@angular-devkit/core": "21.2.21",
+    "@angular-devkit/core": "22.1.4",
-    "@angular-devkit/schematics": "21.2.21",
+    "@angular-devkit/schematics": "22.1.4",
-    "@angular-eslint/eslint-plugin": "21.4.0",
+    "@angular-eslint/eslint-plugin": "22.1.0",
-    "@angular-eslint/eslint-plugin-template": "21.4.0",
+    "@angular-eslint/eslint-plugin-template": "22.1.0",
-    "@angular-eslint/template-parser": "21.4.0",
+    "@angular-eslint/template-parser": "22.1.0",
-    "@angular/cli": "21.2.21",
+    "@angular/cli": "22.1.4",
-    "@angular/compiler-cli": "21.2.19",
+    "@angular/compiler-cli": "22.1.2",
-    "@angular/language-service": "21.2.19",
+    "@angular/language-service": "22.1.2",
-    "@angular/localize": "21.2.19",
+    "@angular/localize": "22.1.2",
-    "@angular/pwa": "21.2.21",
+    "@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": {