Как создать приложение Angular Universal на основе angular 7 с поддержкой i18n
В этом уроке Angular Universal я расскажу, как я решил проблему интернационализации, также известную как i18n, в моем приложении Angular Universal.
Если вы не знакомы с Angular Universal, это платформа, которая позволяет вашему приложению обслуживать предварительно обработанные страницы для пользователей и поисковых роботов, в то время как клиентское приложение загружается в фоновом режиме. Затем, когда все будет готово на стороне клиента, оно плавно переключится с отображения страниц, отрисованных на сервере, на обычное приложение на стороне клиента.
Во многих онлайн-руководствах обсуждается, как преобразовать ваше приложение в Angular Universal, в этом мы сделаем шаг вперед и посмотрим, как создать многоязычное приложение Angular Universal.
Мы выполним интернационализацию i18n с помощью инструментов angular cli и некоторых улучшений сервера Angular Universal Express. Учебное пособие состоит из трех шагов:
- Добавьте поддержку i18n в наше приложение
- Настройте процесс сборки для переведенных приложений
- Измените экспресс-сервер для обработки языков
Справочный репозиторий
Рабочий пример универсального проекта 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-адрес пользователя и вводит его.
Взглянем на окончательный результат: