Разбиение локализации ngx-translate на несколько файлов в Nx

Статья — Мультиязычность ngx-translate в Angular 9 c монорепозиторием Nx, рассматривающая Мультиязычность, не раскрывает проблему работы с локализацией в Nx.

Одной из самых раздражающих проблем ngx-translate и Nx это отсутствие возможности хранить файлы локализации прямо в библиотеках, а не дублировать все локали из проекта в проект.

Решением данной проблемы является использование webpack плагина для сборки файлов — merge-jsons-webpack-plugin.

Установка

Для того, чтобы использовать плагины webpack, необходимо использовать custom-webpack builder, который просто встроит в стандартный сборщик Angular, пользовательскую логику, в частности плагин по объединению файлов локализации.

Установим необходимые зависимости командой:

yarn add -D @angular-builders/custom-webpack@next merge-jsons-webpack-plugin

Добавим конфиг в angular.json:

...
"frontend-translation": {
  ...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "apps/frontend/translation/webpack.app.config.js",
          "replaceDuplicatePlugins": true,
          "mergeStrategies": {
            "externals": "prepend"
          }
        },
...

И файл — webpack.app.config.js, в котором будет подключён плагин:

Плагин работает следующим образом:

Ищет файлы согласно шаблону {../../../libs/*/src/assets/i18n/en.json,src/assets/i18n/en.json}, то есть он смотрит каждую папку библиотеки и пытается найти под папку i18n в папке src. К этому же списку добавляется файл локализации конкретного приложения.

Однако, для того, чтобы не перекрывать стандартные настройки TranslateModule по расположение файлов, то в настройках плагина можно увидеть настройку — fileName, путь в который будут сохранены объеденные локали в одном файле.

В данном случае у нас есть injection token, который отвечает за путь доступа к локали. Если у вас нет токена, тогда можете просто в загрузчике указать путь явно, например для TranslateHttpLoader:

Протестируем работу плагина. В нашем случае есть 2 файла:

• libs/translation/src/assets/i18n/ru.json
• apps/frontend/translation/src/assets/i18n/ru.json

Запустим проект, и посмотрим результат:

ng serve frontend-translation

Если вы запускаете dev-server, то для него также нужно прописать настройку для использования плагина:

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "customWebpackConfig": {
      "path": "apps/frontend/translation/webpack.app.config.js",
      "replaceDuplicatePlugins": true,
      "mergeStrategies": {
        "externals": "prepend"
      }
    },

Откроем в браузере http://localhost:4200/:

Как можно убедиться, плагин объединил файлы:

Исходники

Все исходники находятся на github, в репозитории:

Fafnur/medium-stories

Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — translation-separate.

git checkout translation-separate

Код можно посмотреть в разделе https://github.com/Fafnur/medium-stories/tree/master/apps/frontend/translation.

Спасибо за внимание!
Подписывайтесь на канал, чтобы не пропустить новые статьи про Angular и новости из мира фронтенд разработки.

Предыдущие статьи:

1. Интеграция GraphQL API в Angular приложение
2. Динамические формы в Angular или автоматизируем создание Angular форм
3. Создание переменных в шаблонах Angular. Превращение реактивных свойств в простые объекты.
4. Angular 9, Universal и Nx. Новые правила сборки SSR приложения.
5. Кроссплатформенные web storage в Angular 9. Реализация LocalStorage, SessionStorage и Cookies в Angular Universal.
6. Мультиязычность ngx-translate в Angular 9 c монорепозиторием Nx.