Merge branch 'main' into feature/migrate-fear-and-greed-index-component-to-standalone

CHANGELOG.md

@@ -9,8 +9,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactored the markets page to standalone
 - Refactored the fear and greed index component to standalone
 - Refactored the header component to standalone
+- Refactored the rule component to standalone
+- Refactored the rules component to standalone
 
 ## 2.197.0 - 2025-09-07
 

apps/client/src/app/app-routing.module.ts

@@ -1,11 +1,11 @@
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-import { PageTitleStrategy } from '@ghostfolio/client/services/page-title.strategy';
 import { publicRoutes, internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes, TitleStrategy } from '@angular/router';
 
+import { AuthGuard } from './core/auth.guard';
 import { ModulePreloadService } from './core/module-preload.service';
+import { PageTitleStrategy } from './services/page-title.strategy';
 
 const routes: Routes = [
   {
@@ -89,9 +89,7 @@ const routes: Routes = [
   {
     path: publicRoutes.markets.path,
     loadChildren: () =>
-      import('./pages/markets/markets-page.module').then(
-        (m) => m.MarketsPageModule
-      )
+      import('./pages/markets/markets-page.routes').then((m) => m.routes)
   },
   {
     path: publicRoutes.openStartup.path,

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

@@ -5,6 +5,7 @@ import {
   XRayRulesSettings
 } from '@ghostfolio/common/interfaces';
 
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -13,7 +14,10 @@ import {
   OnInit,
   Output
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
   addCircleOutline,
@@ -24,19 +28,26 @@ import {
   warningOutline
 } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, takeUntil } from 'rxjs';
 
 import { IRuleSettingsDialogParams } from './rule-settings-dialog/interfaces/interfaces';
 import { GfRuleSettingsDialogComponent } from './rule-settings-dialog/rule-settings-dialog.component';
 
 @Component({
-  selector: 'gf-rule',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './rule.component.html',
+  imports: [
+    CommonModule,
+    IonIcon,
+    MatButtonModule,
+    MatMenuModule,
+    NgxSkeletonLoaderModule
+  ],
+  selector: 'gf-rule',
   styleUrls: ['./rule.component.scss'],
-  standalone: false
+  templateUrl: './rule.component.html'
 })
-export class RuleComponent implements OnInit {
+export class GfRuleComponent implements OnInit {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;

apps/client/src/app/components/rule/rule.module.ts

@@ -1,22 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatMenuModule } from '@angular/material/menu';
-import { IonIcon } from '@ionic/angular/standalone';
-import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
-
-import { RuleComponent } from './rule.component';
-
-@NgModule({
-  declarations: [RuleComponent],
-  exports: [RuleComponent],
-  imports: [
-    CommonModule,
-    IonIcon,
-    MatButtonModule,
-    MatMenuModule,
-    NgxSkeletonLoaderModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfRuleModule {}

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

@@ -1,4 +1,5 @@
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
+import { GfRuleComponent } from '@ghostfolio/client/components/rule/rule.component';
 import {
   PortfolioReportRule,
   XRayRulesSettings
@@ -11,15 +12,17 @@ import {
   Input,
   Output
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 
 @Component({
-  selector: 'gf-rules',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './rules.component.html',
+  imports: [GfRuleComponent, MatButtonModule, MatCardModule],
+  selector: 'gf-rules',
   styleUrls: ['./rules.component.scss'],
-  standalone: false
+  templateUrl: './rules.component.html'
 })
-export class RulesComponent {
+export class GfRulesComponent {
   @Input() categoryName: string;
   @Input() hasPermissionToUpdateUserSettings: boolean;
   @Input() isLoading: boolean;

apps/client/src/app/components/rules/rules.module.ts

@@ -1,16 +0,0 @@
-import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-
-import { RulesComponent } from './rules.component';
-
-@NgModule({
-  declarations: [RulesComponent],
-  exports: [RulesComponent],
-  imports: [CommonModule, GfRuleModule, MatButtonModule, MatCardModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class GfRulesModule {}

apps/client/src/app/pages/about/overview/about-overview-page.html

@@ -11,8 +11,9 @@
             individuals to keep track of stocks, ETFs or cryptocurrencies and
             make solid, data-driven investment decisions.</ng-container
           >
-          <ng-container i18n>
-            The source code is fully available as
+          <ng-container>&nbsp;</ng-container>
+          <ng-container i18n
+            >The source code is fully available as
             <a
               href="https://github.com/ghostfolio/ghostfolio"
               title="Find Ghostfolio on GitHub"
@@ -26,8 +27,9 @@
             ></ng-container
           >
           @if (hasPermissionForStatistics) {
-            <ng-container i18n>
-              and we share aggregated
+            <ng-container>&nbsp;</ng-container>
+            <ng-container i18n
+              >and we share aggregated
               <a title="Open Startup" [routerLink]="routerLinkOpenStartup"
                 >key metrics</a
               >

apps/client/src/app/pages/markets/markets-page-routing.module.ts

@@ -1,22 +0,0 @@
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-import { publicRoutes } from '@ghostfolio/common/routes/routes';
-
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { MarketsPageComponent } from './markets-page.component';
-
-const routes: Routes = [
-  {
-    canActivate: [AuthGuard],
-    component: MarketsPageComponent,
-    path: '',
-    title: publicRoutes.markets.title
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class MarketsPageRoutingModule {}

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

@@ -1,14 +1,17 @@
+import { HomeMarketComponent } 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, HomeMarketComponent],
   selector: 'gf-markets-page',
   styleUrls: ['./markets-page.scss'],
-  templateUrl: './markets-page.html',
-  standalone: false
+  templateUrl: './markets-page.html'
 })
-export class MarketsPageComponent implements OnDestroy {
+export class GfMarketsPageComponent implements OnDestroy {
   private unsubscribeSubject = new Subject<void>();
 
   public ngOnDestroy() {

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

@@ -1,14 +0,0 @@
-import { HomeMarketComponent } from '@ghostfolio/client/components/home-market/home-market.component';
-
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-
-import { MarketsPageRoutingModule } from './markets-page-routing.module';
-import { MarketsPageComponent } from './markets-page.component';
-
-@NgModule({
-  declarations: [MarketsPageComponent],
-  imports: [CommonModule, HomeMarketComponent, MarketsPageRoutingModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class MarketsPageModule {}

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

@@ -0,0 +1,24 @@
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+import { publicRoutes } from '@ghostfolio/common/routes/routes';
+
+import { Routes } from '@angular/router';
+
+import { GfMarketsPageComponent } from './markets-page.component';
+
+export const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    children: [
+      {
+        path: '',
+        loadComponent: () =>
+          import('./markets-page.component').then(
+            (m) => m.GfMarketsPageComponent
+          )
+      }
+    ],
+    component: GfMarketsPageComponent,
+    path: '',
+    title: publicRoutes.markets.title
+  }
+];

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts

@@ -1,5 +1,5 @@
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
-import { GfRulesModule } from '@ghostfolio/client/components/rules/rules.module';
+import { GfRulesComponent } from '@ghostfolio/client/components/rules/rules.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -26,7 +26,7 @@ import { Subject, takeUntil } from 'rxjs';
 @Component({
   imports: [
     GfPremiumIndicatorComponent,
-    GfRulesModule,
+    GfRulesComponent,
     IonIcon,
     NgClass,
     NgxSkeletonLoaderModule