intlayer_with_angular_21.md

createdAt

2025-04-18

updatedAt

2026-05-31

title

Angular 21 i18n - Полное руководство по переводу вашего приложения

description

Больше никакого i18next. Руководство 2026 по созданию многоязычного (i18n) приложения Angular 21. Переводите с помощью ИИ-агентов и оптимизируйте размер бандла, SEO и производительность.

keywords

Интернационализация

Документация

Intlayer

Angular

JavaScript

slugs

doc

environment

angular

applicationTemplate

https://github.com/aymericzip/intlayer-angular-21-template

applicationShowcase

https://intlayer-angular-21-template.vercel.app/

history

version	date	changes
8.9.0	2026-05-04	Обновлено использование API Solid useIntlayer для прямого доступа к свойствам

version	date	changes
8.0.0	2026-01-26	Релиз стабильной версии

version	date	changes
8.0.0	2025-12-30	Добавлена команда init

version	date	changes
5.5.10	2025-06-29	Первая запись

Переведите ваш веб-сайт на Angular 21 (Vite) с помощью Intlayer | Интернационализация (i18n)

Почему Intlayer лучше альтернатив?

По сравнению с основными решениями, такими как ngx-translate или angular-l10n, Intlayer — это решение со встроенными оптимизациями, такими как:

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

Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает уменьшить размер бандла и страниц до 50 %.

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

Совместное размещение контента уменьшает контекст, необходимый для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как CLI для проверки отсутствия переводов,LSP, MCP, и навыки агента, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.

Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает компилятор для автоматизации извлечения контента, а также веб-платформу, которая помогает переводить в фоновом режиме.

Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).

Intlayer — это больше, чем просто решение i18n. Он предоставляет автономный визуальный редактор и полный CMS, чтобы помочь вам управлять многоязычным контентом в реальном времени, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.

Пошаговое руководство по настройке Intlayer в приложении Angular

Смотрите Шаблон Приложения на GitHub.

Установите необходимые пакеты с помощью npm:

npm install intlayer angular-intlayer
npm install @angular-builders/custom-esbuild --save-dev
npx intlayer init

pnpm add intlayer angular-intlayer
pnpm add @angular-builders/custom-esbuild --save-dev
pnpm intlayer init

yarn add intlayer angular-intlayer
yarn add @angular-builders/custom-esbuild --save-dev
yarn intlayer init

bun add intlayer angular-intlayer
bun add @angular-builders/custom-esbuild --dev
bun x intlayer init

intlayer

Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, объявления контента, транспиляции и CLI-команд.
angular-intlayer Пакет, который интегрирует Intlayer с приложением Angular. Он предоставляет контекстные провайдеры и хуки для интернационализации Angular.
@angular-builders/custom-esbuild Необходим для настройки конфигурации esbuild в Angular CLI.

Создайте конфигурационный файл для настройки языков вашего приложения:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Другие языки
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Через этот конфигурационный файл вы можете настроить локализованные URL, редиректы, названия cookie, расположение и расширение файлов ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в документации по конфигурации.

Чтобы интегрировать Intlayer с Angular CLI, вам необходимо использовать кастомный сборщик. В этом руководстве предполагается, что вы используете Vite/esbuild (по умолчанию для проектов Angular 21).

Сначала измените ваш angular.json для использования пользовательского esbuild. Обновите конфигурации build и serve:

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-esbuild:application", // replace "@angular/build:application"
          "options": {
            "define": {
              "process.env": "{}",
            },
            "plugins": ["./esbuild.plugins.ts"],
            "browser": "src/main.ts",
            // ...
          },
        },
        "serve": {
          "builder": "@angular-builders/custom-esbuild:dev-server", // replace "@angular/build:dev-server"
          "options": {
            "prebundle": {
              "exclude": [
                "intlayer",
                "angular-intlayer",
                "@intlayer/config/built",
                "@intlayer/core"
              ]
          },
        },
      },
    },
  },
}

Не забудьте заменить your-app-name на фактическое название вашего проекта в angular.json.

Далее создайте файл esbuild.plugins.ts в корневом каталоге вашего проекта:

import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";

export default [intlayerEsbuildPlugin()];

Функция intlayerEsbuildPlugin конфигурирует esbuild с Intlayer. Она внедряет плагин для обработки файлов деклараций контента и устанавливает настройки для достижения максимальной производительности.

Пользователи NX: Сборщики Angular в NX загружают файлы плагинов через собственное разрешение ESM в Node и не компилируют файлы плагинов TypeScript на лету. Используйте вместо этого файл .mjs и соответствующим образом обновите ссылку plugins в angular.json:
import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";

export default [intlayerEsbuildPlugin()];
Затем в angular.json укажите "./esbuild.plugins.mjs" вместо "./esbuild.plugins.ts".

Создавайте и управляйте декларациями вашего контента для хранения переводов:

