Feature/migrate resources page components to standalone (#5197)

* Migrate resources page components to standalone

* Update changelog

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improved the platform icon in the create or update platform dialog of the admin control
 - Localized the durations of the coupon system
+- Refactored the resources pages to standalone
 - Improved the language localization for Catalan (`ca`)
 - Improved the language localization for Dutch (`nl`)
 - Improved the language localization for Italian (`it`)

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

@@ -127,9 +127,7 @@ const routes: Routes = [
   {
     path: publicRoutes.resources.path,
     loadChildren: () =>
-      import('./pages/resources/resources-page.module').then(
+      import('./pages/resources/resources-page.routes').then((m) => m.routes)
-        (m) => m.ResourcesPageModule
-      )
   },
   {
     path: publicRoutes.start.path,

apps/client/src/app/pages/resources/glossary/resources-glossary.component.ts

@@ -4,12 +4,13 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
+  imports: [RouterModule],
   selector: 'gf-resources-glossary',
   styleUrls: ['./resources-glossary.component.scss'],
-  templateUrl: './resources-glossary.component.html',
+  templateUrl: './resources-glossary.component.html'
-  standalone: false
 })
 export class ResourcesGlossaryPageComponent implements OnInit {
   public hasPermissionForSubscription: boolean;

apps/client/src/app/pages/resources/glossary/resources-glossary.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ResourcesGlossaryRoutingModule } from './resources-glossary-routing.module';
-import { ResourcesGlossaryPageComponent } from './resources-glossary.component';
-
-@NgModule({
-  declarations: [ResourcesGlossaryPageComponent],
-  imports: [CommonModule, ResourcesGlossaryRoutingModule, RouterModule]
-})
-export class ResourcesGlossaryPageModule {}

apps/client/src/app/pages/resources/glossary/resources-glossary-routing.module.ts → apps/client/src/app/pages/resources/glossary/resources-glossary.routes.ts

@@ -1,20 +1,13 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
-import { RouterModule, Routes } from '@angular/router';
 
 import { ResourcesGlossaryPageComponent } from './resources-glossary.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     component: ResourcesGlossaryPageComponent,
     path: '',
     title: publicRoutes.resources.subRoutes.glossary.title
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ResourcesGlossaryRoutingModule {}

apps/client/src/app/pages/resources/guides/resources-guides.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
+  imports: [RouterModule],
   selector: 'gf-resources-guides',
   styleUrls: ['./resources-guides.component.scss'],
-  templateUrl: './resources-guides.component.html',
+  templateUrl: './resources-guides.component.html'
-  standalone: false
 })
 export class ResourcesGuidesComponent {}

apps/client/src/app/pages/resources/guides/resources-guides.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ResourcesGuidesRoutingModule } from './resources-guides-routing.module';
-import { ResourcesGuidesComponent } from './resources-guides.component';
-
-@NgModule({
-  declarations: [ResourcesGuidesComponent],
-  imports: [CommonModule, ResourcesGuidesRoutingModule, RouterModule]
-})
-export class ResourcesGuidesModule {}

apps/client/src/app/pages/resources/guides/resources-guides-routing.module.ts → apps/client/src/app/pages/resources/guides/resources-guides.routes.ts

@@ -1,20 +1,13 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
-import { RouterModule, Routes } from '@angular/router';
 
 import { ResourcesGuidesComponent } from './resources-guides.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     component: ResourcesGuidesComponent,
     path: '',
     title: publicRoutes.resources.subRoutes.guides.title
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ResourcesGuidesRoutingModule {}

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

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'gf-resources-markets',
   styleUrls: ['./resources-markets.component.scss'],
-  templateUrl: './resources-markets.component.html',
+  templateUrl: './resources-markets.component.html'
-  standalone: false
 })
 export class ResourcesMarketsComponent {}

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

@@ -1,11 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { ResourcesMarketsRoutingModule } from './resources-markets-routing.module';
-import { ResourcesMarketsComponent } from './resources-markets.component';
-
-@NgModule({
-  declarations: [ResourcesMarketsComponent],
-  imports: [CommonModule, ResourcesMarketsRoutingModule]
-})
-export class ResourcesMarketsModule {}

apps/client/src/app/pages/resources/markets/resources-markets-routing.module.ts → apps/client/src/app/pages/resources/markets/resources-markets.routes.ts

@@ -1,20 +1,13 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
-import { RouterModule, Routes } from '@angular/router';
 
 import { ResourcesMarketsComponent } from './resources-markets.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     component: ResourcesMarketsComponent,
     path: '',
     title: publicRoutes.resources.subRoutes.markets.title
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ResourcesMarketsRoutingModule {}

