الزاوي 11 - كل ما تحتاج إلى معرفته

الإصدار 11 من Angular موجود هنا وقد جلب بعض التحديثات الرائعة للمطورين. من الإطار إلى المكونات و CLI - يتم تحديث كل شيء. يحاول فريق Angular إجراء بعض التغييرات الرئيسية مع كل تحديث. على سبيل المثال ، تم إصدار iVY في Angular 9 ، وتم توفير الدعم لـ Typescript 3.8 في Angular 9.1 ، وتم وضع التعديلات في مكتبة مكون Angular Material UI في Angular 10. واليوم ، سوف نستكشف ميزات Angular 11. دعنا نتعمق في ومن بعد.

Angular 11 - الميزات والتحديثات

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

# تسخير اختبار مكون

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

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

#Updated دعم استبدال الوحدة النمطية الساخنة

Hot Module Replacement أو HMR هي آلية تسمح باستبدال الوحدات دون تحديث متصفح كامل. هذا مفهوم قديم ولكن Angular 11 يضيف المزيد إليه.

يوفر Angular 11 دعمًا لـ HMR مع تغييرات وتكوينات الكود المطلوبة. يسمح لـ CLI بتمكين HMR أثناء بدء تطبيق مع خدمة ng. الأمر التالي مطلوب للبدء به:

نانوغرام يخدم مر

وبالتالي ، فإن أمر CLI يقلل بشكل كبير من مقدار الجهد المطلوب لتكوين HMR. بمجرد إدخال المطورين لهذا الأمر ، ستعرض وحدة التحكم رسالة بمجرد أن يؤكد الخادم المحلي أن HMR نشط.

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

#Updated Language Service Preview

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

# تضمين الخطوط تلقائيًا

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

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

#Webpack 5 الدعم

يستخدم Webpack لتجميع الكثير من الملفات في ملف واحد صغير أو حزمة. تم إصدار أحدث إصدار لها - Webpack 5 قبل بضعة أشهر.

يقدم Angular 11 دعمًا تجريبيًا لـ webpack 5 ويمكن للمطورين استخدامه لتجربة أشياء جديدة. قد يقوم فريق Angular بتمديد الدعم التجريبي لتحقيق حزم أصغر وبناء أسرع بمجرد أن تصبح حزمة الويب أكثر استقرارًا.

إليك أمر استخدام webpack 5. أضف الأسطر التالية إلى ملف package.json:

"القرارات": {
"حزمة الويب": "5.4.0"
}

#Shift إلى ESLint

كانت TSLint واحدة من أكثر أدوات القوائم شيوعًا المستخدمة والموصى بها من قبل مزودي خدمات تطوير Angular. في الآونة الأخيرة ، تم تسليم المهمة إلى ESLint.

مع Angular 11 ، تم إهمال Codelyzer و TSLint رسميًا وستتم إزالتهما في الإصدارات المستقبلية. قدم أحدث إصدار طريقة من 3 خطوات للترحيل من TSLint إلى ESLint:

الخطوة 1 - قم بتشغيل ng add @ angular-eslint / schematics
الخطوة 2 - الآن ، قم بتشغيل الأمر ng g @ angular / schematics: convert-tslint-to-eslint {{YOUR PROJECT NAME}}
الخطوة 3 - قم بإزالة ملف tslint.json على مستوى الجذر.

# أسرع يبني

يقدم Angular 11 تحسينات جذرية في السرعة. أصبحت عملية تحديث NGCC الآن أسرع 2-4x من السابق. لذلك ، لا يحتاج المطورون إلى قضاء وقت طويل في انتظار استكمال عمليات الإنشاء وإعادة البناء.

# دعم TypeScript 4.0

يدعم Angular 11 TypeScript 4.0. تم الآن إسقاط دعم TypeScript 3.9. أحد الأسباب الرئيسية وراء ذلك هو تحسين سرعة الإنشاءات. يضمن أحدث إصدار إنشاءات أسرع وأكثر سلاسة من الإصدارات السابقة.

# تسجيل أفضل وإعداد التقارير

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

#تغييرات أخرى

بصرف النظر عن تلك المذكورة أعلاه ، فإن أحدث إصدار من Angular يجلب العديد من التغييرات الأخرى مثل:

• تحسينات عامل الخدمة
• المخططات والهجرات المؤتمتة الجديدة
• دعم التحميل الكسول لمختلف المنافذ المسماة
• تمت إزالة دعم Internet Explorer 9،10 ودعم الهاتف المحمول IE بالكامل
• يتم إزالة saveQueryParams من جهاز التوجيه. بدلاً من ذلك ، يمكن للمطورين استخدام queryParamsHandling = ”keep”
• يتم الآن بناء أنواع أكثر صرامة في الأنابيب
• يمكن أن يولد CLI الزاوي حراس حل
• تدعم وظيفة formatDate تنسيق سنة ترقيم الأسابيع ISO 8601
• يتم الآن فحص التعبيرات داخل وحدات العناية المركزة مرة أخرى
• لا يعود الأنبوب غير المتزامن بعد الآن غير معرف لأي إدخال تمت كتابته على أنه غير معرف.

كيفية التحديث إلى Angular 11

يمكنك استئجار مطوري Angular لتحديث تطبيقك إلى Angular 11. يحتاج المطورون إلى تشغيل الأمر التالي:

ng update @ angular / cli @ angular / core

وجدت المقالة مفيدة؟ شارك مع معارفك واجعلهم يعرفون كل شيء عن Angular 11.