Мультиязычные приложения в Angular

В этой статье рассмотрим как можно быстро перевести ваш Angular проект на мультиязычный режим работы и какие есть для этого утилиты.

Прекратите использовать ngx-translate!

Большинство проектов, которые мне довелось встречать написаны используя данную библиотеку, и не удивительно, она очень проста, и появилась еще до официального релиза Angular.

Используйте стандартный i18n!

Добавить его в свой проект еще проще, чем кажется.

И так, вот небольшая инструкция:

• Добавить атрибут i18n в элемент шаблона
• Использовать атрибут i18n- для перевода атрибутов самого элемента
• Использовать ICU выражения
• Зарегистрировать нужную локаль для Pipe

Переведем hello-world app за 5 минут:

В этом примере мы обозначим на перевод атрибут title и само содержимое.

<div i18n i18n-title title="Приветствие">
    Привет {{name}}!
</div>

Так же мы можем задать описание для нашего переводчика

<div i18n="Приветствие с главной страницы">
   Привет {{name}}!
</div>

Ну и конечно, для повторяющихся текстов мы можем указывать идентификаторы:

<span i18n="@@HiId">Привет!</span>

Так же мы можем комбинировать идентификаторы с описанием:

<span i18n="приветствие с главной|@@HiId">Привет!</span>

Выставим ICU выражение, там где он нам понадобился:

<span i18n>
   Заказов {
    orders,
    plural,
    =0 {нет}
    =1 {почти нет}
    other {<b>{{orders}}</b>}
}
<span>

В данном примере он работает как обычный switch-case. Но есть и различные варианты использования.

Почти все готово! 

Запустим команду Angular CLI:

ng xi18n

По дефолту соберет файл messages.xlfв формате XLIFF. Этого достаточно, чтобы работать дальше.

Скопируем этот файл в messages.fr.xlf (допустим хотим перевод на французский).

Отдаем файл на перевод, к счастью этот формат очень распространен, и для него очень много утилит, чтобы переводчику было удобно редактировать.

Ну и теперь редактируем конфиги angular.json:

"configurations": {
...
"fr": {
   "outputPath": "dist/my-project-fr/", // куда билдить приложение
   "i18nFile": "src/locale/messages.fr.xlf", // путь до файла
   "i18nFormat": "xlf",  // формат файла
   "i18nLocale": "fr",  // нужная локаль
  ...
  }
}

Вот и все!

> ng serve  - configuration=fr
> ng build  - configuration=fr

---

А теперь рассмотрим как это работает изнутри:

Из схемы видно что динамика просто не возможна, вот так уж устроен на данный момент стандартный i18n. И любая смена языка потребует загрузки нового бандла.

---

На деле, для большинства кейсов связанных с мультиязностью динамика не нужна. Чаще всего это уже совсем другая локализация. Просто спросите себя, часто ли ваши пользователи переключают языки? А что если вам нужно перевести ваше приложение на арабский язык? Подробные рекомендации можете почитать на сайте W3C.

---

Нельзя не вставить ссылку на таблицу сравнения различных вариантов i18n для Angular.

---

Для любителей динамики, есть хорошие новости, вместе с Ivy появится Runtime Service.

i18n и Ivy

Так что же это даст?

• Можно будет использовать везде (React, Vue), например через Angular Elements
• Tree-shakeable
• Поддержка lazy-loading
• Поддержка различных локалей
• Полный функционал без компиляции

---

Ну так как утилит много не бывает, особенно упрощающих жизнь, создал небольшую утилиту для быстрого перевода в мультиязычный режим ваше готовое приложение:

> npx ngx-translate-all
--format ngx-translate | i18n
--in ru
--out en,fr
--outPath src/assets/i18n

Поддерживает 2 формата, как стандартный i18n, так и ngx-translate-all.
Для стандартной i18n утилита расставит необходимые атрибуты, и добавит нужное описание.

--format i18n
<div i18n="AppModule.AppComponent">
   Привет!
</div>

Для ngx-translate назначит переменные, поставит pipe, и экспортирует их в нужный файл json.

--format ngx-translate
<div>    
  {{AppModule.AppComponent[0] | translate}}
<div>

---

А так же я хочу чтобы вы перевели свои проекты на стандартную i18n, хотя бы в шаблонах. И скоро опубликую специальную утилиту, которая автоматический переведет ваш проект с ngx-translate на i18n

> npx ngx-translate-migrate

ngx-translate -> i18n

Чтобы следить, за проектом можете подписаться на мой твиттер, github или канал в телеграмме, посвященный Angular:

https://twitter.com/irustm
https://t.me/ngFanatic
https://github.com/irustm

Если у вас остались вопросы, то приглашаю вас на лайв видеоподкаст ngRuAir:

7 апреля 2019 20.00 мск тема: Разработка мультиязычных приложений на Angular.