Angular Academy · Урок

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

Создавайте сборки приложения для отдельных локалей

«Создание локализованных сборок» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Отдельная сборка для каждого языкового стандарта

Система i18n Angular работает во время компиляции: она создаёт отдельный полностью оптимизированный пакет для каждого языкового стандарта, в который уже встроены переводы. Пользователи загружают только свой язык, без затрат на перевод во время выполнения.

Настройка локализованных сборок

После объявления языковых стандартов в angular.json задайте localize: true в параметрах сборки, чтобы сразу создать версии для всех языковых стандартов.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Сборка для всех языковых стандартов

Запустите сборку для рабочей среды; CLI создаст отдельную папку для каждого языкового стандарта, содержащую полную версию приложения.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Сборка для одного языкового стандарта

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

ng build --localize=fr

Настройка базового href для каждого языкового стандарта

Для каждой сборки языкового стандарта можно задать собственный baseHref, чтобы приложение обслуживалось из такого подраздела, как /fr/. Настройте его для каждого языкового стандарта в angular.json.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Запуск определённого языкового стандарта при разработке

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

ng serve --configuration=fr

Перенаправление пользователей на их языковой стандарт

Поскольку каждый языковой стандарт представляет собой отдельную папку, готовую к развёртыванию, обычно сервер или CDN перенаправляет пользователей в нужный подраздел на основе их заголовка Accept-Language или переключателя языка.

Использование $localize во время выполнения в особых конфигурациях

В расширенных конфигурациях переводы можно загрузить во время выполнения с помощью loadTranslations() из @angular/localize до запуска приложения. В этом случае вместо сборки для каждого языкового стандарта используется один пакет и загружаемая карта переводов.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Требование к полифиллу

Для использования $localize требуется полифилл @angular/localize. Добавьте его один раз с помощью CLI: он зарегистрирует глобальный объект, необходимый для перевода шаблонов с тегами.

ng add @angular/localize

Размер пакета остаётся небольшим

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

Развёртывание результата

Разверните весь каталог dist/app; каждая подпапка локали представляет собой самостоятельное приложение. Настройте сервер так, чтобы по адресу /fr/ отдавалась французская сборка, а локаль по умолчанию — из корня или по собственному пути.

Быстрая проверка

Как Angular поставляет переводы?

Итоги

Установите localize: true и выполните ng build --localize, чтобы получить по одной папке на каждую локаль, причём каждая папка содержит полноценное приложение. Используйте отдельный baseHref для каждой локали (например, /fr/), запускайте в режиме разработки одну локаль с помощью --configuration, добавьте полифилл @angular/localize и при необходимости загружайте переводы во время выполнения для нестандартных конфигураций.

Часто задаваемые вопросы

Урок «Создание локализованных сборок» бесплатный?

Да — полный текст урока «Создание локализованных сборок» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Создание локализованных сборок»?

Создавайте сборки приложения для отдельных локалей Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Создание локализованных сборок»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy