شرح الفرق بين i18n في Angular في مرحلة البناء ومرحلة التشغيل

يمكن أن تتبع عملية التدويل في Angular نموذجين مختلفين – نموذج وقت البناء أو نموذج وقت التشغيل. وتستخدم الطريقة الرسمية @angular/localize، مما يؤدي إلى إنشاء نسخة منفصلة لكل لغة. يتميز هذا الإعداد بالاستقرار والسرعة أثناء التشغيل، لكنه يتطلب التخطيط لعمليات نشر متعددة ولا يتيح التبديل بين اللغات داخل التطبيق.

لكي ذلك، تقوم بتمييز النص في القوالب وTypeScript، واستخراج الترجمات إلى ملفات، ثم إنشاء نسخة واحدة من التطبيق لكل لغة. يتم تقديم كل لغة عبر عنوان URL خاص بها، لذا يقوم المستخدمون بتبديل اللغات من خلال التنقل بدلاً من استخدام زر التبديل داخل التطبيق.

إذا كنت بحاجة إلى التبديل الديناميكي دون الحاجة إلى إعادة التحميل، فإن مكتبات وقت التشغيل تتولى ذلك بدلاً من ذلك. ومن بين الخيارات الشائعة في هذا الصدد: ngx-translate وangular-i18next. تعمل هذه المكتبات على تحميل الترجمات عند الطلب وتحديث واجهة المستخدم على الفور، مع وجود مزايا وعيوب مختلفة تتعلق بالإعداد والأداء ودعم SSR.

في هذا المقال، نوضح كيفية عمل سير عمل التدويل (i18n) المدمج في Angular، وكيفية لكي عندما تكون عندما وقت التشغيل عندما الخيار الأنسب.

كيف @angular/localize أعمال

تستخدم ميزة التدويل المدمجة في Angular سير عمل يتم تنفيذه في مرحلة البناء. حيث تقوم بإعداد الترجمات قبل النشر، ثم تقوم بإصدار نسخة واحدة مجمعة من التطبيق لكل لغة.

لا يوجد تبديل للغة أثناء التشغيل، لذا يركز الإعداد على الاستخراج وتكوين البناء.

دعونا نستعرض سير العمل بالكامل:

1. قم بتمييز النص المراد ترجمته في القوالب وTypeScript. استخدم السمة i18n لمحتوى HTML وسماته، واستخدم $localize في TypeScript، بحيث يتم تضمين السلاسل في عملية الاستخراج نفسها.
2. استخرج الرسائل إلى ملف ترجمة باستخدام Angular CLI. يؤدي ذلك إلى إنشاء ملف XLIFF بشكل افتراضي، مع توفر خيارات لتنسيقات أخرى بناءً على إعداداتك، ويحتوي الملف على معرّفات الرسائل والنص الأصلي.
3. قم بترجمة الملف المستخرج وحافظ على ثبات المعرّفات. أضف معرّفات مخصصة عند الحاجة حتى لا لكي تحديثات لكي إفساد الترجمات الموجودة أو التسبب في حالات عدم تطابق خفية.
4. قم بإنشاء ونشر إصدار واحد من التطبيق لكل لغة. قم بتكوين اللغات في ملف angular.json، ثم قم بإنشاء حزم خاصة بكل لغة يتم تقديمها عبر مسارات أو نطاقات منفصلة.

تستخدم عملية التعدد صيغ ICU. يمكنك تحديد حالات مثل =0, =1، أو أخرى، ويقوم Angular باختيار النموذج الصحيح بناءً على الإعدادات اللغوية النشطة. تختلف اللغات في عدد النماذج التي تتطلبها، لذا يجب التخطيط لهيكل الرسائل في مرحلة مبكرة.

تتبع تعبيرات ICU المتداخلة النمط نفسه، لكنها تزيد من التعقيد؛ لذا احرص على أن تظل قابلة للقراءة واختبرها عبر مختلف الإعدادات اللغوية.

