Updated transloco and moved its configuration to standalone

package.json

@@ -24,7 +24,7 @@
         "@angular/platform-browser": "17.0.3",
         "@angular/platform-browser-dynamic": "17.0.3",
         "@angular/router": "17.0.3",
-        "@ngneat/transloco": "4.2.7",
+        "@ngneat/transloco": "6.0.0",
         "apexcharts": "3.40.0",
         "crypto-js": "3.3.0",
         "highlight.js": "11.8.0",

src/app/app.config.ts

@@ -1,15 +1,17 @@
 import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig } from '@angular/core';
+import { APP_INITIALIZER, ApplicationConfig, inject } from '@angular/core';
 import { LuxonDateAdapter } from '@angular/material-luxon-adapter';
 import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { PreloadAllModules, provideRouter, withInMemoryScrolling, withPreloading } from '@angular/router';
 import { provideFuse } from '@fuse';
+import { provideTransloco, TranslocoService } from '@ngneat/transloco';
+import { firstValueFrom } from 'rxjs';
 import { appRoutes } from 'app/app.routes';
 import { provideAuth } from 'app/core/auth/auth.provider';
 import { provideIcons } from 'app/core/icons/icons.provider';
-import { provideTransloco } from 'app/core/transloco/transloco.provider';
 import { mockApiServices } from 'app/mock-api';
+import { TranslocoHttpLoader } from './core/transloco/transloco.http-loader';
 
 export const appConfig: ApplicationConfig = {
     providers: [
@@ -41,7 +43,38 @@ export const appConfig: ApplicationConfig = {
         },
 
         // Transloco Config
-        provideTransloco(),
+        provideTransloco({
+            config: {
+                availableLangs      : [
+                    {
+                        id   : 'en',
+                        label: 'English',
+                    },
+                    {
+                        id   : 'tr',
+                        label: 'Turkish',
+                    },
+                ],
+                defaultLang         : 'en',
+                fallbackLang        : 'en',
+                reRenderOnLangChange: true,
+                prodMode            : true,
+            },
+            loader: TranslocoHttpLoader,
+        }),
+        {
+            // Preload the default language before the app starts to prevent empty/jumping content
+            provide   : APP_INITIALIZER,
+            useFactory: () =>
+            {
+                const translocoService = inject(TranslocoService);
+                const defaultLang = translocoService.getDefaultLang();
+                translocoService.setActiveLang(defaultLang);
+
+                return () => firstValueFrom(translocoService.load(defaultLang));
+            },
+            multi     : true,
+        },
 
         // Fuse
         provideAuth(),

src/app/core/transloco/transloco.http-loader.ts

@@ -1,18 +1,12 @@
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Translation, TranslocoLoader } from '@ngneat/transloco';
 import { Observable } from 'rxjs';
 
 @Injectable({providedIn: 'root'})
 export class TranslocoHttpLoader implements TranslocoLoader
 {
-    /**
+    private _httpClient = inject(HttpClient);
-     * Constructor
-     */
-    constructor(
-        private _httpClient: HttpClient)
-    {
-    }
 
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods

src/app/core/transloco/transloco.provider.ts

@@ -1,48 +0,0 @@
-import { APP_INITIALIZER, EnvironmentProviders, importProvidersFrom, inject, Provider } from '@angular/core';
-import { TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
-
-export const provideTransloco = (): Array<Provider | EnvironmentProviders> =>
-{
-    return [
-        importProvidersFrom(TranslocoModule),
-        {
-            // Provide the default Transloco configuration
-            provide : TRANSLOCO_CONFIG,
-            useValue: translocoConfig({
-                availableLangs      : [
-                    {
-                        id   : 'en',
-                        label: 'English',
-                    },
-                    {
-                        id   : 'tr',
-                        label: 'Turkish',
-                    },
-                ],
-                defaultLang         : 'en',
-                fallbackLang        : 'en',
-                reRenderOnLangChange: true,
-                prodMode            : true,
-            }),
-        },
-        {
-            // Provide the default Transloco loader
-            provide : TRANSLOCO_LOADER,
-            useClass: TranslocoHttpLoader,
-        },
-        {
-            // Preload the default language before the app starts to prevent empty/jumping content
-            provide   : APP_INITIALIZER,
-            useFactory: () =>
-            {
-                const translocoService = inject(TranslocoService);
-                const defaultLang = translocoService.getDefaultLang();
-                translocoService.setActiveLang(defaultLang);
-
-                return () => translocoService.load(defaultLang).toPromise();
-            },
-            multi     : true,
-        },
-    ];
-};