Сборка локализованных версий

Angular предоставляет встроенные средства для интернационализации и сборки локализованных версий приложений, что особенно важно для поддержки нескольких языков и региональных настроек.

Настройка интернационализации (i18n)

  1. Маркировка текста для перевода Для того чтобы Angular распознал строки для перевода, используется директива i18n:

    <h1 i18n="site header|Main page title">Добро пожаловать</h1>

    Здесь "site header|Main page title" — описание и контекст перевода.

  2. Создание файлов локализации Используется команда Angular CLI для извлечения сообщений:

    ng extract-i18n --output-path src/locale

    В результате генерируется файл messages.xlf с тегами <trans-unit> для каждой строки, помеченной i18n.

  3. Редактирование переводов Файл .xlf редактируется вручную или через специализированные CAT-инструменты. Каждому исходному сообщению присваивается перевод на нужный язык.

Сборка локализованных приложений

После подготовки переводов можно создавать версии для разных языков:

  1. Конфигурация локалей в angular.json:
"projects": {
  "my-app": {
    "i18n": {
      "sourceLocale": "ru",
      "locales": {
        "en": "src/locale/messages.en.xlf",
        "fr": "src/locale/messages.fr.xlf"
      }
    }
  }
}
  1. Сборка с указанием локали:
ng build --localize

Команда создаёт отдельные сборки для каждой локали, заменяя текстовые строки на соответствующие переводы. Опционально можно указывать конкретную локаль:

ng build --configuration=en

Динамическая локализация

Для приложений, где язык определяется на лету, используют runtime translation. Angular позволяет загружать JSON-файлы с переводами и динамически менять язык без пересборки всего проекта, интегрируя это через сервисы и пайпы:

import { TranslateService } from '@ngx-translate/core';

constructor(private translate: TranslateService) {
  translate.setDefaultLang('ru');
  translate.use('en');
}

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

Оглавление