refactor: improved TranslateHttpLoader config

Author: CodeAndWeb

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

@@ -2,10 +2,10 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from "@a
 import { HttpTestingController, provideHttpClientTesting } from "@angular/common/http/testing";
 import { TestBed } from "@angular/core/testing";
 import { provideTranslateService, TranslateService, Translation } from "@ngx-translate/core";
-import { provideTranslateHttpLoaderFromHttpBackend, TranslateHttpLoader } from "../public-api";
+import { provideTranslateHttpLoader, TranslateHttpLoader } from "../public-api";
 import { MarkerInterceptor } from "../test-helper/marker-interceptor";
 
-describe("TranslateLoader (HttpBackend)", () => {
+describe("TranslateHttpLoader (HttpBackend)", () => {
     let translate: TranslateService;
     let http: HttpTestingController;
 
@@ -20,9 +20,10 @@ describe("TranslateLoader (HttpBackend)", () => {
                 },
                 provideHttpClient(withInterceptorsFromDi()),
                 provideHttpClientTesting(),
-                TranslateService,
                 provideTranslateService(),
-                provideTranslateHttpLoaderFromHttpBackend(),
+                provideTranslateHttpLoader({
+                    useHttpBackend: true,
+                }),
             ],
         });
 

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

@@ -2,14 +2,18 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from "@a
 import { HttpTestingController, provideHttpClientTesting } from "@angular/common/http/testing";
 import { TestBed } from "@angular/core/testing";
 import { provideTranslateService, TranslateService, Translation } from "@ngx-translate/core";
-import { provideTranslateHttpLoader, TranslateHttpLoader } from "../public-api";
+import {
+    provideTranslateHttpLoader,
+    TranslateHttpLoader,
+    TranslateHttpLoaderConfig,
+} from "../public-api";
 import { MarkerInterceptor } from "../test-helper/marker-interceptor";
 
-describe("TranslateLoader (HttpClient)", () => {
+describe("TranslateHttpLoader (HttpClient)", () => {
     let translate: TranslateService;
     let http: HttpTestingController;
 
-    beforeEach(() => {
+    const prepare = (config: Partial<TranslateHttpLoaderConfig> = {}) => {
         TestBed.configureTestingModule({
             providers: [
                 MarkerInterceptor,
@@ -20,27 +24,54 @@ describe("TranslateLoader (HttpClient)", () => {
                 },
                 provideHttpClient(withInterceptorsFromDi()),
                 provideHttpClientTesting(),
-                TranslateService,
-                provideTranslateHttpLoader(),
                 provideTranslateService(),
+                provideTranslateHttpLoader(config),
             ],
         });
 
         translate = TestBed.inject(TranslateService);
         http = TestBed.inject(HttpTestingController);
-    });
+    };
 
     afterEach(() => {
         http.verify();
     });
 
     it("should be able to provide TranslateHttpLoader", () => {
+        prepare();
         expect(TranslateHttpLoader).toBeDefined();
         expect(translate.currentLoader).toBeDefined();
         expect(translate.currentLoader instanceof TranslateHttpLoader).toBeTruthy();
     });
 
+    describe("Config", () => {
+        it("uses prefix", () => {
+            prepare({ prefix: "XXXX/" });
+            translate.use("en");
+            http.expectOne("XXXX/en.json").flush({});
+            expect(true).toBeTruthy(); // http.expectOne() is not detected by jasmine...
+        });
+
+        it("uses suffix", () => {
+            prepare({ suffix: ".XXXX" });
+            translate.use("en");
+            http.expectOne("/assets/i18n/en.XXXX").flush({});
+            expect(true).toBeTruthy(); // http.expectOne() is not detected by jasmine...
+        });
+
+        it("uses cache buster", () => {
+            prepare({ enforceLoading: true });
+            translate.use("en");
+            http.expectOne((req) =>
+                req.url.startsWith("/assets/i18n/en.json?enforceLoading="),
+            ).flush({});
+            expect(true).toBeTruthy(); // http.expectOne() is not detected by jasmine...
+        });
+    });
+
     it("should be able to get translations", () => {
+        prepare();
+
         translate.use("en");
 
         // this will request the translation from the backend because we use a static files loader for TranslateService
@@ -61,6 +92,8 @@ describe("TranslateLoader (HttpClient)", () => {
     });
 
     it("should trigger MarkerInterceptor when loading translations", () => {
+        prepare();
+
         translate.use("en").subscribe();
 
         const req = http.expectOne("/assets/i18n/en.json");
@@ -70,6 +103,8 @@ describe("TranslateLoader (HttpClient)", () => {
     });
 
     it("should be able to reload a lang", () => {
+        prepare();
+
         translate.use("en");
 
         // this will request the translation from the backend because we use a static files loader for TranslateService
@@ -89,6 +124,8 @@ describe("TranslateLoader (HttpClient)", () => {
     });
 
     it("should be able to reset a lang", (done: DoneFn) => {
+        prepare();
+
         translate.use("en");
         spyOn(http, "expectOne").and.callThrough();
 

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

@@ -4,96 +4,61 @@ import { TranslateLoader, TranslationObject } from "@ngx-translate/core";
 import { Observable } from "rxjs";
 
 export interface TranslateHttpLoaderConfig {
-    prefix?: string;
-    suffix?: string;
-    enforceLoading?: boolean;
+    prefix: string;
+    suffix: string;
+    enforceLoading: boolean;
+    useHttpBackend: boolean;
 }
 
-export const TRANSLATE_LOADER_CONFIG = new InjectionToken<TranslateHttpLoaderConfig>(
-    "TRANSLATE_LOADER_CONFIG",
+export const TRANSLATE_HTTP_LOADER_CONFIG = new InjectionToken<Partial<TranslateHttpLoaderConfig>>(
+    "TRANSLATE_HTTP_LOADER_CONFIG",
 );
 
 @Injectable()
 export class TranslateHttpLoader implements TranslateLoader {
     private http: HttpClient = inject(HttpClient);
+    private config: TranslateHttpLoaderConfig;
 
-    private prefix = "/assets/i18n/";
-    private suffix = ".json";
-    private enforceLoading = false;
+    constructor() {
+        this.config = {
+            prefix: "/assets/i18n/",
+            suffix: ".json",
+            enforceLoading: false,
+            useHttpBackend: false,
+            ...inject(TRANSLATE_HTTP_LOADER_CONFIG),
+        };
 
-    public setPrefix(prefix: string): void {
-        this.prefix = prefix;
-    }
-
-    public setSuffix(suffix: string): void {
-        this.suffix = suffix;
-    }
-
-    public setClient(client: HttpClient): void {
-        this.http = client;
-    }
-
-    public setEnforceLoading(enforceLoading: boolean): void {
-        this.enforceLoading = enforceLoading;
+        this.http = this.config.useHttpBackend
+            ? new HttpClient(inject(HttpBackend))
+            : inject(HttpClient);
     }
 
     /**
      * Gets the translations from the server
      */
     public getTranslation(lang: string): Observable<TranslationObject> {
-        const cacheBuster = this.enforceLoading ? `?enforceLoading=${Date.now()}` : "";
+        const cacheBuster = this.config.enforceLoading ? `?enforceLoading=${Date.now()}` : "";
 
         return this.http.get(
-            `${this.prefix}${lang}${this.suffix}${cacheBuster}`,
+            `${this.config.prefix}${lang}${this.config.suffix}${cacheBuster}`,
         ) as Observable<TranslationObject>;
     }
 }
 
-function translateLoaderFactroy(
-    client: HttpClient,
-    prefix?: string,
-    suffix?: string,
-    enforceLoading?: boolean,
-): TranslateHttpLoader {
-    const loader: TranslateHttpLoader = new TranslateHttpLoader();
-    loader.setClient(client);
-    loader.setEnforceLoading(enforceLoading ?? false);
-    loader.setPrefix(prefix ?? "/assets/i18n/");
-    loader.setSuffix(suffix ?? ".json");
-    return loader;
-}
-
 export function provideTranslateHttpLoader(
-    prefix?: string,
-    suffix?: string,
-    enforceLoading?: boolean,
-): Provider {
+    config: Partial<TranslateHttpLoaderConfig> = {},
+): Provider[] {
+    const useBackend = config.useHttpBackend ?? false;
+
     return [
         {
-            provide: TranslateLoader,
-            useFactory: () =>
-                translateLoaderFactroy(inject(HttpClient), prefix, suffix, enforceLoading),
-            deps: [HttpClient],
+            provide: TRANSLATE_HTTP_LOADER_CONFIG,
+            useValue: config,
         },
-    ];
-}
-
-export function provideTranslateHttpLoaderFromHttpBackend(
-    prefix?: string,
-    suffix?: string,
-    enforceLoading?: boolean,
-): Provider {
-    return [
         {
             provide: TranslateLoader,
-            useFactory: () =>
-                translateLoaderFactroy(
-                    new HttpClient(inject(HttpBackend)),
-                    prefix,
-                    suffix,
-                    enforceLoading,
-                ),
-            deps: [HttpBackend],
+            useClass: TranslateHttpLoader,
+            deps: [useBackend ? HttpBackend : HttpClient, TRANSLATE_HTTP_LOADER_CONFIG],
         },
     ];
 }

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

@@ -1,24 +1,20 @@
-import { HttpClient, provideHttpClient } from "@angular/common/http";
+import { provideHttpClient } from "@angular/common/http";
 import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
 import { provideRouter } from "@angular/router";
-import { TranslateLoader, provideTranslateService } from "@ngx-translate/core";
-import { TranslateHttpLoader } from "@ngx-translate/http-loader";
+import { provideTranslateService } from "@ngx-translate/core";
+import { provideTranslateHttpLoader } from "@ngx-translate/http-loader";
 import { routes } from "./app.routes";
 
-const httpLoaderFactory: (http: HttpClient) => TranslateHttpLoader = (http: HttpClient) =>
-    new TranslateHttpLoader(http, "./i18n/", ".json");
-
 export const appConfig: ApplicationConfig = {
     providers: [
         provideZoneChangeDetection({ eventCoalescing: true }),
         provideRouter(routes),
         provideHttpClient(),
-        provideTranslateService({
-            loader: {
-                provide: TranslateLoader,
-                useFactory: httpLoaderFactory,
-                deps: [HttpClient],
-            },
+        provideTranslateService(),
+        provideTranslateHttpLoader({
+            prefix: "./i18n/",
+            suffix: ".json",
+            enforceLoading: true,
         }),
     ],
 };