Объединение переводов с приложением

Чтобы объединить готовые переводы с проектом, выполните следующие действия

1. Используйте Angular CLI, чтобы собрать копию дистрибутивных файлов проекта
2. Используйте опцию "localize", чтобы заменить все i18n-сообщения корректными переводами и собрать локализованный вариант приложения. Вариант приложения — полная копия дистрибутивных файлов приложения, переведённая для одной локали.

После объединения переводов обслуживайте каждую дистрибутивную копию приложения с помощью определения языка на стороне сервера или разных подкаталогов.

Для compile-time перевода приложения процесс сборки использует ahead-of-time (AOT) компиляцию, чтобы получить небольшое, быстрое, готовое к запуску приложение.

Чтобы собрать отдельную дистрибутивную копию приложения для каждой локали, определите локали в конфигурации сборки в файле конфигурации сборки рабочей области angular.json вашего проекта.

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

Чтобы генерировать варианты приложения для каждой локали, используйте опцию "localize" в файле конфигурации сборки рабочей области angular.json. Также, чтобы собирать из командной строки, используйте команду build Angular CLI с опцией --localize.

Определение локалей в конфигурации сборки

Используйте опцию проекта i18n в файле конфигурации сборки рабочей области angular.json, чтобы определить локали для проекта.

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

Полный список свойств i18n и их типов см. в опциях i18n.

Пример angular.json для en-US и fr

Например, следующий фрагмент файла конфигурации сборки рабочей области angular.json задаёт исходную локаль как en-US и предоставляет путь к файлу перевода французской (fr) локали.

"projects": {
    "angular.io-example": {
      // ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            // ...
          }
        }
      },
      "architect": {
        // ...
      }
    }
  }
}

Генерация вариантов приложения для каждой локали

Чтобы использовать определение локалей в конфигурации сборки, используйте опцию "localize" в файле конфигурации сборки рабочей области angular.json, чтобы сообщить CLI, для каких локалей генерировать сборку.

• Установите "localize" в true для всех локалей, ранее определённых в конфигурации сборки.
• Установите "localize" в массив подмножества ранее определённых идентификаторов локалей, чтобы собрать только эти версии локалей.
• Установите "localize" в false, чтобы отключить локализацию и не генерировать версии, специфичные для локали.

Если вы изменили эту настройку, установите "aot" в true, чтобы использовать AOT.

CLI загружает и регистрирует данные локали, размещает каждую сгенерированную версию в каталоге, специфичном для локали, чтобы отделить её от других версий локалей, и помещает файлы в настроенный outputPath проекта. Для каждого варианта приложения атрибут lang элемента html устанавливается в локаль. CLI также корректирует HTML base HREF для каждой версии приложения, добавляя локаль к настроенному baseHref.

Задайте свойство "localize" как общую конфигурацию, чтобы эффективно наследовать его для всех конфигураций. Также задайте свойство для переопределения других конфигураций.

Пример angular.json со всеми локалями из сборки

Следующий пример показывает опцию "localize", установленную в true в файле конфигурации сборки рабочей области angular.json, чтобы собирались все локали, определённые в конфигурации сборки.

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "localize": true,
            // ...
          },

Сборка из командной строки

Также используйте опцию --localize с командой ng build и существующей конфигурацией production. CLI собирает все локали, определённые в конфигурации сборки. Если локали заданы в конфигурации сборки, это аналогично установке "localize" в true.

ng build --localize

Применение специфичных опций сборки только для одной локали

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

Пример сборки для французского

Следующий пример показывает пользовательскую конфигурацию, специфичную для локали, с использованием одной локали.

"build": {
          // ...
          "configurations": {
            // ...
            "fr": {
              "localize": ["fr"]
            }
          },
          // ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            // ...
            "fr": {
              "buildTarget": "angular.io-example:build:development,fr"
            }
          },
          // ...
        },
        // ...
      }

Передайте эту конфигурацию командам ng serve или ng build. Следующий пример кода показывает, как обслуживать файл французского языка.

ng serve --configuration=fr

Для production-сборок используйте композицию конфигураций, чтобы запустить обе конфигурации.

ng build --configuration=production,fr

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
          },
          "configurations": {
            // ...
            "fr": {
              "localize": ["fr"]
            }
          },
          // ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "angular.io-example:build:production"
            },
            // ...
            "fr": {
              "buildTarget": "angular.io-example:build:development,fr"
            }
          },
          // ...
        },
        // ...
      }

Сообщение об отсутствующих переводах

Когда перевод отсутствует, сборка завершается успешно, но генерирует предупреждение вроде Missing translation for message "{translation_text}". Чтобы настроить уровень предупреждения, генерируемого компилятором Angular, укажите один из следующих уровней.

Укажите уровень предупреждения в секции options для цели build файла конфигурации сборки рабочей области angular.json.

Пример предупреждения error в angular.json

Следующий пример показывает, как установить уровень предупреждения в error.

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
            "i18nMissingTranslation": "error"
          },

Когда вы переводите приложение Angular, преобразование перевода заменяет и переупорядочивает части (статические строки и выражения) строки template literal строками из коллекции переводов. Подробнее см. $localize.

Что дальше