Angular: локализация на несколько языков

Question

У меня есть приложение angular6, которое уже создано. Теперь мы планируем поддерживать его на нескольких языках. Я могу создать несколько файлов xlf и заменить целевые строки на язык. В моем файле локали есть три файла, такие как messages.en.xlf, messages.es.xlf и messages.fr.xlf, каждый для английского, испанского и французского языков.

В зависимости от языка браузера, приложение должно выбрать нужный языковой файл. Если браузер установлен на французском языке, он должен автоматически поднять messages.fr.xlf и отобразить приложение на французском языке.

Первоначально моей командой сборки будет ng build --prod --output-hashing all, но с изменениями локализации мне нужно использовать --aot = false и оптимизатор сборки false, а производительность и время загрузки моего приложения стали хуже.

"ng build --prod --output-hashing all --aot = false --build-optimizer = false

Мой файл main.ts как ниже

declare const require;
var userLang;

window.addEventListener('languagechange', function() {
  // callLangugae();
   location.reload(true);

});
 function callLangugae(){
  userLang =  navigator.language;  
  userLang = userLang.split("-")[0];    
  switch (userLang) {
    case 'es': {
        registerLocaleData(localeEs);
        break;
    }
    case  'fr': {      
        registerLocaleData(localeFr);
        break;
    }
    case  'en': {
      registerLocaleData(localeEn);
      break;
    }
    default :{
      userLang ='en';
      registerLocaleData(localeEn);
      break;
    }
  }

  }
  callLangugae();
const translations = require(`raw-loader!./locale/messages.${userLang}.xlf`);

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    {provide: TRANSLATIONS, useValue: translations},
    {provide: TRANSLATIONS_FORMAT, useValue: 'xlf'}
  ]
})
  .catch(err => console.log(err));

Мне интересно, есть ли правильный способ загрузки файла XLF на основе языка браузера без проблем с производительностью и без ложных ошибок.

Answer 1

У вас есть 3 основных варианта того, как вы можете использовать переводы в своем приложении.

Сборка AoT для каждого языка

Вы можете использовать встроенную в i18n функциональность angular и создать сборку AoT для каждого языка. Затем вам необходимо убедиться, что файлы сборки, зависящие от правильного языка, загружаются во время выполнения при загрузке веб-страницы. Обычно каждая сборка, зависящая от языка, хранится в отдельной папке, имя которой соответствует ISO-коду локали / языка. Затем вы можете указать на эту папку, а затем на содержащийся в нейindex.htmlпри навигации по странице (или загрузите содержащиеся файлы.js на любую используемую вами страницу хоста). В зависимости от количества локалей, которые вы хотите поддерживать, время сборки может значительно увеличиться. С другой стороны, вы получаете все преимущества AoT в плане производительности во время выполнения.

Один файл сборки и ресурсов JiT для каждого языка

Вы можете использовать встроенную в i18n функциональность angular и создать единую сборку JiT и указать соответствующий файл перевода во время выполнения. Время сборки будет намного быстрее (когда вы опубликуете свое приложение), но клиенты будут получать снижение производительности при загрузке приложения и, возможно, также во время выполнения приложения. Положительным моментом является то, что эту структуру легче поддерживать, когда вы имеете дело с несколькими языками, особенно если ожидается, что количество языков будет расти.

Внешний инструмент (например, @ngx-translate)

Это мой предпочтительный метод при работе с растущим числом языков, которые необходимо поддерживать. Этот внешний инструмент позволяет использовать одну сборку AoT. Затем вы определяете ключи перевода в своих шаблонах и настраиваете инструмент для получения переводов из некоторого (предположительно) внешнего источника (например, сервера или файла на диске). Возможно, есть и другие, но я не собираюсь включать их в этот ответ.

---

Замечание о JiT и AoT. Уже есть довольно хорошо написанный ответ, сравнивающий сборку JiT и сборку AoT, которую можно найти на Stackru: Angular 2: Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation. Я не буду здесь обобщать эти ответы.

Answer 2

С Angular 9 и Ivy перевод отдельных сборок во время выполнения приближается к реальности. У Ivy уже есть возможность загружать переводы во время выполнения, как описано здесь:

https://angular.fun/post/2020-01-11-angular-ivy-localize/

а также здесь:

https://jaxenter.com/angular-9-ivy-167934.html

Однако, похоже, он не готов к производству, поскольку для извлечения строк необходимы внешние инструменты.

Учитывая, насколько болезненно создавать один язык, построенный на одном языке, у меня возникает соблазн попробовать этот новый подход.