Как создать приложение Angular Universal на основе angular 7 с поддержкой i18n

В этом уроке Angular Universal я расскажу, как я решил проблему интернационализации, также известную как i18n, в моем приложении Angular Universal.

Если вы не знакомы с Angular Universal, это платформа, которая позволяет вашему приложению обслуживать предварительно обработанные страницы для пользователей и поисковых роботов, в то время как клиентское приложение загружается в фоновом режиме. Затем, когда все будет готово на стороне клиента, оно плавно переключится с отображения страниц, отрисованных на сервере, на обычное приложение на стороне клиента.

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

Мы выполним интернационализацию i18n с помощью инструментов angular cli и некоторых улучшений сервера Angular Universal Express. Учебное пособие состоит из трех шагов:

  1. Добавьте поддержку i18n в наше приложение
  2. Настройте процесс сборки для переведенных приложений
  3. Измените экспресс-сервер для обработки языков

Справочный репозиторий

Рабочий пример универсального проекта angular, который мы будем использовать в качестве справочного материала, доступен по адресу: https://github.com/mzuccaroli/universal-multisite-multilanguage, это простой проект Angular 7. создан для демонстрационных целей. Он основан на универсальном стартере angular, см. Https://github.com/angular/universal-starter, если вам нужна дополнительная информация о базовом универсальном приложении Angular.

Вы можете прочитать перевод этой статьи на итальянский язык в блоге моей компании: « Come Creare un’applicazione Angular Universal Multilingua » тоже написано мной.

Добавьте поддержку i18n в наше приложение

Этот шаг настроит среду i18n для поддержки переводов в вашем приложении, запустите:

$npm install ngx-i18nsupport -s

теперь вы можете добавить свойство i18n в теги html, например:

<h3 i18n>Hello interlanguage!</h3>

чтобы создать специальный HTML-код для английского, итальянского и т. д .:

<h3>Hello!</h3>
<h3>Ciao!</h3>

Теперь мы хотим автоматизировать процесс создания файлов .xlf, давайте добавим эту конфигурацию в наш package.json

и добавьте это в наш раздел скрипта

"extract-i18n": "ng xi18n --output-path locale && node ./node_modules/ngx-i18nsupport/dist/xliffmerge/xliffmerge"

теперь мы сможем бежать

$npm run extract-i18n

все файлы html будут проанализированы, а файлы перевода (messages.xlf messages.en.xlf messages.fr.xlf messages.fr.xlf) будут созданы в папке локали.
Теперь вы можете редактировать файлы xlf и вставлять свои переводы.

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

Настройте процесс сборки

Примечание. Этот шаг основан на файле angular.json, который поддерживается в версиях Angular 6+.
Давайте посмотрим в файл angular.json, расположенный в корне проекта, перейдите в раздел projects.yourProjectName.architect.build.configurations: здесь мы можем добавить дополнительные конфигурации для сборок для конкретных языков , например, если вы хотите создать конфигурацию для целевой сборки на английском языке, вы можете изменить outputPath на

“outputPath”: “dist/browser/en/”

а затем добавьте в нижней части конфигурации

"baseHref": "/en/",
"i18nFile": "src/locale/messages.en.xlf",
"i18nFormat": "xlf",
i18nLocale": "en",
i18nMissingTranslation": "error"

В разделе fileReplacements вы можете обрабатывать конкретную среду для каждого переведенного приложения, если это необходимо.

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

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

JSON станет намного больше, но у нас будет полный контроль над нашими сборками, а наши окончательные приложения будут полностью независимыми и оптимизированными для языка, мы могли бы развернуть приложение для конкретного языка в выделенный сервер / ведро / cdn без проблем.

Теперь нам нужно добавить скрипт в наш package.json для выполнения сборки языка:

перейдите в свой package.json в разделе «scripts» и добавьте:

"build:language-bundles": "ng run ng-universal-demo:build:production-it && ng run ng-universal-demo:build:production-en && ng run ng-universal-demo:build:production-fr",

затем измените сценарий build: client-and-server-bundles для создания всех переведенных приложений во время сборки:

"build:client-and-server-bundles": "npm run build:language-bundles && ng run ng-universal-demo:server:production",

теперь вы можете запустить команду build: ssr и увидеть папку «dist» с тремя приложениями:

Изменить экспресс-сервер

Для обслуживания универсального приложения вам необходимо изменить экспресс-сервер и сделать его способным работать с разными языками. С помощью этого решения сервер определит поддерживаемые языки и передаст выбранный язык и IP-адрес запроса в приложение, вы можете использовать IP-адрес клиента для использования внешних служб (например, https://www.maxmind.com) для идентификации страну пользователя по его ip и выберите более подходящий язык.

Перейдите на свой server.ts и найдите часть «регулярные маршруты»:

измените это с помощью:

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

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

@Inject(LOCALE_ID) public locale: string

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

Взглянем на окончательный результат: