Added APP_INITIALIZER to config and translations from server before a…

…pp is bootstrapped

client/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { DoBootstrap, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
@@ -15,6 +15,13 @@ import { CallingModule } from './calling/calling.module';
 import { RetryInterceptor } from './common/interceptors/retry.interceptor';
 import { TimeoutInterceptor } from './common/interceptors/timeout.interceptor';
 import { AuthInterceptor } from './common/interceptors/auth.interceptor';
+import { ApiService } from './api/services';
+import { ConfigService } from './services/config/config.service';
+import { AppInitializationService } from './services/app-initialization/app-initialization.service';
+
+function initializeApp(appInitializationService: AppInitializationService) {
+  return appInitializationService.initialize()
+}
 
 @NgModule({
   declarations: [
@@ -35,6 +42,7 @@ import { AuthInterceptor } from './common/interceptors/auth.interceptor';
     { provide: HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: RetryInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true },
+    { provide: APP_INITIALIZER, useFactory: (i: AppInitializationService) => initializeApp(i), deps: [ AppInitializationService ] }
   ],
   bootstrap: [],
 })
@@ -46,3 +54,5 @@ export class AppModule implements DoBootstrap {
     customElements.define('dear-mep', app);
   }
 }
+
+

client/src/app/services/app-initialization/app-initialization.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AppInitializationService } from './app-initialization.service';
+
+describe('AppInitializationService', () => {
+  let service: AppInitializationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AppInitializationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

client/src/app/services/app-initialization/app-initialization.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { ApiService } from 'src/app/api/services';
+import { LocalStorageService } from '../local-storage/local-storage.service';
+import { Observable, firstValueFrom, shareReplay } from 'rxjs';
+import { FrontendSetupResponse } from 'src/app/api/models';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppInitializationService {
+  private serverConfig?: Observable<FrontendSetupResponse>
+
+  // Note: This service should depend on as few services as possible as it is used early in the bootstrap process
+  constructor(
+    private readonly apiService: ApiService,
+    private readonly localStorageService: LocalStorageService,
+  ) { }
+
+  public async initialize(): Promise<void> {
+    const userSelectedLanguage = this.getSelectedLanguage()
+
+    this.serverConfig = this.apiService.getFrontendSetup({
+      frontend_strings: true,
+      "accept-language": userSelectedLanguage,
+    }).pipe(
+      shareReplay(),
+    )
+
+    await firstValueFrom(this.serverConfig)
+}
+
+  private getSelectedLanguage(): string | undefined {
+    return this.localStorageService.getString("language") || undefined
+  }
+}