Task/refactor landing page to standalone (#5400)

* Refactor landing page to standalone

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Refactored the dialog footer component to standalone
 - Refactored the dialog header component to standalone
+- Refactored the landing page to standalone
 - Refactored the register page to standalone
 - Migrated the login with access token dialog from `ngModel` to form control
 - Upgraded `prisma` from version `6.12.0` to `6.14.0`

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

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

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

@@ -1,16 +0,0 @@
-import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
-
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { LandingPageComponent } from './landing-page.component';
-
-const routes: Routes = [
-  { path: '', component: LandingPageComponent, canActivate: [AuthGuard] }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
-})
-export class LandingPageRoutingModule {}

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

@@ -1,21 +1,46 @@
+import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Statistics } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
+import { GfCarouselComponent } from '@ghostfolio/ui/carousel';
+import { GfLogoComponent } from '@ghostfolio/ui/logo';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
+import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { format } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  cloudDownloadOutline,
+  peopleOutline,
+  starOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
 @Component({
   host: { class: 'page' },
+  imports: [
+    CommonModule,
+    GfCarouselComponent,
+    GfLogoComponent,
+    GfValueComponent,
+    GfWorldMapChartModule,
+    IonIcon,
+    MatButtonModule,
+    MatCardModule,
+    RouterModule
+  ],
   selector: 'gf-landing-page',
   styleUrls: ['./landing-page.scss'],
-  templateUrl: './landing-page.html',
-  standalone: false
+  templateUrl: './landing-page.html'
 })
-export class LandingPageComponent implements OnDestroy, OnInit {
+export class GfLandingPageComponent implements OnDestroy, OnInit {
   public countriesOfSubscribersMap: {
     [code: string]: { value: number };
   } = {};
@@ -118,6 +143,12 @@ export class LandingPageComponent implements OnDestroy, OnInit {
     );
 
     this.statistics = statistics;
+
+    addIcons({
+      cloudDownloadOutline,
+      peopleOutline,
+      starOutline
+    });
   }
 
   public ngOnInit() {

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

@@ -1,30 +0,0 @@
-import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
-import { GfCarouselComponent } from '@ghostfolio/ui/carousel';
-import { GfLogoComponent } from '@ghostfolio/ui/logo';
-import { GfValueComponent } from '@ghostfolio/ui/value';
-
-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 { RouterModule } from '@angular/router';
-
-import { LandingPageRoutingModule } from './landing-page-routing.module';
-import { LandingPageComponent } from './landing-page.component';
-
-@NgModule({
-  declarations: [LandingPageComponent],
-  imports: [
-    CommonModule,
-    GfCarouselComponent,
-    GfLogoComponent,
-    GfValueComponent,
-    GfWorldMapChartModule,
-    LandingPageRoutingModule,
-    MatButtonModule,
-    MatCardModule,
-    RouterModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class LandingPageModule {}

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

@@ -0,0 +1,15 @@
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+import { publicRoutes } from '@ghostfolio/common/routes/routes';
+
+import { Routes } from '@angular/router';
+
+import { GfLandingPageComponent } from './landing-page.component';
+
+export const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: GfLandingPageComponent,
+    path: '',
+    title: publicRoutes.register.title
+  }
+];