replace ngx-translate with transloco

use transloco as better maintained tool;

package.json

@@ -20,8 +20,7 @@
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
-    "@ngx-translate/core": "^15.0.0",
-    "@ngx-translate/http-loader": "^8.0.0",
+    "@ngneat/transloco": "^6.0.4",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -47,7 +46,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ngx-translate-testing": "^7.0.0",
     "typescript": "~5.3.2"
   }
 }

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="componentBorder">
-  <h1>{{ 'HELLO' | translate:{value: title} }}</h1>
+  <h1>{{ 'app.HELLO' | transloco:{value: title} }}</h1>
   <p>Congratulations! Your app is running. 🎉</p>
 
   <router-outlet />

src/app/app.component.spec.ts

@@ -6,18 +6,16 @@ import {
   AppComponent
 } from './app.component'
 import {
-  TranslateTestingModule
-} from 'ngx-translate-testing'
-import en from '../assets/i18n/en.json'
+  getTranslocoTestingModule
+} from '../transloco/transloco-testing'
+import en from './i18n/en.json'
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
         AppComponent,
-        TranslateTestingModule
-          .withTranslations('en', en)
-          .withDefaultLanguage('en')
+        getTranslocoTestingModule(AppComponent, en)
       ],
       providers: [{
         provide: ComponentFixtureAutoDetect,
@@ -38,9 +36,9 @@ describe('AppComponent', () => {
     expect(app.title).toEqual('contracts-angular')
   })
 
-  it('should render title', () => {
+  it('should render translated title', () => {
     const fixture = TestBed.createComponent(AppComponent)
     const compiled = fixture.nativeElement as HTMLElement
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, contracts-angular')
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, contracts-angular component en')
   })
 })

src/app/app.component.ts

@@ -5,19 +5,32 @@ import {
   RouterOutlet
 } from '@angular/router'
 import {
-  TranslateModule
-} from '@ngx-translate/core'
+  TranslocoPipe,
+  provideTranslocoScope
+} from '@ngneat/transloco'
+import {
+  getTranslocoInlineLoader
+} from '../transloco/transloco-loaders'
 
+const COMPONENT_TRANSLOCO_SCOPE = 'app'
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
     RouterOutlet,
-    TranslateModule
+    TranslocoPipe
   ],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
+  providers: [provideTranslocoScope({
+    scope: COMPONENT_TRANSLOCO_SCOPE,
+    loader: getTranslocoInlineLoader((lang: string) => () => import(`./i18n/${lang}.json`))
+  })]
 })
 export class AppComponent {
   title = 'contracts-angular'
+
+  static getTranslocoScope() {
+    return COMPONENT_TRANSLOCO_SCOPE
+  }
 }

src/app/app.config.ts

@@ -1,6 +1,6 @@
 import {
   ApplicationConfig,
-  importProvidersFrom
+  isDevMode
 } from '@angular/core'
 import {
   provideRouter
@@ -10,32 +10,31 @@ import {
   routes
 } from './app.routes'
 import {
-  TranslateLoader,
-  TranslateModule
-} from '@ngx-translate/core'
-import {
-  HttpClient,
   provideHttpClient
 } from '@angular/common/http'
 import {
-  TranslateHttpLoader
-} from '@ngx-translate/http-loader'
-
-export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http)
-}
+  TranslocoHttpLoader
+} from '../transloco/transloco-loaders'
+import {
+  provideTransloco
+} from '@ngneat/transloco'
+import {
+  DEFAULT_LANGUAGE,
+  SUPPORTED_LANGUAGES
+} from '../transloco/transloco-languages'
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
     provideHttpClient(),
-    importProvidersFrom(TranslateModule.forRoot({
-      defaultLanguage: 'en',
-      loader: {
-        provide: TranslateLoader,
-        useFactory: HttpLoaderFactory,
-        deps: [HttpClient]
-      }
-    }))
+    provideTransloco({
+      config: {
+        availableLangs: SUPPORTED_LANGUAGES,
+        defaultLang: DEFAULT_LANGUAGE,
+        reRenderOnLangChange: false,
+        prodMode: !isDevMode()
+      },
+      loader: TranslocoHttpLoader
+    })
   ]
 }

src/app/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "HELLO": "Hello, {{value}} component en"
+}

src/app/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "HELLO": "Hello, {{value}} component ru"
+}

src/assets/i18n/en.json

@@ -1,3 +1 @@
-{
-    "HELLO": "Hello, {{value}}"
-}
+{}

src/assets/i18n/ru.json

@@ -0,0 +1 @@
+{}

src/transloco/transloco-interfaces.ts

@@ -0,0 +1,3 @@
+export interface TranslocoLocalScope {
+  getTranslocoScope: () => string
+}

src/transloco/transloco-languages.ts

@@ -0,0 +1,5 @@
+export const SUPPORTED_LANGUAGES = [
+  'en',
+  'ru'
+]
+export const DEFAULT_LANGUAGE = SUPPORTED_LANGUAGES[0]

src/transloco/transloco-loaders.ts

@@ -0,0 +1,32 @@
+import {
+  Injectable
+} from '@angular/core'
+import {
+  InlineLoader,
+  Translation,
+  TranslocoLoader
+} from '@ngneat/transloco'
+import {
+  HttpClient
+} from '@angular/common/http'
+import {
+  SUPPORTED_LANGUAGES
+} from './transloco-languages'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslocoHttpLoader implements TranslocoLoader {
+  constructor(private http: HttpClient) {}
+
+  getTranslation(lang: string) {
+    return this.http.get<Translation>(`/assets/i18n/${lang}.json`)
+  }
+}
+
+export function getTranslocoInlineLoader(getLanguageLoader: (lang: string) => (() => Promise<Translation>)) {
+  return SUPPORTED_LANGUAGES.reduce<InlineLoader>((acc: InlineLoader, lang: string) => {
+    acc[lang] = getLanguageLoader(lang)
+    return acc
+  }, {} as InlineLoader)
+}

src/transloco/transloco-testing.ts

@@ -0,0 +1,22 @@
+import {
+  Translation,
+  TranslocoTestingModule
+} from '@ngneat/transloco'
+import {
+  TranslocoLocalScope
+} from './transloco-interfaces'
+
+export function getTranslocoTestingModule(componentClass: TranslocoLocalScope, translations: Translation) {
+  const testingLang = 'en'
+  const scope = componentClass.getTranslocoScope()
+  return TranslocoTestingModule.forRoot({
+    langs: {
+      [`${scope}/${testingLang}`]: translations
+    },
+    translocoConfig: {
+      defaultLang: testingLang,
+      availableLangs: [testingLang]
+    },
+    preloadLangs: true
+  })
+}