Feature/migrate markets page to standalone (#5492)

* Migrate markets page to standalone

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Refactored the markets page to standalone
 - Refactored the header component to standalone
 - Refactored the rule component to standalone
 - Refactored the rules component to standalone

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/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
+  }
+];