Skip to content

intlayer_with_angular_21.md

Latest commit

 

History

History
449 lines (342 loc) · 18.2 KB

intlayer_with_angular_21.md

File metadata and controls

449 lines (342 loc) · 18.2 KB
createdAt 2025-04-18
updatedAt 2026-05-31
title تدويل Angular 21 - الدليل الكامل لترجمة تطبيقك
description لا مزيد من i18next. دليل 2026 لبناء تطبيق Angular 21 متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء.
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
تحديث استخدام واجهة برمجة تطبيقات 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 بالكامل لضمان دقة المحتوى الخاص بك.

** وكيل الذكاء الاصطناعي **

يؤدي تحديد موقع المحتوى المشترك ** إلى تقليل السياق المطلوب ** بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل CLI لاختبار الترجمات المفقودة،LSP، MCP و**مهارات الوكيل**، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.

الأتمتة

استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا مترجمًا لأتمتة استخراج المحتوى، بالإضافة إلى منصة ويب للمساعدة في الترجمة في الخلفية.

أداء

يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.

التحجيم مع عدم وجود مطور

أكثر من مجرد حل i18n، يوفر Intlayer [محررًا مرئيًا] مستضافًا ذاتيًا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) و**كامل CMS** لمساعدتك في إدارة المحتوى متعدد اللغات في الوقت الفعلي، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.

دليل خطوة بخطوة لإعداد Intlayer في تطبيق Angular

<iframe src="https://ide.intlayer.org/aymericzip/intlayer-angular-21-template?file=intlayer.config.ts" className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full" title="Demo CodeSandbox - كيفية تدويل تطبيقك باستخدام Intlayer" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy" /> <iframe src="https://intlayer-angular-21-template.vercel.app/" className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full" title="Demo - intlayer-angular-template" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy" />

راجع قالب التطبيق على 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 المترجمة، وإعادة التوجيه للبرمجيات الوسيطة، وأسماء ملفات تعريف الارتباط، وموقع وامتداد تصريحات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع وثائق التكوين.

لدمج Intlayer مع Angular CLI، تحتاج إلى استخدام باني مخصص (custom builder). يفترض هذا الدليل أنك تستخدم 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. حيث تقوم بإدخال الإضافة (plugin) للتعامل مع ملفات تصريح المحتوى وتعد إعدادات الأداء الأمثل.

مستخدمو 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. يتيح لك هذا تجنب الالتزام بها (commit) في مستودع Git الخاص بك.

للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف .gitignore الخاص بك:

# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
.intlayer

إضافة VS Code

لتحسين تجربة تطويرك مع Intlayer، يمكنك تثبيت إضافة Intlayer VS Code Extension الرسمية.

تثبيت من VS Code Marketplace

توفر هذه الإضافة:

  • الإكمال التلقائي لمفاتيح الترجمة.
  • اكتشاف الأخطاء في الوقت الفعلي للترجمات المفقودة.
  • معاينات مضمنة للمحتوى المترجم.
  • إجراءات سريعة لإنشاء الترجمات وتحديثها بسهولة.

لمزيد من التفاصيل حول كيفية استخدام الإضافة، راجع وثائق إضافة Intlayer VS Code Extension.

اذهب أبعد من ذلك

للذهاب إلى أبعد من ذلك، يمكنك تنفيذ المحرر المرئي أو الاستعانة بمصادر خارجية لمحتواك باستخدام CMS.