Task/migrate app component to standalone

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

@@ -1,5 +1,3 @@
-import { GfHoldingDetailDialogComponent } from '@ghostfolio/client/components/holding-detail-dialog/holding-detail-dialog.component';
-import { HoldingDetailDialogParams } from '@ghostfolio/client/components/holding-detail-dialog/interfaces/interfaces';
 import { getCssVariable } from '@ghostfolio/common/helper';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -22,7 +20,9 @@ import {
   ActivatedRoute,
   NavigationEnd,
   PRIMARY_OUTLET,
-  Router
+  Router,
+  RouterLink,
+  RouterOutlet
 } from '@angular/router';
 import { DataSource } from '@prisma/client';
 import { addIcons } from 'ionicons';
@@ -31,6 +31,10 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
+import { GfFooterComponent } from './components/footer/footer.component';
+import { GfHeaderComponent } from './components/header/header.component';
+import { GfHoldingDetailDialogComponent } from './components/holding-detail-dialog/holding-detail-dialog.component';
+import { HoldingDetailDialogParams } from './components/holding-detail-dialog/interfaces/interfaces';
 import { NotificationService } from './core/notification/notification.service';
 import { DataService } from './services/data.service';
 import { ImpersonationStorageService } from './services/impersonation-storage.service';
@@ -42,7 +46,7 @@ import { UserService } from './services/user/user.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  standalone: false
+  imports: [RouterOutlet, RouterLink, GfHeaderComponent, GfFooterComponent]
 })
 export class AppComponent implements OnDestroy, OnInit {
   @HostBinding('class.has-info-message') get getHasMessage() {

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

@@ -1,83 +0,0 @@
-import { Platform } from '@angular/cdk/platform';
-import {
-  provideHttpClient,
-  withInterceptorsFromDi
-} from '@angular/common/http';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatChipsModule } from '@angular/material/chips';
-import {
-  DateAdapter,
-  MAT_DATE_FORMATS,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule
-} from '@angular/material/core';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ServiceWorkerModule } from '@angular/service-worker';
-import { provideIonicAngular } from '@ionic/angular/standalone';
-import { provideMarkdown } from 'ngx-markdown';
-import { provideNgxSkeletonLoader } from 'ngx-skeleton-loader';
-import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
-
-import { environment } from '../environments/environment';
-import { CustomDateAdapter } from './adapter/custom-date-adapter';
-import { DateFormats } from './adapter/date-formats';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { GfFooterComponent } from './components/footer/footer.component';
-import { GfHeaderComponent } from './components/header/header.component';
-import { authInterceptorProviders } from './core/auth.interceptor';
-import { httpResponseInterceptorProviders } from './core/http-response.interceptor';
-import { LanguageService } from './core/language.service';
-import { GfNotificationModule } from './core/notification/notification.module';
-
-export function NgxStripeFactory(): string {
-  return environment.stripePublicKey;
-}
-
-@NgModule({
-  bootstrap: [AppComponent],
-  declarations: [AppComponent],
-  imports: [
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    BrowserModule,
-    GfFooterComponent,
-    GfHeaderComponent,
-    GfNotificationModule,
-    MatAutocompleteModule,
-    MatChipsModule,
-    MatNativeDateModule,
-    MatSnackBarModule,
-    MatTooltipModule,
-    NgxStripeModule.forRoot(environment.stripePublicKey),
-    ServiceWorkerModule.register('ngsw-worker.js', {
-      enabled: environment.production,
-      registrationStrategy: 'registerImmediately'
-    })
-  ],
-  providers: [
-    authInterceptorProviders,
-    httpResponseInterceptorProviders,
-    LanguageService,
-    provideHttpClient(withInterceptorsFromDi()),
-    provideIonicAngular(),
-    provideMarkdown(),
-    provideNgxSkeletonLoader(),
-    {
-      provide: DateAdapter,
-      useClass: CustomDateAdapter,
-      deps: [LanguageService, MAT_DATE_LOCALE, Platform]
-    },
-    { provide: MAT_DATE_FORMATS, useValue: DateFormats },
-    {
-      provide: STRIPE_PUBLISHABLE_KEY,
-      useFactory: NgxStripeFactory
-    }
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule {}

apps/client/src/main.ts

@@ -2,11 +2,38 @@ import { locale } from '@ghostfolio/common/config';
 import { InfoResponse } from '@ghostfolio/common/interfaces';
 import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
 
-import { enableProdMode } from '@angular/core';
+import { Platform } from '@angular/cdk/platform';
-import { LOCALE_ID } from '@angular/core';
+import {
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+  provideHttpClient,
+  withInterceptorsFromDi
+} from '@angular/common/http';
+import { enableProdMode, importProvidersFrom, LOCALE_ID } from '@angular/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+  MatNativeDateModule
+} from '@angular/material/core';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+import { provideMarkdown } from 'ngx-markdown';
+import { provideNgxSkeletonLoader } from 'ngx-skeleton-loader';
+import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
 
-import { AppModule } from './app/app.module';
+import { CustomDateAdapter } from './app/adapter/custom-date-adapter';
+import { DateFormats } from './app/adapter/date-formats';
+import { AppRoutingModule } from './app/app-routing.module';
+import { AppComponent } from './app/app.component';
+import { authInterceptorProviders } from './app/core/auth.interceptor';
+import { httpResponseInterceptorProviders } from './app/core/http-response.interceptor';
+import { LanguageService } from './app/core/language.service';
+import { GfNotificationModule } from './app/core/notification/notification.module';
 import { environment } from './environments/environment';
 
 (async () => {
@@ -29,9 +56,41 @@ import { environment } from './environments/environment';
     enableProdMode();
   }
 
-  platformBrowserDynamic()
+  await bootstrapApplication(AppComponent, {
-    .bootstrapModule(AppModule, {
+    providers: [
-      providers: [{ provide: LOCALE_ID, useValue: locale }]
+      { provide: LOCALE_ID, useValue: locale },
-    })
+      authInterceptorProviders,
-    .catch((error) => console.error(error));
+      httpResponseInterceptorProviders,
+      LanguageService,
+      provideHttpClient(withInterceptorsFromDi()),
+      provideIonicAngular(),
+      provideMarkdown(),
+      provideNgxSkeletonLoader(),
+      {
+        provide: DateAdapter,
+        useClass: CustomDateAdapter,
+        deps: [LanguageService, MAT_DATE_LOCALE, Platform]
+      },
+      { provide: MAT_DATE_FORMATS, useValue: DateFormats },
+      {
+        provide: STRIPE_PUBLISHABLE_KEY,
+        useFactory: () => environment.stripePublicKey
+      },
+      importProvidersFrom(
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatAutocompleteModule,
+        MatChipsModule,
+        MatNativeDateModule,
+        MatSnackBarModule,
+        MatTooltipModule,
+        NgxStripeModule.forRoot(environment.stripePublicKey),
+        ServiceWorkerModule.register('ngsw-worker.js', {
+          enabled: environment.production,
+          registrationStrategy: 'registerImmediately'
+        }),
+        GfNotificationModule
+      )
+    ]
+  });
 })();