إنشاء ونشر تطبيقات Angular متعددة اللغات

مع ميزة i18n في Angular التي تُنفَّذ أثناء البناء، يرتبط النشر ارتباطًا مباشرًا لكي تكوين ملف angular.json. حيث تقوم بتحديد لغة المصدر ومجموعة من اللغات المستهدفة، يتم ربط كل منها لكي ترجمة.

أثناء عملية البناء، يقوم Angular بتحويل التطبيق مرة واحدة، ثم يطبق الاستبدالات المتعلقة بالترجمة كخطوة لاحقة. وهذا يعني أنك لا تقوم بتنفيذ عمليات بناء كاملة لكل لغة، لكنك تحصل في النهاية على حزم مخرجات منفصلة لكل لغة.

تقوم كل منطقة بإنتاج نسختها الخاصة من التطبيق، والتي يتم تقديمها عادةً عبر مسار فرعي أو نطاق. ويستخدم الإعداد الشائع مسارات مثل /en/ و /fr/، حيث يشير كل لكي مخرجات البناء المقابلة لكي . وهذه البنية ضرورية لأن المحتوى المترجم يتم دمجه في الملفات، لذا فإن التبديل بين اللغات يعني تحميل نسخة مختلفة من البناء.

يصبح تكوين الخادم جزءًا من إعدادات i18n. تحتاج إلى قواعد توجيه تعمل على توجيه الطلبات الواردة لكي المحلي الصحيح.

يختلف التنفيذ اختلافًا كبيرًا حسب البيئة — قواعد إعادة الكتابة الأولية في Nginx مقابل بضعة أسطر تعريفية في Firebase Hosting — لكن الهدف واحد. يجب لكي تحدد الطلبات لكي المُترجمة الصحيحة بناءً على بنية عنوان URL أو منطق إعادة التوجيه.

يدعم Angular أيضًا الكشف التلقائي عن اللغة عندما العرض من جانب الخادم. يمكن للخادم قراءة ملفات المتصفح اللغة المقبولة رأس الصفحة، ثم إعادة توجيه المستخدمين لكي المحلية المطابقة. وهذا يحسّن تجربة الزيارة الأولى، لكنه لا يزال يؤدي إلى تحميل الصفحة بالكامل عندما اللغة لاحقًا.

أثناء التطوير، يمكن لخادم تطوير Angular تقديم خدمات لعدة إعدادات لغة باستخدام المسارات الفرعية. وهذا يساعد في عملية الاختبار، لكن التبديل بين اللغات لا يزال يتطلب تحديث الصفحة لأن كل إعداد لغة يمثل ناتج بناء منفصل.

لهذا النموذج آثار واضحة على البنية التحتية. فأنت تدير العديد من مكونات البناء، وتقوم بتكوين التوجيه لكل لغة، وتتعامل مع عمليات إعادة التوجيه على مستوى الخادم. ويجب أن تأخذ مسارات العمل في إطار «التسليم المستمر» (CI) في الاعتبار تحديثات الترجمة وإعادة بناء المخرجات المُترجمة عندما تغير عندما .

هناك نهج بديل يتجنب هذه التعقيدات. حيث يتم وضع نموذج الوكيل العكسي، مثل Weglot بين الخادم والمتصفح. وهو يقوم بترجمة المحتوى فوريًّا ويقدم جميع اللغات من خلال نشر واحد. وهذا يلغي الحاجة إلى إصدارات متعددة وقواعد توجيه. أكثر Weglot !

مقارنة بين مكتبات وقت التشغيل: ngx-translate وTransloco وangular-i18next

تحل مكتبات وقت التشغيل مشكلة مختلفة عن ميزة i18n المدمجة في Angular. فبدلاً من تضمين الترجمات في التطبيق عند التحويل البرمجي، تقوم هذه المكتبات بتحميلها في وقت التشغيل وتحديث واجهة المستخدم دون الحاجة إلى إعادة تحميل كامل.

