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

Зміст

Чому варто обрати Intlayer, а не альтернативи?

Порівняно з основними рішеннями, такими як ngx-translate або angular-l10n, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:

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

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

1. 1

   Встановлення залежностей

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

   bash

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

   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. 2

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

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

   intlayer.config.ts

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

   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. 3

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

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

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

   angular.json

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

   {  "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 у корені вашого проекту:

   webpack.config.ts

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

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

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

4. 4

   Декларування вмісту

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

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

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

5. 5

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

   Щоб використовувати функції інтернаціоналізації Intlayer у всьому додатку Angular, вам потрібно надати Intlayer у конфігурації вашого додатка.

   src/app/app.config.ts

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

   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 всередині будь-якого компонента.

   src/app/app.component.ts

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

   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");}

   І у вашому шаблоні:

   src/app/app.component.html

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

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

   Вміст Intlayer повертається як Signal, тому ви отримуєте доступ до значень, викликаючи сигнал: content().title.

6. 6

   Зміна мови вашого вмісту

   Необов'язково

   Щоб змінити мову вмісту, ви можете використовувати функцію setLocale, яку надає функція useLocale. Це дозволяє встановити локаль додатка та відповідно оновити вміст.

   Створіть компонент для перемикання між мовами:

   src/app/locale-switcher.component.ts

   Копіювати вміст

   Копіювати код

   Скопіюйте код у буфер обміну

   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:

   src/app/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.