Разбиение локализации 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, в репозитории:
Для того, чтобы посмотреть состояние проекта на момент написания статьи, нужно выбрать соответствующий тег — translation-separate.
git checkout translation-separate
Код можно посмотреть в разделе https://github.com/Fafnur/medium-stories/tree/master/apps/frontend/translation.
Спасибо за внимание!
Подписывайтесь на канал, чтобы не пропустить новые статьи про Angular и новости из мира фронтенд разработки.
Предыдущие статьи:
- Интеграция GraphQL API в Angular приложение
- Динамические формы в Angular или автоматизируем создание Angular форм
- Создание переменных в шаблонах Angular. Превращение реактивных свойств в простые объекты.
- Angular 9, Universal и Nx. Новые правила сборки SSR приложения.
- Кроссплатформенные web storage в Angular 9. Реализация LocalStorage, SessionStorage и Cookies в Angular Universal.
- Мультиязычность ngx-translate в Angular 9 c монорепозиторием Nx.