import { t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: t({
      en: "Hello",
      fr: "Bonjour",
      es: "Hola",
    }),
    congratulations: t({
      en: "Congratulations! Your app is running. 🎉",
      fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
      es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
    }),
    exploreDocs: t({
      en: "Explore the Docs",
      fr: "Explorer les Docs",
      es: "Explorar los Docs",
    }),
    learnWithTutorials: t({
      en: "Learn with Tutorials",
      fr: "Apprendre avec les Tutoriels",
      es: "Aprender con los Tutorios",
    }),
    cliDocs: "CLI Docs",
    angularLanguageService: t({
      en: "Angular Language Service",
      fr: "Service de Langage Angular",
      es: "Servicio de Lenguaje Angular",
    }),
    angularDevTools: "Angular DevTools",
    github: "Github",
    twitter: "Twitter",
    youtube: "Youtube",
  },
} satisfies Dictionary;

export default appContent;

Ваши декларации контента могут быть определены в любом месте вашего приложения, при условии, что они находятся в каталоге contentDir (по умолчанию ./src). А также они должны соответствовать расширению файлов для деклараций контента (по умолчанию .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Подробнее см. в документации по декларации контента.

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

import { ApplicationConfig } from "@angular/core";
import { provideRouter } from "@angular/router";
import { provideIntlayer } from "angular-intlayer";
import { routes } from "./app.routes";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideIntlayer(), // Добавьте провайдер Intlayer здесь
  ],
};

После этого вы можете использовать функцию useIntlayer внутри любого компонента.

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  content = useIntlayer("app");
}

А в вашем шаблоне:

<div class="content">
  <h1>{{ content().title }}</h1>
  <p>{{ content().congratulations }}</p>
</div>

Контент Intlayer возвращается как сигнал (Signal), поэтому вы обращаетесь к значениям, вызывая сигнал: content().title.

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

Создайте компонент для переключения между языками:

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { useLocale } from "angular-intlayer";

@Component({
  selector: "app-locale-switcher",
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="locale-switcher">
      <select
        [value]="locale()"
        (change)="setLocale($any($event.target).value)"
      >
        @for (loc of availableLocales; track loc) {
          <option [value]="loc">{{ loc }}</option>
        }
      </select>
    </div>
  `,
})
export class LocaleSwitcherComponent {
  localeCtx = useLocale();

  locale = this.localeCtx.locale;
  availableLocales = this.localeCtx.availableLocales;
  setLocale = this.localeCtx.setLocale;
}

Затем используйте этот компонент в app.component.ts:

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { useIntlayer } from "angular-intlayer";
import { LocaleSwitcherComponent } from "./locale-switcher.component";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet, LocaleSwitcherComponent],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  content = useIntlayer("app");
}

Настройка TypeScript

Intlayer использует расширение модулей (Module Augmentation) для использования преимуществ TypeScript и создания более надежной кодовой базы.

Убедитесь, что ваша конфигурация TypeScript включает автосгенерированные типы.

{
  // ... Ваши существующие конфигурации TypeScript
  "include": [
    // ... Ваши существующие конфигурации TypeScript
    ".intlayer/**/*.ts", // Включить автосгенерированные типы
  ],
}

Конфигурация Git

Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит вам не коммитить их в ваш Git-репозиторий.

Для этого вы можете добавить следующие инструкции в файл .gitignore:

# Игнорировать файлы, созданные Intlayer
.intlayer

Расширение для VS Code

Чтобы улучшить процесс разработки с Intlayer, вы можете установить официальное Расширение Intlayer для VS Code.

Установите из VS Code Marketplace

Это расширение предоставляет:

Автодополнение для ключей перевода.
Обнаружение ошибок в реальном времени для недостающих переводов.
Встроенный предварительный просмотр переведенного контента.
Быстрые действия для удобного создания и обновления переводов.

Подробнее о том, как использовать расширение, см. в документации к расширению Intlayer для VS Code.

Идти дальше

Чтобы пойти дальше, вы можете реализовать визуальный редактор или экстернализовать свой контент с помощью CMS.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Переведите ваш веб-сайт на Angular 21 (Vite) с помощью Intlayer | Интернационализация (i18n)

Оглавление

Почему Intlayer лучше альтернатив?

Пошаговое руководство по настройке Intlayer в приложении Angular

Настройка TypeScript

Конфигурация Git

Расширение для VS Code

Идти дальше

Uh oh!

FilesExpand file tree

intlayer_with_angular_21.md

Latest commit

History

intlayer_with_angular_21.md

File metadata and controls

Переведите ваш веб-сайт на Angular 21 (Vite) с помощью Intlayer | Интернационализация (i18n)

Оглавление

Почему Intlayer лучше альтернатив?

Пошаговое руководство по настройке Intlayer в приложении Angular

Настройка TypeScript

Конфигурация Git

Расширение для VS Code

Идти дальше