UI: Transloco configuration is missing a fallback language

The solution to fix that is issue is to return an empty translation list in case of an error. In this way, Transloco will not translate anything (the UI will be in english), but it will not fail either. Fixes: https://github.com/aquarist-labs/s3gw/issues/846 Signed-off-by: Volker Theile <[email protected]>
s3gw-tech · Nov 29, 2023 · 24a56d1 · 24a56d1
1 parent 1eeb0f3
commit 24a56d1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Do not escape object key in page title (aquarist-labs/s3gw#839).
+- Make sure a missing translation file does not crash the app (aquarist-labs/s3gw#846).
 
 ## [0.23.0]
 

diff --git a/src/frontend/src/app/transloco-root.module.ts b/src/frontend/src/app/transloco-root.module.ts
@@ -11,7 +11,8 @@ import {
   TranslocoModule
 } from '@ngneat/transloco';
 import * as _ from 'lodash';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
 
 import { supportedLanguages } from '~/app/i18n.helper';
 import { environment } from '~/environments/environment';
@@ -21,7 +22,13 @@ class CustomLoader implements TranslocoLoader {
   constructor(private http: HttpClient) {}
 
   public getTranslation(lang: string): Observable<Translation> {
-    return this.http.get<Translation>(`assets/i18n/${lang}.json`);
+    return this.http.get<Translation>(`assets/i18n/${lang}.json`).pipe(
+      catchError((err) => {
+        // Return an empty translation list. In this way, Transloco will
+        // not translate anything, but it will not fail either.
+        return of({});
+      })
+    );
   }
 }