Локалізація Angular: Ефективне використання i18n для json файлів

7 Березня 2024 в 21:11 44

В сучасних веб-додатках, розроблених на Angular, локалізація є важливою складовою для досягнення глобального аудиторії та забезпечення комфортного користування додатком для користувачів з різних країн та культур. Одним із найпоширеніших методів локалізації є використання механізму i18n (Internationalization) разом з форматом XLIFF (XML Localization Interchange File Format) для збереження перекладів.

Однак, коли мова йде про локалізацію Angular додатків, часто зустрічається ситуація, коли потрібно локалізувати тексти, що знаходяться в json файлах. На жаль, стандартна команда ng extract-i18n не працює з json файлами, що ускладнює процес локалізації для цього типу ресурсів.

У цій статті ми розглянемо проблему локалізації json файлів в Angular додатках та запропонуємо ефективний підхід до вирішення цієї задачі з використанням інструментів Angular та мови програмування JavaScript.

Почнемо з розгляду структури вихідного json файлу, який ми хочемо локалізувати:

[
  { "label": "First Name", "i18n-label": "@@person.firstName" },
  { "label": "Middle Name", "i18n-label": "@@person.middleName" },
  { "label": "Last Name", "i18n-label": "@@person.lastName" }
]

[

{ "label": "First Name", "i18n-label": "@@person.firstName" },

{ "label": "Middle Name", "i18n-label": "@@person.middleName" },

{ "label": "Last Name", "i18n-label": "@@person.lastName" }

]

Для локалізації цих лейблів нам потрібно перетворити їх у відповідні теги у файлі формату XLIFF. Наприклад:

<trans-unit id="person.firstName" datatype="json">
  <source>First Name</source>
  <context-group purpose="location">
    <context context-type="sourcefile">/abc.json</context>
    <context context-type="linenumber">3</context>
  </context-group>
</trans-unit>

<trans-unit id="person.firstName" datatype="json">

<source>First Name</source>

<context-group purpose="location">

</context-group>

</trans-unit>

Щоб автоматизувати цей процес та забезпечити легку роботу з локалізацією json файлів, ми можемо написати скрипт на JavaScript, який буде витягувати дані з json файлу та генерувати вихідний XLIFF файл.

Ось приклад коду для такого скрипту:

const fs = require('fs');
const jsonData = JSON.parse(fs.readFileSync('path/to/your/json/file.json', 'utf8'));
let xlfContent = '';
jsonData.forEach((item, index) => {
  xlfContent += `<trans-unit id="${item['i18n-label']}" datatype="json">
    <source>${item.label}</source>
    <context-group purpose="location">
      <context context-type="sourcefile">/your/json/file.json</context>
      <context context-type="linenumber">${index + 1}</context>
    </context-group>
  </trans-unit>\n`;
});
fs.writeFileSync('path/to/your/output/message.xlf', xlfContent, 'utf8');
console.log('XLIFF file generated successfully!');

const fs = require('fs');

const jsonData = JSON.parse(fs.readFileSync('path/to/your/json/file.json', 'utf8'));

let xlfContent = '';

jsonData.forEach((item, index) => {

xlfContent += `<trans-unit id="${item['i18n-label']}" datatype="json">

<source>${item.label}</source>

<context-group purpose="location">

<context context-type="linenumber">${index + 1}</context>

</context-group>

</trans-unit>\n`;

});

fs.writeFileSync('path/to/your/output/message.xlf', xlfContent, 'utf8');

console.log('XLIFF file generated successfully!');

Цей скрипт зчитує вміст json файлу, проходить по кожному елементу, витягує необхідні дані та генерує вихідний XLIFF файл.

Після створення цього скрипту ви можете викликати його після команди ng extract-i18n для автоматичної генерації XLIFF файлу з перекладами з вашого json файлу.

Використання цього підходу дозволить вам ефективно локалізувати тексти з json файлів у вашому Angular додатку та забезпечить легку роботу з локалізацією на різних мовах для вашого проекту.