🍁 🤷 👩‍❤️‍👩 Angular 9 متاح الآن

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

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

كيفية الترقية إلى الإصدار 9

انتقل إلى update.angular.io لمزيد من المعلومات. لضمان عمل التحديث بسلاسة ، يوصى بالترقية أولاً إلى أحدث إصدار من Angular 8.

الترقية إلى أحدث إصدار 8

ng update @angular/cli@8 @angular/core@8

ng update @angular/cli @angular/core

للتعرف على التغييرات الرئيسية التي تم إجراؤها في هذا التحديث ، بما في ذلك واجهات برمجة التطبيقات المتوقفة ، راجع الترقية إلى الإصدار 9 من Angular في وثائق Angular.

لبلاب

ينقل الإصدار 9 جميع التطبيقات إلى مترجم Ivy ووقت التشغيل بشكل افتراضي. بالإضافة إلى مئات الأخطاء الثابتة ، يقدم مترجم Ivy ووقت التشغيل العديد من المزايا:

أحجام حزم أصغر
اختبار أسرع
أفضل تصحيح
تحسين فئة CSS وروابط الأنماط
فحص نوع محسّن
رسائل خطأ بناء محسنة
وقت بناء محسّن ، يتم تمكين AOT بشكل افتراضي
تحسين التدويل

دعونا نفكر بالتفصيل في بعض التحسينات

أحجام حزم أصغر

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

بفضل هذه التحسينات ، يمكن أن تحصل التطبيقات على انخفاض كبير في الحجم.

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

اختبار أسرع

كما تم تحديث تطبيق Ivy TestBed ، ليصبح أكثر كفاءة.

في السابق ، قام TestBed بإعادة تجميع جميع المكونات بين عمليات كل اختبار ، بغض النظر عما إذا تم إجراء أي تغييرات على المكونات (على سبيل المثال ، من خلال تجاوزات).
في Ivy ، لا يقوم TestBed بإعادة تجميع المكونات إلا إذا تم تجاوز المكون يدويًا ، مما يتجنب إعادة الترجمة بين معظم الاختبارات.

مع هذا التغيير ، تمر الاختبارات الأساسية للإطار بشكل أسرع بنسبة 40٪ تقريبًا. من المتوقع أن يلاحظ المستخدمون زيادة في سرعة اختبار تطبيقاتهم عند مستوى 40-50٪.

تحسين التصحيح

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

Angular , .
, applyChanges

يعمل Ivy أيضًا على تحسين تتبع المكدس لتصحيح المشكلات مثل ExpressionChangedAfterItHasBeenCheckederror. في السابق ، لم يكن المكدس مفيدًا للغاية:

باستخدام Ivy ، سترى المزيد من المعلومات المفيدة التي تسمح لك بالانتقال مباشرةً إلى تعليمات القالب بتعبير معدل.

على سبيل المثال ، إذا قمت بالنقر فوق AppComponent_Template في المكدس أعلاه ، يمكنك أن ترى سطرًا محددًا في الرمز الذي تم إنشاؤه حيث يحدث الخطأ:

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

تحسين الأنماط وفئات CSS.

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

ضع في اعتبارك النموذج وأجزاء المكون التالية:

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

في السابق ، تم تطبيق الربط الذي تم حسابه آخر مرة ، وقد يعتمد ذلك على الوقت الذي تم فيه إجراء التغييرات على هذه التعبيرات. إذا لم يتم تحديد myColor و myOtherColor ، فسيتم تجاهل النمط "الأحمر" الثابت.

في الإصدار 9 ، يمكنك إدارة أنماطك بأولوية واضحة ومستقلة عن الوقت. الأنماط الأكثر تحديدًا لها الأسبقية. على سبيل المثال ، يؤدي الربط بـ [style.color] إلى تجاوز الربط [style] المتقاطع.

ومع ذلك ، ولأسباب التوافق مع الإصدارات السابقة ، تركنا سلوك [ngStyle] و [ngClass] كما كان من قبل. عند تحديث قيم الانجذاب ، ستتجاوز القيم الجديدة أي انجذاب متداخل.

يمكنك قراءة المزيد حول قواعد أسبقية الأنماط في دليل بناء جملة القالب.في الوثائق.

كأثر جانبي لإعادة بناء النمط ، يمكنك الآن أيضًا الارتباط بمتغيرات CSS (خصائص CSS المخصصة).

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

تم تحسين التحقق من النوع

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

هناك علامتان رئيسيتان مدعومتان لإجراء عمليات فحص إضافية للنوع بالإضافة إلى العلامات القياسية:

fullTemplateTypeCheck - يؤدي تشغيل هذه العلامة إلى إخبار المترجم بفحص كل شيء في القالب (ngIf ، ngFor ، tp-template ، إلخ.)
نماذج صارمة - سيؤدي تنشيط هذه العلامة إلى تطبيق القواعد الأكثر صرامة للتحقق من النوع.

→ المزيد حول تدقيق النوع في القوالب

