Implementing Internationalization

npm install i18next
npm install i18next-http-middleware
npm install i18next-fs-backend

import i18n from 'i18next';
import Backend from 'i18next-fs-backend';
import middleware from 'i18next-http-middleware';

i18n
  .use(Backend)
  .use(middleware.LanguageDetector)
  .init({
    fallbackLng: 'en',
    backend: {
      loadPath: './src/locales/{{lng}}.json'
    },
    detection: {
      order: ['querystring', 'cookie', 'header'],
      caches: ['cookie']
    }
  });

export default i18n;

{
  "welcome": "Welcome to our app",
  "greeting": "Hello {name}",
  "settings": "Settings"
}

{
  "welcome": "Bienvenido a nuestra aplicación",
  "greeting": "Hola {name}",
  "settings": "Configuración"
}

import { loadTranslations } from '@ionic/core';

async function initializeTranslations() {
  const translations = await loadTranslations('de');
  console.log('Loaded translations for German:', translations);
}

initializeTranslations();

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: &#x27;<h1>{{ &#x27;WELCOME_MESSAGE&#x27; | translate }}</h1>&#x27;
})
export class AppComponent {
  constructor() {}
}

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: &#x27;<p>{{ &#x27;USER_MESSAGE&#x27; | translate: {username: user.name, count: messageCount} }}</p>&#x27;
})
export class AppComponent {
  user = { name: &#x27;John&#x27; };
  messageCount = 5;
}

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {
  translate.setDefaultLang('en');
}

switchLanguage(language: string) {
  this.translate.use(language).subscribe(() => {
    console.log(`Language switched to ${language}`);
  });
}

const formatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

console.log(formatter.format(new Date('2025-04-05'))); // April 5, 2025

const formatter = new Intl.DateTimeFormat('fr-FR', {
  dateStyle: 'long',
  timeStyle: 'short'
});

console.log(formatter.format(new Date('2025-04-05T14:30:00'))); // 5 avril 2025 à 14:30

import { Component } from '@angular/core';

@Component({
  selector: 'app-currency-display',
  template: &#x27;<ion-item>
  <ion-label>Price: {{ priceFormatted }}</ion-label>
</ion-item>&#x27;
})
export class CurrencyDisplayComponent {
  price = 1234.56;

  get priceFormatted() {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD'
    }).format(this.price);
  }
}

<ion-content dir="rtl">
  <ion-text>مرحبا بالعالم</ion-text>
</ion-content>

<ion-text>
  <h2>{count, plural, one{1 item} other{# items}}</h2>
</ion-text>

{
  "i18n": {
    "lazyLoad": true,
    "translationPath": "./assets/i18n"
  }
}