Task/upgrade to Nx 22.3.3 and Angular 21.0 (#6109)

* chore(deps): upgrade to Nx 22.3.3 and Angular 21.0

* feat(nx): run migrations

* fix(ts): change module and moduleResolution for api

* feat(ts): remove duplicates of bundler module resolution

* fix(ts): enable ESM interoperability

* fix(api): update imports

* fix(ts): set module to preserve in api spec

* fix(ts): update target

* resolve comments

* fix(api): set jest moduleNameMapper

* fix(ts): update tsconfig in api spec

* fix(api): revert import changes

* fix(apps): revert unnecessary changes

* fix(client): change marked js file

* fix(deps): remove duplicates

CHANGELOG.md

@@ -19,13 +19,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Deprecated the public _Stripe_ key
 - Improved the language localization for German (`de`)
 - Eliminated `ngx-stripe`
-- Upgraded `angular` from version `20.2.4` to `20.3.9`
-- Upgraded `marked` from version `15.0.4` to `16.4.2`
+- Upgraded `angular` from version `20.2.4` to `21.0.6`
+- Upgraded `marked` from version `15.0.4` to `17.0.1`
+- Upgraded `ngx-device-detector` from version `10.1.0` to `11.0.0`
 - Upgraded `ng-extract-i18n-merge` from `3.1.0` to `3.2.1`
-- Upgraded `ngx-markdown` from version `20.0.0` to `20.1.0`
-- Upgraded `Nx` from version `21.5.1` to `22.1.3`
+- Upgraded `ngx-markdown` from version `20.0.0` to `21.0.1`
+- Upgraded `Nx` from version `21.5.1` to `22.3.3`
 - Upgraded `shx` from version `0.3.4` to `0.4.0`
 - Upgraded `storybook` from version `9.1.5` to `10.1.10`
+- Upgraded `zone.js` from version `0.15.1` to `0.16.0`
 
 ### Fixed
 

apps/api/src/services/data-provider/alpha-vantage/alpha-vantage.service.ts

@@ -18,7 +18,7 @@ import {
 
 import { Injectable } from '@nestjs/common';
 import { DataSource, SymbolProfile } from '@prisma/client';
-import * as Alphavantage from 'alphavantage';
+import Alphavantage from 'alphavantage';
 import { format, isAfter, isBefore, parse } from 'date-fns';
 
 import { AlphaVantageHistoricalResponse } from './interfaces/interfaces';

apps/api/tsconfig.app.json

@@ -4,6 +4,7 @@
     "outDir": "../../dist/out-tsc",
     "types": ["node"],
     "emitDecoratorMetadata": true,
+    "moduleResolution": "node10",
     "target": "es2021",
     "module": "commonjs"
   },

apps/api/tsconfig.spec.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
+    "moduleResolution": "node10",
     "types": ["jest", "node"]
   },
   "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"]

apps/client/src/app/components/access-table/access-table.component.ts