إصلاح أخطاء البناء

إن المترجم الجديد لـ Ivy ليس فقط أسرع ويوفر أمانًا من النوع الأعلى ، ولكنه أيضًا يجعل قراءة رسائل الخطأ أسهل.

في الإصدار 8 أو محرك العرض ، سيظهر خطأ المترجم النموذجي كما يلي:

في الإصدار 9 مع Ivy ، يبدو الخطأ نفسه كما يلي:

تحسين وقت البناء ، يتم تمكين مترجم AOT بشكل افتراضي.

بفضل هندسة Ivy ، تحسن أداء المترجم بشكل ملحوظ.
قياس أداء المترجم من حيث النفقات العامة لتجميع بسيط لتطبيقات TypeScript. بالنسبة لمشروع توثيقنا (angular.io) ، انخفضت النفقات العامة من 0.8x إلى 0 ، x مع Ivy ، وهو تحسن بنسبة 40٪ تقريبًا.

هذا يعني أن بناء AOT يمكن أن يكون أسرع بشكل ملحوظ. بفضل هذا ، يمكنك استخدام AOT حتى في وضع ديف. وهذا يعني أن "خدمة ng تخدم" تتمتع الآن بنفس مزايا إصدارات الإصدار ، مما يحسن تجربة تطوير Angular.

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

التدويل المحسن (i18n)

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

→ المزيد عن i18n الجديد :الزاوي/ locize و the angular.json الجديد.

تحديث أكثر موثوقية

تم إجراء تغييرات على عملية تحديث ng لجعلها أكثر موثوقية وغنية بالمعلومات.

استخدم دائمًا أحدث إصدار من CLI. بدءًا من 8.3.19 CLI ، نستخدم الآن CLI من الإصدار المستهدف من التحديث. في المستقبل ، سيتم دائمًا معالجة التحديثات بواسطة CLI الأخيرة.
تقدم تحديث أفضل. يوفر ng update الآن مزيدًا من المعلومات حول ما يحدث تحت غطاء المحرك. لكل عملية ترحيل ، سترى معلومات عنها.
تصحيح أسهل للتحديثات. بشكل افتراضي ، يبدأ تحديث ng جميع عمليات الترحيل ويترك التغييرات التراكمية على القرص للتحقق منها. تقدم ترقية الإصدار 9 أيضًا علامة جديدة - إنشاء-ارتكاب. عند تشغيل ng update --create-commits ، تلتقط الأداة حالة قاعدة التعليمات البرمجية بعد كل عملية ترحيل ، حتى تتمكن من إجراء التغييرات خطوة بخطوة وتصحيحها التي يتم نشرها على التعليمات البرمجية الخاصة بك.

الميزات الجديدة

عند إنشاء خدمةInjectable في Angular ، يجب عليك اختيار مكان إضافتها إلى الحاقن. بالإضافة إلى خيارات "الجذر" و "الوحدة النمطية" السابقة ، ظهر خياران إضافيان.

في المقدمة: تشير إشارة "المنصة" إلى أن الخدمة متاحة في حاقن منصة أحادية خاصة ، والتي تتم مشاركتها من قبل جميع التطبيقات على الصفحة.
أي - يوفر مثيل فريد لكل وحدة (بما في ذلك الوحدات الكسولة)

→ المزيد عن providedIn

ربط المكون

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

قدم الإصدار 9 روابط المكونات التي توفر طريقة بديلة للاختبار. من خلال التلخيص من تفاصيل التنفيذ ، يمكنك التأكد من أن اختباراتك محددة بشكل صحيح وأقل هشاشة.

يمكن الآن اختبار معظم مكونات المواد الزاوية باستخدام هذه الروابط ، وهي متاحة أيضًا لأي مكون مؤلف في التكوين (CDK).

هنا مثال اختباري من قبل:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

ونفس الشيء الآن:


it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

مكونات جديدة

الآن يمكنك دمج ميزات من YouTube وخرائط Google في تطبيقاتك.

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

IDE وتحسين خدمة اللغة

تم إجراء تحسينات كبيرة على ملحق خدمة اللغة الزاوي على منصة Visual Studio Marketplace. إلى جانب الإصلاحات المعمارية الرئيسية لحل مشكلات الأداء والاستقرار ، تم إصلاح العديد من الأخطاء القديمة.

تسمح لك قواعد TextMate لقواعد تركيب القوالب الآن بتمييز البنية في كل من القوالب المضمنة والخارجية
انتقل إلى التعريف لـ templateUrl و styleUrls
اكتب ومعلومات NgModule في تلميح الأداة

دعم TypeScript 3.7

تم تحديث Angular للعمل مع TypeScript 3.6 و 3.7 ، بما في ذلك وظيفة الربط الاختياري الشائعة للغاية في TypeScript 3.7. للبقاء على صلة بالنظام البيئي ، قمنا أيضًا بتحديث إصدارات من التبعيات الأخرى مثل zone.JS و RxJS.

Angular 9 متاح الآن - وصل Ivy