apps/client/src/app/pages/resources/overview/resources-overview-routing.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ResourcesOverviewComponent } from './resources-overview.component';
-
-const routes: Routes = [
-  {
-    component: ResourcesOverviewComponent,
-    path: ''
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ResourcesOverviewRoutingModule {}

apps/client/src/app/pages/resources/overview/resources-overview.component.ts

@@ -1,12 +1,13 @@
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
 
 @Component({
+  imports: [RouterModule],
   selector: 'gf-resources-overview',
   styleUrls: ['./resources-overview.component.scss'],
-  templateUrl: './resources-overview.component.html',
+  templateUrl: './resources-overview.component.html'
-  standalone: false
 })
 export class ResourcesOverviewComponent {
   public overviewItems = [

apps/client/src/app/pages/resources/overview/resources-overview.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
-import { ResourcesOverviewRoutingModule } from './resources-overview-routing.module';
-import { ResourcesOverviewComponent } from './resources-overview.component';
-
-@NgModule({
-  declarations: [ResourcesOverviewComponent],
-  imports: [CommonModule, ResourcesOverviewRoutingModule, RouterModule]
-})
-export class ResourcesOverviewModule {}

apps/client/src/app/pages/resources/overview/resources-overview.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { ResourcesOverviewComponent } from './resources-overview.component';
+
+export const routes: Routes = [
+  {
+    component: ResourcesOverviewComponent,
+    path: ''
+  }
+];

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.component.ts

@@ -2,16 +2,19 @@ import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools'
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnDestroy } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { chevronForwardOutline } from 'ionicons/icons';
 import { Subject } from 'rxjs';
 
 @Component({
   host: { class: 'page' },
+  imports: [IonIcon, MatCardModule, RouterModule],
   selector: 'gf-personal-finance-tools-page',
   styleUrls: ['./personal-finance-tools-page.scss'],
-  templateUrl: './personal-finance-tools-page.html',
+  templateUrl: './personal-finance-tools-page.html'
-  standalone: false
 })
 export class PersonalFinanceToolsPageComponent implements OnDestroy {
   public pathAlternativeTo =

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.module.ts

@@ -1,19 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { PersonalFinanceToolsPageRoutingModule } from './personal-finance-tools-page-routing.module';
-import { PersonalFinanceToolsPageComponent } from './personal-finance-tools-page.component';
-
-@NgModule({
-  declarations: [PersonalFinanceToolsPageComponent],
-  imports: [
-    CommonModule,
-    IonIcon,
-    MatCardModule,
-    PersonalFinanceToolsPageRoutingModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class PersonalFinanceToolsPageModule {}

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page-routing.module.ts → apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.routes.ts

@@ -2,12 +2,11 @@ import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
-import { RouterModule, Routes } from '@angular/router';
 
 import { PersonalFinanceToolsPageComponent } from './personal-finance-tools-page.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     canActivate: [AuthGuard],
     component: PersonalFinanceToolsPageComponent,
@@ -29,9 +28,3 @@ const routes: Routes = [
     };
   })
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class PersonalFinanceToolsPageRoutingModule {}

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

@@ -2,6 +2,9 @@ import { TabConfiguration } from '@ghostfolio/common/interfaces';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnInit } from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import {
   bookOutline,
@@ -14,10 +17,10 @@ import { Subject } from 'rxjs';
 
 @Component({
   host: { class: 'page has-tabs' },
+  imports: [IonIcon, MatTabsModule, RouterModule],
   selector: 'gf-resources-page',
   styleUrls: ['./resources-page.scss'],
-  templateUrl: './resources-page.html',
+  templateUrl: './resources-page.html'
-  standalone: false
 })
 export class ResourcesPageComponent implements OnInit {
   public deviceType: string;

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

@@ -1,21 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatTabsModule } from '@angular/material/tabs';
-import { RouterModule } from '@angular/router';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { ResourcesPageRoutingModule } from './resources-page-routing.module';
-import { ResourcesPageComponent } from './resources-page.component';
-
-@NgModule({
-  declarations: [ResourcesPageComponent],
-  imports: [
-    CommonModule,
-    IonIcon,
-    MatTabsModule,
-    ResourcesPageRoutingModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class ResourcesPageModule {}

apps/client/src/app/pages/resources/resources-page-routing.module.ts → apps/client/src/app/pages/resources/resources-page.routes.ts

@@ -1,12 +1,11 @@
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
-import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
-import { RouterModule, Routes } from '@angular/router';
 
 import { ResourcesPageComponent } from './resources-page.component';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     canActivate: [AuthGuard],
     component: ResourcesPageComponent,
@@ -14,46 +13,32 @@ const routes: Routes = [
       {
         path: '',
         loadChildren: () =>
-          import('./overview/resources-overview.module').then(
+          import('./overview/resources-overview.routes').then((m) => m.routes)
-            (m) => m.ResourcesOverviewModule
-          )
       },
       {
         path: publicRoutes.resources.subRoutes.glossary.path,
         loadChildren: () =>
-          import('./glossary/resources-glossary.module').then(
+          import('./glossary/resources-glossary.routes').then((m) => m.routes)
-            (m) => m.ResourcesGlossaryPageModule
-          )
       },
       {
         path: publicRoutes.resources.subRoutes.guides.path,
         loadChildren: () =>
-          import('./guides/resources-guides.module').then(
+          import('./guides/resources-guides.routes').then((m) => m.routes)
-            (m) => m.ResourcesGuidesModule
-          )
       },
       {
         path: publicRoutes.resources.subRoutes.markets.path,
         loadChildren: () =>
-          import('./markets/resources-markets.module').then(
+          import('./markets/resources-markets.routes').then((m) => m.routes)
-            (m) => m.ResourcesMarketsModule
-          )
       },
       {
         path: publicRoutes.resources.subRoutes.personalFinanceTools.path,
         loadChildren: () =>
           import(
-            './personal-finance-tools/personal-finance-tools-page.module'
+            './personal-finance-tools/personal-finance-tools-page.routes'
-          ).then((m) => m.PersonalFinanceToolsPageModule)
+          ).then((m) => m.routes)
       }
     ],
     path: '',
     title: publicRoutes.resources.title
   }
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class ResourcesPageRoutingModule {}