Merge pull request #1596 from ngx-translate/1585-fixprovidechildtranslateservice-not-calling-the-loader-when-the-lazy-loaded-module-is-first-loaded

feat(store): loaders

Author: CodeAndWeb

projects/ngx-translate/src/lib/translate.service.ts

@@ -1,12 +1,12 @@
-import { inject, Injectable, InjectionToken } from "@angular/core";
+import { inject, Injectable, InjectionToken, OnDestroy } from "@angular/core";
 import { concat, defer, forkJoin, isObservable, Observable, of } from "rxjs";
 import { concatMap, map, shareReplay, switchMap, take } from "rxjs/operators";
 import { MissingTranslationHandler } from "./missing-translation-handler";
 import { TranslateCompiler } from "./translate.compiler";
 import { TranslateLoader } from "./translate.loader";
 import { InterpolateFunction, TranslateParser } from "./translate.parser";
 import { TranslateStore } from "./translate.store";
-import { insertValue, isArray, isDefinedAndNotNull, isDict, isString } from "./util";
+import { insertValue, isArray, isDefinedAndNotNull, isDict, isString, mergeDeep } from "./util";
 
 /**
  * Configuration object for the translation service.
@@ -173,7 +173,7 @@ export abstract class ITranslateService {
 }
 
 @Injectable()
-export class TranslateService implements ITranslateService {
+export class TranslateService implements ITranslateService, OnDestroy {
     private loadingTranslations!: Observable<InterpolatableTranslationObject>;
     private pending = false;
     private _translationRequests: Record<Language, Observable<TranslationObject>> = {};
@@ -245,6 +245,12 @@ export class TranslateService implements ITranslateService {
         if (config.extend) {
             this.extend = true;
         }
+
+        this.store.addLoader(this.currentLoader);
+    }
+
+    ngOnDestroy(): void {
+        this.store.removeLoader(this.currentLoader);
     }
 
     /**
@@ -341,11 +347,25 @@ export class TranslateService implements ITranslateService {
     ): Observable<InterpolatableTranslationObject> {
         this.pending = true;
 
-        const loadingTranslations = this.currentLoader
-            .getTranslation(lang)
-            .pipe(shareReplay(1), take(1));
+        const loaders = this.store.getLoaders();
+        let loadAndMerge: Observable<TranslationObject>;
+
+        if (loaders.length === 0) {
+            return of({} as InterpolatableTranslationObject);
+        } else if (loaders.length === 1) {
+            loadAndMerge = loaders[0].getTranslation(lang);
+        } else {
+            const requests: Observable<TranslationObject>[] = loaders.map((loader) =>
+                loader.getTranslation(lang).pipe(take(1)),
+            );
+            loadAndMerge = forkJoin(requests).pipe(
+                map((results: TranslationObject[]) =>
+                    results.reduce((acc, curr) => mergeDeep(acc, curr), {} as TranslationObject),
+                ),
+            );
+        }
 
-        this.loadingTranslations = loadingTranslations.pipe(
+        this.loadingTranslations = loadAndMerge.pipe(shareReplay(1), take(1)).pipe(
             map((res: TranslationObject) => this.compiler.compileTranslations(res, lang)),
             shareReplay(1),
             take(1),
@@ -362,7 +382,7 @@ export class TranslateService implements ITranslateService {
             },
         });
 
-        return loadingTranslations;
+        return this.loadingTranslations;
     }
 
     /**

projects/ngx-translate/src/lib/translate.store.ts

@@ -9,11 +9,17 @@ import {
     TranslationChangeEvent,
 } from "./translate.service";
 import { getValue, mergeDeep } from "./util";
+import { TranslateLoader } from "./translate.loader";
 
 export type DeepReadonly<T> = {
     readonly [K in keyof T]: T[K] extends object ? DeepReadonly<T[K]> : T[K];
 };
 
+interface LoaderReference {
+    loader: TranslateLoader;
+    count: number;
+}
+
 @Injectable()
 export class TranslateStore {
     private _onTranslationChange: Subject<TranslationChangeEvent> =
@@ -28,6 +34,35 @@ export class TranslateStore {
     private translations: Record<Language, InterpolatableTranslationObject> = {};
     private languages: Language[] = [];
 
+    private loaders: LoaderReference[] = [];
+
+    public addLoader(loader: TranslateLoader): void {
+        const existingLoader = this.getLoaderRef(loader);
+        if (existingLoader) {
+            existingLoader.count++;
+        } else {
+            this.loaders.push({ loader, count: 1 });
+        }
+    }
+
+    public removeLoader(loader: TranslateLoader): void {
+        const existingLoader = this.getLoaderRef(loader);
+        if (existingLoader) {
+            existingLoader.count--;
+            if (existingLoader.count === 0) {
+                this.loaders = this.loaders.filter((ref) => ref.loader !== loader);
+            }
+        }
+    }
+
+    private getLoaderRef(loader: TranslateLoader): LoaderReference | undefined {
+        return this.loaders.find((ref) => ref.loader === loader);
+    }
+
+    public getLoaders(): TranslateLoader[] {
+        return this.loaders.map((ref) => ref.loader);
+    }
+
     public getTranslations(language: Language): DeepReadonly<InterpolatableTranslationObject> {
         return this.translations[language];
     }