feat(http-loader): ressources

Author: rbalet

projects/http-loader/src/lib/http-loader.ts

@@ -1,11 +1,17 @@
 import { HttpBackend, HttpClient } from "@angular/common/http";
 import { inject, Injectable, InjectionToken, Provider } from "@angular/core";
-import { TranslateLoader, TranslationObject } from "@ngx-translate/core";
-import { Observable } from "rxjs";
+import { mergeDeep, TranslateLoader, TranslationObject } from "@ngx-translate/core";
+import { forkJoin, map, Observable } from "rxjs";
+
+export interface TranslateHttpLoaderResource {
+    prefix: string;
+    suffix?: string;
+}
 
 export interface TranslateHttpLoaderConfig {
     prefix: string;
     suffix: string;
+    ressources: (string | TranslateHttpLoaderResource)[];
     enforceLoading: boolean;
     useHttpBackend: boolean;
 }
@@ -23,6 +29,7 @@ export class TranslateHttpLoader implements TranslateLoader {
         this.config = {
             prefix: "/assets/i18n/",
             suffix: ".json",
+            ressources: [],
             enforceLoading: false,
             useHttpBackend: false,
             ...inject(TRANSLATE_HTTP_LOADER_CONFIG),
@@ -39,9 +46,24 @@ export class TranslateHttpLoader implements TranslateLoader {
     public getTranslation(lang: string): Observable<TranslationObject> {
         const cacheBuster = this.config.enforceLoading ? `?enforceLoading=${Date.now()}` : "";
 
-        return this.http.get(
+        if (this.config.ressources.length > 0) {
+            const requests = this.config.ressources.map((resource) => {
+                let path: string;
+
+                if (typeof resource === "string") path = `${resource}${lang}.json`;
+                else path = `${resource.prefix}${lang}${resource.suffix ?? ".json"}`;
+
+                return this.http.get(`${path}${cacheBuster}`);
+            }) as Observable<TranslationObject>[];
+
+            return forkJoin(requests).pipe(
+                map((response) => response.reduce((acc, curr) => mergeDeep(acc, curr), {})),
+            ) as Observable<TranslationObject>;
+        }
+
+        return this.http.get<TranslationObject>(
             `${this.config.prefix}${lang}${this.config.suffix}${cacheBuster}`,
-        ) as Observable<TranslationObject>;
+        );
     }
 }
 

projects/test-app/public/i18n/another/de.json

@@ -0,0 +1,5 @@
+{
+  "multi": {
+    "loader": "Dieser Text wurde aus /i18n/another/de.json geladen"
+  }
+}

projects/test-app/public/i18n/another/en.json

@@ -0,0 +1,5 @@
+{
+  "multi": {
+    "loader": "This text was loaded from /i18n/another/en.json"
+  }
+}

projects/test-app/src/app/app.config.ts

@@ -15,6 +15,7 @@ export const appConfig: ApplicationConfig = {
                 prefix: "./i18n/",
                 suffix: ".json",
                 enforceLoading: true,
+                ressources: [{ prefix: "./i18n/another/", suffix: ".json" }, { prefix: "./i18n/" }],
             }),
         }),
     ],

projects/test-app/src/app/components/page-content/page-content.component.html

@@ -1,5 +1,7 @@
 <div class="title">
-    <h1>{{ "demo.title" | translate }}</h1>
+    <h1>
+        {{ "demo.title" | translate }}
+    </h1>
 </div>
 <div>
     <h2>Simple translations without parameters</h2>
@@ -10,3 +12,8 @@ <h2>Simple translations without parameters</h2>
 </div>
 
 <app-standalone-component />
+
+<div class="multi-loader">
+    <h2>Http-loader: Ressources</h2>
+    <p>{{ "multi.loader" | translate }}</p>
+</div>

projects/test-app/src/styles.scss

@@ -66,6 +66,10 @@ p,
         background-color: var(--mat-sys-surface-dim);
         border-radius: var(--mat-sys-corner-small);
         padding: var(--space) var(--space-small);
+
+        em {
+            font-size: small;
+        }
     }
 }