При разработке приложений с использованием Angular, часто возникает необходимость поддерживать несколько локалей (языков). Angular предоставляет встроенные инструменты для работы с интернационализацией (i18n), что позволяет легко настраивать сборку для разных языков. В этом ответе мы рассмотрим, как настраивать конфигурацию сборки для нескольких локалей и приведем примеры кода.

Шаг 1: Установка необходимых пакетов

Убедитесь, что у вас установлен Angular CLI. Если нет, вы можете установить его с помощью следующей команды:

npm install -g @angular/cli

Шаг 2: Подготовка вашего приложения

Для начала создайте новый проект Angular, если у вас его еще нет:

ng new my-multilocale-app
cd my-multilocale-app

Шаг 3: Добавление поддержки локалей

Для добавления поддерживаемых локалей, вам нужно сначала зарегистрировать необходимые языковые файлы. Создайте messages.xlf файл в папке src/locale для своего основного языка (например, английского):

<xliff version="1.2">
  <file source-language="en" datatype="plaintext">
    <body>
      <trans-unit id="example-translation-1">
        <source>Hello World</source>
        <target>Привет, мир</target>
      </trans-unit>
    </body>
  </file>
</xliff>

Создайте файлы для других локалей, например, messages.fr.xlf для французского:

<xliff version="1.2">
  <file source-language="fr" datatype="plaintext">
    <body>
      <trans-unit id="example-translation-1">
        <source>Bonjour le monde</source>
      </trans-unit>
    </body>
  </file>
</xliff>

Шаг 4: Настройка `angular.json`

Теперь вам нужно обновить файл angular.json, чтобы добавить конфигурацию для каждой локали. Найдите раздел projects.my-multilocale-app.architect.build.configurations и добавьте необходимые конфигурации:

"configurations": {
  "production": {
    ...
  },
  "fr": {
    "localize": ["fr"],
    "sourceMap": false,
    "optimization": true
  },
  "ru": {
    "localize": ["ru"],
    "sourceMap": false,
    "optimization": true
  }
}

Шаг 5: Сборка проекта для разных локалей

Теперь вы можете собирать ваше приложение для разных локалей. Используйте следующую команду для сборки для французского языка:

ng build --configuration=fr

Для русского языка выполните:

ng build --configuration=ru

Шаг 6: Развертывание

После сборки для каждой локали, результат будет находиться в соответствующих папках внутри dist/my-multilocale-app/. Вы можете развернуть эти папки на вашем веб-сервере.

Заключение

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

Предыдущий вопрос

Поддерживаются ли множественные перехватчики в Angular?

Следующий вопрос

Что такое ng-content и какова его цель?

Содержание: