Angular 17 depreciation migrations

1. Replaced deprecated control flow directives with the latest syntax.
2. Converted components to standalone, removing NgModules.
3. Updated route definitions with standalone component-based routing.
4. Optimized lazy loading using new route-based syntax.
5. Cleaned up dependencies and ensured compatibility with the latest Angular version.

client/app/main.ts

@@ -1,3 +1,14 @@
+
+
+const translationModule = TranslateModule.forRoot({
+    loader: {
+      provide: TranslateLoader,
+      useFactory: createTranslateLoader,
+      deps: [HttpClient],
+    },
+  })
+;
+
 // https://github.com/globaleaks/GlobaLeaks/issues/3277
 // Create a proxy to override localStorage methods with sessionStorage methods
 (function() {
@@ -20,8 +31,51 @@
   });
 })();
 
-import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
-import {AppModule} from "@app/app.module";
+import { ReceiptValidatorDirective } from "@app/shared/directive/receipt-validator.directive";
+import { mockEngine } from "./src/services/helper/mocks";
+import { TranslatorPipe } from "@app/shared/pipes/translate";
+import { TranslateService, TranslateModule, TranslateLoader } from "@ngx-translate/core";
+import { HTTP_INTERCEPTORS, withInterceptorsFromDi, provideHttpClient, HttpClient } from "@angular/common/http";
+import { appInterceptor, ErrorCatchingInterceptor, CompletedInterceptor } from "@app/services/root/app-interceptor.service";
+import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy, NgOptimizedImage } from "@angular/common";
+import { FlowInjectionToken, NgxFlowModule } from "@flowjs/ngx-flow";
+import { NgbDatepickerI18n, NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { CustomDatepickerI18n } from "@app/shared/services/custom-datepicker-i18n";
+import { appRoutes } from "@app/app.routes";
+import { BrowserModule, bootstrapApplication } from "@angular/platform-browser";
+import { provideAnimations } from "@angular/platform-browser/animations";
+import { NgSelectModule } from "@ng-select/ng-select";
+import { FormsModule } from "@angular/forms";
+import { NgIdleKeepaliveModule } from "@ng-idle/keepalive";
+import { MarkdownModule, MARKED_OPTIONS } from "ngx-markdown";
+import { AppComponent, createTranslateLoader } from "./src/pages/app/app.component";
+import { importProvidersFrom } from "@angular/core";
+import * as Flow from "@flowjs/flow.js";
+import {provideRouter} from "@angular/router";
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        provideRouter(appRoutes),
+        importProvidersFrom(NgbModule, BrowserModule, translationModule, NgSelectModule, FormsModule, NgIdleKeepaliveModule.forRoot(), MarkdownModule.forRoot({
+            markedOptions: {
+                provide: MARKED_OPTIONS,
+                useValue: {
+                    breaks: true
+                }
+            }
+        }), NgxFlowModule, NgOptimizedImage),
+        ReceiptValidatorDirective,
+        { provide: 'MockEngine', useValue: mockEngine },
+        TranslatorPipe, TranslateService,
+        { provide: HTTP_INTERCEPTORS, useClass: appInterceptor, multi: true },
+        { provide: APP_BASE_HREF, useValue: "/" },
+        { provide: LocationStrategy, useClass: HashLocationStrategy },
+        { provide: HTTP_INTERCEPTORS, useClass: ErrorCatchingInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: CompletedInterceptor, multi: true },
+        { provide: FlowInjectionToken, useValue: Flow },
+        { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
+        provideHttpClient(withInterceptorsFromDi()),
+        provideAnimations(),
+    ]
+})
   .catch(err => console.error(err));

client/app/src/app-guard.service.ts

@@ -1,20 +1,20 @@
-import {Injectable} from "@angular/core";
+import { Injectable, inject } from "@angular/core";
 import {Router, UrlTree} from "@angular/router";
 import {Observable} from "rxjs";
 import {AuthenticationService} from "@app/services/helper/authentication.service";
 import {AppDataService} from "@app/app-data.service";
-import {UtilsService} from "@app/shared/services/utils.service";
 
 @Injectable({
   providedIn: "root"
 })
 export class SessionGuard {
-  constructor(private router: Router, private appDataService: AppDataService, public authenticationService: AuthenticationService, protected utilsService: UtilsService) {
-  }
+  private router = inject(Router);
+  private appDataService = inject(AppDataService);
+  authenticationService = inject(AuthenticationService);
 
   canActivate(): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if (!this.authenticationService.session) {
-      this.utilsService.routeGuardRedirect();
+      this.router.navigateByUrl("/login").then();
       return false;
     } else {
       this.appDataService.page = this.router.url;