وهذا يجعلها خيارًا أنسب عندما يحتاج عندما لكي اللغات داخل التطبيق أو عندما يتغير عندما بشكل متكرر.

ngx-translate وهو الخيار الأكثر استخدامًا. وهو يدعم التبديل الفوري للغة من خلال trans.use()، مع تحميل الترجمات من ملفات JSON أو واجهات برمجة التطبيقات (API). وهي تعمل بشكل جيد في التطبيقات الصغيرة، وتُعد فقط المتاح هنا الذي تم التأكد من فعاليته أيوني التوافق. يمكن استخدام SSR مع حالة النقل والمحملات المخصصة، على الرغم من أنها تتطلب إعدادًا. وقد أضافت الإصدارات الحديثة واجهة برمجة تطبيقات (API) قائمة على المزودين، والتي تتوافق بشكل أفضل مع المكونات المستقلة.

ترانسلوكو يركز على البنية وقابلية التوسع. ويوفر دعمًا مدمجًا لـ SSR وإعدادًا أكثر بساطة باستخدام الأمر ng add. كما يدعم الترجمات المحددة النطاق، مما يتيح لك التحميل المؤجل لملفات اللغة حسب كل ميزة. وهذا يقلل من حجم الحزمة ويحافظ على سهولة صيانة التطبيقات الكبيرة. ويتم التبديل بين اللغات باستخدام setActiveLang() ويقوم بتحديث واجهة المستخدم على الفور.

يُعدّ angular-i18next غلافًا لنظام i18next. وهو مفيد إذا كان فريقك يستخدم i18next بالفعل في أطر عمل أخرى ويرغب في تحقيق الاتساق عبر المشاريع المختلفة. وهو يدعم المكونات الإضافية من النواة الأساسية لـ i18next، بما في ذلك معالجة ICU. وعادةً ما يتطلب التبديل بين اللغات إعادة تحميل الصفحة، مما يحد من استخدامه في التطبيقات التي تتطلب تحديثات فورية.

إليك مقارنة أكثر :

يعتمد الاختيار على الطريقة التي يتعامل بها تطبيقك مع تغييرات اللغة وحجم الاستخدام:

• استخدم ngx-translate إذا كنت بحاجة إلى إعداد بسيط أو دعم Ionic.
• استخدم Transloco لتطبيقات SSR أو التطبيقات الكبيرة التي تتطلب ترجمة معيارية.
• استخدم angular-i18next إذا كنت ترغب في تحقيق التوافق مع i18next عبر منصات متعددة.

💡 إذا لم تكن هناك حاجة إلى التبديل أثناء التشغيل وكنت تفضل استخدام الحد الأدنى من المنطق على جانب العميل، فإن ميزة i18n المدمجة في Angular تظل الخيار الأفضل.

ترجمة تطبيقات Angular دون إجراء تغييرات على الكود

هناك خيار ثالث إلى جانب مكتبات i18n ومكتبات وقت التشغيل المدمجة في Angular، ألا وهو أدوات ترجمة المواقع الإلكترونية الخارجية. تعمل هذه الأدوات خارج تطبيق Angular وتقوم بترجمة الناتج المعروض بدلاً من السلاسل الموجودة داخل قاعدة الكود.

كما ذكرنا سابقًا، Weglot نموذج الوكيل العكسي. فهو يقع بين الخادم والمتصفح، ويكتشف استجابة HTML، ثم يقدم النسخ المترجمة لكي . وهذا يعني أنك لست بحاجة إلى تمييز السلاسل بعلامة i18n، أو إدارة ملفات الترجمة بتنسيق JSON، أو إعادة بناء التطبيق لكل لغة. ويكون الإعداد أسرع لأن طبقة الترجمة تتم معالجتها خارج Angular.

