Перекладіть свій Angular 19 (Webpack) веб-сайт за допомогою Intlayer | Інтернаціоналізація (i18n)

Зміст

Що таке Intlayer?

Intlayer, це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатомовності в сучасних веб-додатках.

З Intlayer ви можете:

• Легко керувати перекладами, використовуючи декларативні словники на рівні компонентів.
• Динамічно локалізувати метадані, маршрути та вміст.
• Забезпечити підтримку TypeScript за допомогою автогенерованих типів, що покращує автодоповнення та виявлення помилок.
• Користуватися розширеними можливостями, такими як динамічне визначення та перемикання локалі.

Покроковий посібник із налаштування Intlayer у додатку Angular

Дивіться Шаблон додатка на GitHub.

Крок 1: Встановлення залежностей

Встановіть необхідні пакети за допомогою npm:

npm install intlayer angular-intlayernpm install @angular-builders/custom-webpack --save-devnpx intlayer init

• intlayer

  Основний пакет, що надає інструменти інтернаціоналізації для керування конфігурацією, перекладу, декларування вмісту, транспіляції та команд CLI.

• angular-intlayer Пакет, що інтегрує Intlayer з додатком Angular. Він надає провайдери контексту та хуки для інтернаціоналізації Angular.

• @angular-builders/custom-webpack Необхідний для налаштування конфігурації Webpack в Angular CLI.

Крок 2: Конфігурація вашого проекту

Створіть файл конфігурації для налаштування мов вашого додатка:

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Ваші інші локалі
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Через цей файл конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення в middleware, назви cookie, розташування та розширення ваших декларацій контенту, вимкнути логування Intlayer у консолі та інше. Для повного переліку доступних параметрів див. документацію з конфігурації.

Крок 3: Інтеграція Intlayer у вашу конфігурацію Angular

Щоб інтегрувати Intlayer з Angular CLI, вам потрібно використовувати спеціальний білдер (builder). Цей посібник припускає, що ви використовуєте Webpack (стандарт для багатьох проектів Angular).

Спочатку змініть ваш angular.json, щоб використовувати спеціальний білдер Webpack. Оновіть конфігурації build та serve:

{  "projects": {    "your-app-name": {      "architect": {        "build": {          "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",          "options": {            "customWebpackConfig": {              "path": "./webpack.config.ts",              "mergeStrategies": { "module.rules": "prepend" },            },            "main": "src/main.ts", // replace "browser": "src/main.ts",            // ...          },        },        "serve": {          "builder": "@angular-builders/custom-webpack:dev-server",        },      },    },  },}

Переконайтеся, що ви замінили your-app-name на фактичну назву вашого проекту в angular.json.

Далі створіть файл webpack.config.ts у корені вашого проекту:

import { mergeConfig } from "angular-intlayer/webpack";export default mergeConfig({});

Функція mergeConfig налаштовує Webpack за допомогою Intlayer. Вона впроваджує IntlayerPlugin (для обробки файлів декларації вмісту) та налаштовує псевдоніми для оптимальної продуктивності.

Крок 4: Декларування вмісту

Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:

Ваші декларації вмісту можуть бути визначені в будь-якому місці вашого додатка, якщо вони включені до каталогу contentDir (за замовчуванням ./src) і відповідають розширенню файлу декларації вмісту (за замовчуванням .content.{json,ts,tsx,js,jsx,mjs,cjs}).

Для отримання додаткової інформації дивіться документацію з декларування вмісту.

Крок 5: Використання Intlayer у вашому коді

Щоб використовувати функції інтернаціоналізації 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.

(Опціонально) Крок 6: Зміна мови вашого вмісту

Щоб змінити мову вмісту, ви можете використовувати функцію 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.