@@ -4,7 +4,6 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { NotificationService } from '@ghostfolio/ui/notifications';
 
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -36,7 +35,6 @@ import ms from 'ms';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     ClipboardModule,
-    CommonModule,
     IonIcon,
     MatButtonModule,
     MatMenuModule,

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -29,7 +29,6 @@ import { GfSymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplet
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { TextFieldModule } from '@angular/cdk/text-field';
-import { CommonModule } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
 import {
   ChangeDetectionStrategy,
@@ -95,7 +94,6 @@ import { AssetProfileDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    CommonModule,
     FormsModule,
     GfCurrencySelectorComponent,
     GfEntityLogoComponent,

apps/client/src/app/components/fear-and-greed-index/fear-and-greed-index.component.ts

@@ -1,7 +1,6 @@
 import { resolveFearAndGreedIndex } from '@ghostfolio/common/helper';
 import { translate } from '@ghostfolio/ui/i18n';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -12,7 +11,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, NgxSkeletonLoaderModule],
+  imports: [NgxSkeletonLoaderModule],
   selector: 'gf-fear-and-greed-index',
   styleUrls: ['./fear-and-greed-index.component.scss'],
   templateUrl: './fear-and-greed-index.component.html'

apps/client/src/app/components/footer/footer.component.ts

@@ -3,7 +3,6 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfLogoComponent } from '@ghostfolio/ui/logo';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -18,7 +17,7 @@ import { openOutline } from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfLogoComponent, IonIcon, RouterModule],
+  imports: [GfLogoComponent, IonIcon, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-footer',
   styleUrls: ['./footer.component.scss'],

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts

@@ -4,7 +4,6 @@ import {
 } from '@ghostfolio/client/services/settings-storage.service';
 import { GfDialogHeaderComponent } from '@ghostfolio/ui/dialog-header';
 
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -28,7 +27,6 @@ import { LoginWithAccessTokenDialogParams } from './interfaces/interfaces';
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    CommonModule,
     GfDialogHeaderComponent,
     IonIcon,
     MatButtonModule,

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts

@@ -2,7 +2,6 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { GfMembershipCardComponent } from '@ghostfolio/ui/membership-card';
 import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -31,7 +30,6 @@ import { SubscriptionInterstitialDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column flex-grow-1 h-100' },
   imports: [
-    CommonModule,
     GfMembershipCardComponent,
     GfPremiumIndicatorComponent,
     IonIcon,

apps/client/src/app/components/user-detail-dialog/user-detail-dialog.component.ts

@@ -4,7 +4,6 @@ import { GfDialogFooterComponent } from '@ghostfolio/ui/dialog-footer';
 import { GfDialogHeaderComponent } from '@ghostfolio/ui/dialog-header';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -26,7 +25,6 @@ import { UserDetailDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'd-flex flex-column h-100' },
   imports: [
-    CommonModule,
     GfDialogFooterComponent,
     GfDialogHeaderComponent,
     GfValueComponent,

apps/client/src/app/pages/blog/blog-page.component.ts

@@ -1,7 +1,6 @@
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
-import { CommonModule } from '@angular/common';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, OnDestroy } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
@@ -12,7 +11,7 @@ import { Subject } from 'rxjs';
 
 @Component({
   host: { class: 'page' },
-  imports: [CommonModule, IonIcon, MatCardModule, RouterModule],
+  imports: [IonIcon, MatCardModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-blog-page',
   styleUrls: ['./blog-page.scss'],

apps/client/src/app/pages/markets/markets-page.component.ts

@@ -1,12 +1,11 @@
 import { GfHomeMarketComponent } from '@ghostfolio/client/components/home-market/home-market.component';
 
-import { CommonModule } from '@angular/common';
 import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
   host: { class: 'page' },
-  imports: [CommonModule, GfHomeMarketComponent],
+  imports: [GfHomeMarketComponent],
   selector: 'gf-markets-page',
   styleUrls: ['./markets-page.scss'],
   templateUrl: './markets-page.html'

apps/client/src/app/pages/open/open-page.component.ts

@@ -3,7 +3,6 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { Statistics, User } from '@ghostfolio/common/interfaces';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectorRef,
   Component,
@@ -16,7 +15,7 @@ import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   host: { class: 'page' },
-  imports: [CommonModule, GfValueComponent, MatCardModule],
+  imports: [GfValueComponent, MatCardModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-open-page',
   styleUrls: ['./open-page.scss'],

apps/client/src/app/pages/register/user-account-registration-dialog/user-account-registration-dialog.component.ts

@@ -3,7 +3,6 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -36,7 +35,6 @@ import { UserAccountRegistrationDialogParams } from './interfaces/interfaces';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     ClipboardModule,
-    CommonModule,
     FormsModule,
     IonIcon,
     MatButtonModule,

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -2,7 +2,6 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
-import { CommonModule } from '@angular/common';
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
@@ -15,7 +14,7 @@ import { takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page has-tabs' },
-  imports: [CommonModule, IonIcon, MatTabsModule, RouterModule],
+  imports: [IonIcon, MatTabsModule, RouterModule],
   selector: 'gf-zen-page',
   styleUrls: ['./zen-page.scss'],
   templateUrl: './zen-page.html'

apps/client/src/main.ts

@@ -7,7 +7,11 @@ import {
   provideHttpClient,
   withInterceptorsFromDi
 } from '@angular/common/http';
-import { enableProdMode, importProvidersFrom } from '@angular/core';
+import {
+  enableProdMode,
+  importProvidersFrom,
+  provideZoneChangeDetection
+} from '@angular/core';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
@@ -79,6 +83,7 @@ import { environment } from './environments/environment';
       provideIonicAngular(),
       provideMarkdown(),
       provideNgxSkeletonLoader(),
+      provideZoneChangeDetection(),
       {
         deps: [LanguageService, MAT_DATE_LOCALE, Platform],
         provide: DateAdapter,

apps/client/tsconfig.app.json

@@ -1,7 +1,6 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "moduleResolution": "bundler",
     "outDir": "../../dist/out-tsc",
     "types": ["node"],
     "typeRoots": ["../../node_modules/@types"],

apps/client/tsconfig.json

@@ -20,6 +20,8 @@
     "strictTemplates": false
   },
   "compilerOptions": {
+    "lib": ["dom", "es2022"],
+    "module": "preserve",
     "target": "es2020"
   }
 }

apps/client/tsconfig.spec.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
+    "isolatedModules": true,
     "types": ["jest", "node"],
     "target": "es2016"
   },

libs/common/src/lib/routes/routes.ts

@@ -5,7 +5,7 @@ import { InternalRoute } from './interfaces/internal-route.interface';
 import { PublicRoute } from './interfaces/public-route.interface';
 
 if (typeof window !== 'undefined') {
-  import('@angular/localize/init');
+  import('@angular/localize');
 } else {
   (global as any).$localize = (
     messageParts: TemplateStringsArray,

libs/common/tsconfig.json

@@ -9,5 +9,9 @@
     {
       "path": "./tsconfig.spec.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "module": "preserve",
+    "lib": ["dom", "es2022"]
+  }
 }

libs/common/tsconfig.spec.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
+    "isolatedModules": true,
     "types": ["jest", "node"]
   },
   "include": [

libs/ui/src/lib/logo-carousel/logo-carousel.component.ts

@@ -1,11 +1,9 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { LogoItem } from './interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
   selector: 'gf-logo-carousel',
   styleUrls: ['./logo-carousel.component.scss'],
   templateUrl: './logo-carousel.component.html'

libs/ui/tsconfig.json

@@ -14,7 +14,8 @@
     }
   ],
   "compilerOptions": {
-    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"],
+    "module": "preserve",
     "target": "es2020",
     // TODO: Remove once solved in tsconfig.base.json
     "strict": false,

libs/ui/tsconfig.lib.json

@@ -7,7 +7,7 @@
     "declarationMap": true,
     "inlineSources": true,
     "types": [],
-    "lib": ["dom", "es2018"]
+    "lib": ["dom", "es2022"]
   },
   "exclude": [
     "src/test-setup.ts",

libs/ui/tsconfig.spec.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "module": "commonjs",
+    "module": "preserve",
+    "isolatedModules": true,
     "types": ["jest", "node"],
     "target": "es2016"
   },

package.json

@@ -54,17 +54,17 @@
     "workspace-generator": "nx workspace-generator"
   },
   "dependencies": {
-    "@angular/animations": "20.3.9",
-    "@angular/cdk": "20.2.9",
-    "@angular/common": "20.3.9",
-    "@angular/compiler": "20.3.9",
-    "@angular/core": "20.3.9",
-    "@angular/forms": "20.3.9",
-    "@angular/material": "20.2.9",
-    "@angular/platform-browser": "20.3.9",
-    "@angular/platform-browser-dynamic": "20.3.9",
-    "@angular/router": "20.3.9",
-    "@angular/service-worker": "20.3.9",
+    "@angular/animations": "21.0.6",
+    "@angular/cdk": "21.0.5",
+    "@angular/common": "21.0.6",
+    "@angular/compiler": "21.0.6",
+    "@angular/core": "21.0.6",
+    "@angular/forms": "21.0.6",
+    "@angular/material": "21.0.5",
+    "@angular/platform-browser": "21.0.6",
+    "@angular/platform-browser-dynamic": "21.0.6",
+    "@angular/router": "21.0.6",
+    "@angular/service-worker": "21.0.6",
     "@codewithdan/observable-store": "2.2.15",
     "@date-fns/utc": "2.1.0",
     "@internationalized/number": "3.6.5",
@@ -113,11 +113,11 @@
     "ionicons": "8.0.13",
     "jsonpath": "1.1.1",
     "lodash": "4.17.21",
-    "marked": "16.4.2",
+    "marked": "17.0.1",
     "ms": "3.0.0-canary.1",
     "ng-extract-i18n-merge": "3.2.1",
-    "ngx-device-detector": "10.1.0",
-    "ngx-markdown": "20.1.0",
+    "ngx-device-detector": "11.0.0",
+    "ngx-markdown": "21.0.1",
     "ngx-skeleton-loader": "11.3.0",
     "open-color": "1.9.1",
     "papaparse": "5.3.1",
@@ -133,35 +133,35 @@
     "tablemark": "4.1.0",
     "twitter-api-v2": "1.27.0",
     "yahoo-finance2": "3.10.2",
-    "zone.js": "0.15.1"
+    "zone.js": "0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.3.9",
-    "@angular-devkit/core": "20.3.9",
-    "@angular-devkit/schematics": "20.3.9",
-    "@angular-eslint/eslint-plugin": "20.7.0",
-    "@angular-eslint/eslint-plugin-template": "20.7.0",
-    "@angular-eslint/template-parser": "20.7.0",
-    "@angular/cli": "20.3.9",
-    "@angular/compiler-cli": "20.3.9",
-    "@angular/language-service": "20.3.9",
-    "@angular/localize": "20.3.9",
-    "@angular/pwa": "20.3.9",
+    "@angular-devkit/build-angular": "21.0.4",
+    "@angular-devkit/core": "21.0.4",
+    "@angular-devkit/schematics": "21.0.4",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/cli": "21.0.4",
+    "@angular/compiler-cli": "21.0.6",
+    "@angular/language-service": "21.0.6",
+    "@angular/localize": "21.0.6",
+    "@angular/pwa": "21.0.4",
     "@eslint/eslintrc": "3.3.1",
     "@eslint/js": "9.35.0",
     "@nestjs/schematics": "11.0.9",
     "@nestjs/testing": "11.1.8",
-    "@nx/angular": "22.1.3",
-    "@nx/eslint-plugin": "22.1.3",
-    "@nx/jest": "22.1.3",
-    "@nx/js": "22.1.3",
-    "@nx/module-federation": "22.1.3",
-    "@nx/nest": "22.1.3",
-    "@nx/node": "22.1.3",
-    "@nx/storybook": "22.1.3",
-    "@nx/web": "22.1.3",
-    "@nx/workspace": "22.1.3",
-    "@schematics/angular": "20.3.9",
+    "@nx/angular": "22.3.3",
+    "@nx/eslint-plugin": "22.3.3",
+    "@nx/jest": "22.3.3",
+    "@nx/js": "22.3.3",
+    "@nx/module-federation": "22.3.3",
+    "@nx/nest": "22.3.3",
+    "@nx/node": "22.3.3",
+    "@nx/storybook": "22.3.3",
+    "@nx/web": "22.3.3",
+    "@nx/workspace": "22.3.3",
+    "@schematics/angular": "21.0.4",
     "@storybook/addon-docs": "10.1.10",
     "@storybook/angular": "10.1.10",
     "@trivago/prettier-plugin-sort-imports": "5.2.2",
@@ -183,7 +183,7 @@
     "jest": "30.2.0",
     "jest-environment-jsdom": "30.2.0",
     "jest-preset-angular": "16.0.0",
-    "nx": "22.1.3",
+    "nx": "22.3.3",
     "prettier": "3.7.4",
     "prettier-plugin-organize-attributes": "1.0.0",
     "prisma": "6.19.0",

tsconfig.base.json

@@ -4,8 +4,9 @@
     "rootDir": ".",
     "sourceMap": true,
     "declaration": false,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "emitDecoratorMetadata": true,
+    "esModuleInterop": true,
     "experimentalDecorators": true,
     "importHelpers": true,
     "target": "es2015",