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

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

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

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

При переводе приложения во время компиляции процесс сборки использует опережающую компиляцию (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 также изменяет базовый HREF HTML-кода для каждой версии приложения, добавляя язык к настроенному значению baseHref.

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

Пример angular.json со всеми языками из конфигурации сборки

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

"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

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

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.

Пример предупреждения об ошибке в angular.json

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

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

При переводе приложения Angular преобразование перевода заменяет и меняет порядок частей (статических строк и выражений) строкового литерала шаблона, подставляя строки из набора переводов. Дополнительные сведения см. в разделе $localize.

Что дальше