كما أن هذا النهج يغير المكان الذي تتم فيه أعمال الترجمة. فبدلاً من تحرير الملفات في المشروع، يستخدم المترجمون لوحة تحكم مرئية. ويمكنهم مراجعة الصفحات وتطبيق قواعد المسرد دون الحاجة إلى التعامل مع القوالب أو لغة TypeScript. وبالنسبة للمواقع التسويقية الغنية بالمحتوى، يمكن أن يقلل ذلك من دور المطورين.

كما يمكن أن يكون التبديل بين اللغات أكثر سلاسة. Weglot أداة تبديل تعتمد على JavaScript تعمل على تحديث اللغة المعروضة دون الحاجة إلى عملية إعادة بناء كاملة لـ Angular. وهذا يسهل لكي المحتوى متعدد اللغات بسرعة.

المقابل في ذلك هو التحكم. ونظرًا لأن الترجمة تتم بعد أن يقوم Angular بعرض الصفحة، فإن هذا النموذج لا يتعامل مع منطق التطبيق الذي يعتمد على اللغة داخل TypeScript. كما أنه لا يُعد الخيار الأمثل لتطبيقات Ionic والتطبيقات التي تعتمد على العمل دون اتصال بالإنترنت أولاً، حيث يجب لكي المحتوى لكي داخل التطبيق نفسه بدلاً من أن يكون خلف خادم وكيل.

يعتمد تحسين محركات البحث (SEO) أيضًا على الإعدادات. يمكن أن تدعم ترجمة البروكسي العكسي إنشاء صفحات مترجمة قابلة للفهرسة، لكن snippet جافا سكريبت بسيط snippet لا يكفي لإنشاء عناوين URL مترجمة ومناسبة لتحسين محركات البحث. وهذا أمر مهم إذا كان الحصول على حركة مرور من البحث العضوي جزءًا من الهدف.

يُعد هذا النموذج الخيار الأمثل للفرق التي ترغب في إنشاء صفحات متعددة اللغات دون تغيير كود التطبيق. وهو أقل ملاءمةً عندما تؤثر عندما على التوجيه أو المنطق التجاري. كما يتطلب اشتراكًا نشطًا، نظرًا لأن المحتوى المترجم يظل مرتبطًا لكي .

اختيار النهج المناسب لتدويل Angular (i18n)

يعتمد النهج الصحيح لكي على الطريقة التي تتعامل بها تطبيقك مع اللغات في الواقع.

تُعطي عملية الترجمة الدولية (i18n) في مرحلة البناء الأولوية للأداء والاستقرار، بينما تركز المكتبات التي تُستخدم في مرحلة التشغيل على المرونة داخل واجهة المستخدم. أما الأدوات الخارجية، فهي تزيل معظم أعباء التنفيذ، لكنها تنقل التحكم خارج نطاق قاعدة الكود.

اختر @angular/localize عندما يكون أداء عندما أمرًا حيويًّا ويكون فريقك متمكنًا من إدارة إصدارات مترجمة منفصلة في بيئة التكامل المستمر (CI). ويُعد هذا الخيار الأنسب عندما يمكن التبديل عندما من خلال التنقل في التطبيق بدلاً من داخل التطبيق نفسه.

اختر ngx-translate عندما يحتاج عندما لكي اللغات دون الحاجة إلى إعادة تحميل الصفحة، وترغب في استخدام خيار تشغيل واسع الانتشار. وهو الخيار الأنسب هنا لمشاريع Ionic وتطبيقات Angular الأصغر حجمًا.

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

اختر Weglot عندما يكونعندما إنشاء موقع إلكتروني متعدد اللغات دون إضافة آلية ترجمة لكي Angular. وهو الخيار الأمثل لتقديم المحتوى والتشغيل السريع، وليس للتطبيقات التي يتطلب لكي سلوك TypeScript لكي حسب اللغة.

{{demo-banner}}