Get bookings translations working again

Author: xkons

angular.json

@@ -74,7 +74,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "train-platform:build"
+            "browserTarget": "train-platform:build",
+            "proxyConfig": "proxy.conf.json"
           },
           "configurations": {
             "production": {

projects/bookings/src/app/booking.module.ts

@@ -1,4 +1,5 @@
 import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -7,11 +8,13 @@ import { HotToastModule } from '@ngneat/hot-toast';
 import { TranslateModule } from '@ngx-translate/core';
 import { BookingFormComponent } from './booking-form/booking-form.component';
 import { BookingComponent } from './booking.component';
+import { TranslationLoaderProvider } from './translation-loader.provider';
 
 @NgModule({
   declarations: [BookingComponent, BookingFormComponent],
   imports: [
     BrowserModule,
+    HttpClientModule,
     CommonModule,
     FormsModule,
     RouterModule.forRoot([
@@ -22,7 +25,10 @@ import { BookingComponent } from './booking.component';
       },
     ]),
     HotToastModule.forRoot(),
-    TranslateModule.forRoot(),
+    TranslateModule.forRoot({
+      loader: TranslationLoaderProvider,
+      defaultLanguage: 'en',
+    }),
   ],
   exports: [BookingComponent],
 })

projects/bookings/src/app/translation-loader.provider.ts

@@ -0,0 +1,21 @@
+import { HttpClient } from '@angular/common/http';
+import { TranslateLoader } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { environment } from '../environments/environment';
+
+export type Language = 'en' | 'de';
+
+class TranslateHttpLoader implements TranslateLoader {
+  constructor(private http: HttpClient) {}
+  getTranslation(language: Language): Observable<any> {
+    const cacheBusting = new Date().getTime();
+    const path = `${environment.assetUrl}/assets/i18n/${language}.json?t=${cacheBusting}`;
+    return this.http.get(path);
+  }
+}
+
+export const TranslationLoaderProvider = {
+  provide: TranslateLoader,
+  useFactory: (http: HttpClient) => new TranslateHttpLoader(http),
+  deps: [HttpClient],
+};

projects/bookings/src/assets/i18n/de.json

@@ -0,0 +1,10 @@
+{
+  "booking": {
+    "title": "Reise {{ id }} buchen",
+    "reserveSeatQuestion": "Möchten Sie einen Sitzplatz reservieren?",
+    "firstClassQuestion": "Möchten Sie in der ersten Klasse sitzen?",
+    "bookAction": "Buchen",
+    "confirmation": "Reise gebucht!",
+    "error": "Reise konnte nicht gebucht werden!"
+  }
+}

projects/bookings/src/assets/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "booking": {
+    "title": "Book journey {{ id }}",
+    "reserveSeatQuestion": "Do you want to reserve a seat?",
+    "firstClassQuestion": "Do you want to sit in first class?",
+    "bookAction": "Book",
+    "confirmation": "Booked a journey!",
+    "error": "Journey could not be booked!"
+  }
+}

projects/bookings/src/environments/environment.local-web-components.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: false,
   embedded: true,
+  assetUrl: '/frontends/bookings',
 };

projects/bookings/src/environments/environment.prod.ts

@@ -1,4 +1,5 @@
 export const environment = {
   production: true,
   embedded: true,
+  assetUrl: '/frontends/bookings',
 };

projects/bookings/src/environments/environment.ts

@@ -5,6 +5,7 @@
 export const environment = {
   production: false,
   embedded: false,
+  assetUrl: '',
 };
 
 /*

projects/train-platform/src/assets/i18n/de.json

@@ -12,14 +12,6 @@
       "dark": "Dunkel"
     }
   },
-  "booking": {
-    "title": "Reise {{ id }} buchen",
-    "reserveSeatQuestion": "Möchten Sie einen Sitzplatz reservieren?",
-    "firstClassQuestion": "Möchten Sie in der ersten Klasse sitzen?",
-    "bookAction": "Buchen",
-    "confirmation": "Reise gebucht!",
-    "error": "Reise konnte nicht gebucht werden!"
-  },
   "journey": {
     "bookAction": "Buchen"
   }

projects/train-platform/src/assets/i18n/en.json

@@ -12,14 +12,6 @@
       "dark": "Dark"
     }
   },
-  "booking": {
-    "title": "Book journey {{ id }}",
-    "reserveSeatQuestion": "Do you want to reserve a seat?",
-    "firstClassQuestion": "Do you want to sit in first class?",
-    "bookAction": "Book",
-    "confirmation": "Booked a journey!",
-    "error": "Journey could not be booked!"
-  },
   "journey": {
     "bookAction": "Book"
   }