تم نشر هذا المنشور في الأصل بتاريخ موقع الويب الخاص بي: https://dsebastien.net
في هذه المقالة ، سأستعرض (تقريبًا) كل شيء جدير بالملاحظة في هذا الإصدار الجديد تمامًا. سأقوم أيضًا بتسليط الضوء على ما تم تغييره حول Angular ، تمامًا كما فعلت مع مقالاتي السابقة حول الزاوي 11 و الزاوي 10.
إذا كنت تبحث فقط عن منظر عين الطائر ، فراجع ملف إعلان الإفراج الرسمي. هنا ، سوف أتعمق أكثر في ملاحظات الإصدار.
انضم إلى دوري Ivy ...
يعمل فريق Angular على لبلاب (خط أنابيب التجميع والعرض الجديد) منذ عام 2018. تم إصداره أخيرًا مع Angular 8. منذ Angular 9 ، كان Ivy هو الخيار الافتراضي للمشروعات الجديدة ، وينتقل النظام البيئي إليه ببطء. مع Angular 12 ، أصبح محرك العرض القديم مهملاً الآن رسميًا. ستتم إزالته في إصدار رئيسي مستقبلي. أيضًا ، لن يكون من الممكن إنشاء تطبيقات جديدة باستخدام View Engine. أخيرًا ، يعد Ivy الآن الخيار الافتراضي لمشاريع المكتبة الجديدة.
في هذه المرحلة ، لا يزال بإمكان مؤلفي المكتبة الاعتماد على View Engine بفضل ngcc
(مترجم التوافق في Angular) ، ولكن حان الوقت حقًا لهم لتقييم ما إذا كان بإمكانهم ترحيل مكتباتهم إلى Ivy أم لا. قبل أسابيع قليلة ، نشر مينكو جيتشيف مقالة لشرح ذلك بالتفصيل. أيضا ، تحقق من ذات الصلة RFC.
في حال لم تكن تعرف ، ngcc
هي العملية الصغيرة التي يتم تشغيلها بعد إنشاء مشروع Angular أو تثبيت التبعيات. عندما ترى رسائل مثل Compiling ... : es2015 as esm2015
، فإنه من ngcc
تقوم بعملها. ماذا او ما ngcc
هل هو تجميع المكتبات التي تعتمد على View Engine حتى يتمكن Ivy من استهلاكها.
مثلي ، ربما لاحظت ذلك ngcc
يستغرق التنفيذ وقتًا طويلاً ، وله تأثير سلبي جدًا على تجربة المطور. هذا هو السبب في أنه من الأهمية بمكان أن يهاجر النظام البيئي الزاوي إلى Ivy في أقرب وقت ممكن. ثانيًا ، حتى تنتقل غالبية النظام البيئي ، سيتعين على فريق Angular الحفاظ على View Engine ، وهو أمر يمثل مشكلة لعدد من الأسباب. أخيرًا وليس آخرًا ، لا يمكن للمكتبات التي تعتمد على View Engine أن تعتمد على Ivy.
ربما لا يستطيع مؤلفو المكتبات الهجرة إلى Ivy بسرعة كبيرة ، لكن يجب عليهم بوضوح دفع المستخدمين المترددين إلى الترقية. على أي حال ، فإن الطريق إلى الأمام هو ترحيل كل الأشياء إلى Ivy في أسرع وقت ممكن
هناك مقال ممتاز عن اللبلاب هناك.
وداعا منقلة
في أبريل ، أعلن فريق Angular عن خطط لإنهاء دعم منقلة في نهاية 2022.
اعتبارًا من Angular 12 ، لن يتم تضمين المنقلة افتراضيًا في المشاريع الجديدة. بدلاً من ذلك ، سيوفر Angular CLI خيارات لاستخدام حلول أخرى مثل شجر السرو, WebdriverIOالطرق أو TestCafe. وهذا يعني أن ng e2e
يجب أن يستمر دعم الأمر في المستقبل.
كما هو موضح في الإعلان، في عام 2013 عندما تم إنشاء المنقلة ، ويب درايفر لم يكن معيار، واختبارات من طرف إلى طرف (e2e) كانت صعبة الكتابة ، وكان من الصعب الحفاظ عليها. جلبت المنقلة حلاً مبتكرًا عن طريق التغليف سيلينيوم- webdriver، ووفر طريقة للتحكم في تدفق التنفيذ.
بالطبع ، تطورت الكثير من الأشياء منذ ذلك الحين. لدينا الآن WebDriver
API، async
و await
(حتى المستوى الأعلى await
، واه). أيضا ، النظام البيئي قد تطور أيضا. حلول مثل شجر السرو, الكاتب المسرحي, العرائس اكتسبت الكثير من الشعبية (التي تستحقها عن جدارة). توفر أدوات مثل Cypress على سبيل المثال تجربة مطور أفضل بكثير من Protractor ، وتستفيد من المعايير الحديثة ، بل وتدعم أيضًا الاختبار عبر المتصفحات (من بين الإمكانات القوية الأخرى). فائدة أخرى لأدوات اختبار e2e الحالية الواقعية هي أنها لا تعتمد على إطار العمل ، وهي قيمة للغاية.
قصة قصيرة طويلة ، الحفاظ على منقلة ليس له معنى كبير لفريق Angular. تتطلب المنقلة المتطورة الآن الكثير من الجهد وستحدث الكثير من التغييرات الفاصلة. يمكنك العثور على مزيد من التفاصيل في RFC ، إنها قراءة ممتعة.
يعد الجدول الزمني مهمًا للفرق / المشاريع التي استثمرت الكثير من الوقت والطاقة في كتابة اختبارات e2e باستخدام منقلة. لا يزال فريق Angular منشغلًا بتقييم التعليقات التي تم جمعها من خلال RFC ، لذلك من المحتمل أن نعرف المزيد في وقت لاحق من هذا العام.
على أي حال؛ جرب Cypress إذا لم تكن قد قمت بذلك بالفعل ، فلن تشعر بخيبة أمل! بالمناسبة ، أوصي الجميع بالبدء في استخدامه نرول إن إكس، وهو حل رائع يتضمن دعم Angular و React و Next.js و Cypress وغير ذلك الكثير
اندماج لاغي
يتضمن Angular 12 دعمًا لاستخدام ملف عامل الاندماج الباطل في القوالب الزاويّة. وهذا رائع! تم دعم هذا المشغل في TypeScript منذ الإصدار 3.7.
إذا لم تكن قد سمعت عن هذا المشغل ، دعني أقدم لك شرحًا سريعًا. الفكرة هي أن تكون قادرًا على تحديد قيمة احتياطية في حالة وجود شيء ما null
or undefined
. إليك مثال على ذلك:
If foo
is null
or undefined
، ثم x
سيتم تعيينه إلى true
(على سبيل المثال ، القيمة الاحتياطية) ، ويمكننا تعيينها على أي شيء نحبه.
بدون هذا رائع ??
عامل التشغيل ، علينا كتابة هذا بدلاً من ذلك:
let x = foo !== null && foo !== undefined ? foo : true;
الآن بعد أن دعمه Angular أيضًا ، يمكننا أخيرًا كتابة تعبيرات مثل:
{{ age ?? calculateAge() }}
بدلاً من البديل القديم والأكثر تفصيلاً. مرتب!
يمكنك معرفة المزيد عن هذا التغيير هنا.
يمكنك العثور على مزيد من المعلومات حول الاندماج الصفري في ملف كتيب TypeScript وكذلك على DND.
دعم TypeScript 4.2
يقدم Angular 12 دعمًا لـ TypeScript 4.2 تحديث، مما يعني أنه يمكننا الآن استخدام ملف طن من ميزات اللغة الرائعة الجديدة. أيضًا ، تم إسقاط دعم TypeScript 4.0 و 4.1.
فيما يلي ملخص سريع لما يتضمنه TS 4.2:
حفظ الاسم المستعار من النوع الذكي: يتم عرض الأنواع المتوقعة بواسطة محرري التعليمات البرمجية بدلاً من الأنواع الأولية كما حدث من قبل. يمكنك معرفة المزيد عن ذلك هنا.
العناصر البادئة / الوسطى في أنواع Tuple: يمكننا الآن تضمين عناصر الراحة في أي مكان داخل المجموعة (مع بعض المحاذير). هذا رائع جدًا لأولئك منا الذين يعتمدون على المجموعات من وقت لآخر. تعلم المزيد عن ذلك هنا.
فهم هيكل مشروعك: TS 4.2 يشمل علم جديد تسمى --explainFiles
، والذي يوجه TypeScript لإخراج معلومات حول سبب تضمين ملف في برنامجك. هذا مفيد جدا لاستكشاف الأخطاء وإصلاحها.
تحسينات لفحوصات الوظيفة غير المبررة: يمكن لـ TypeScript الآن اكتشاف المزيد من الحالات التي لا يتم فيها استدعاء الوظائف. على سبيل المثال عند الكتابة foo
بدلا من foo()
. يمكن العثور على مزيد من التفاصيل والأمثلة هنا.
يمكن الآن وضع علامة صراحة على المتغيرات التالفة على أنها غير مستخدمة: let [_first, second] = getValues();
، وهو أمر رائع. لا مزيد من الأخطاء عندما noUnusedLocals
تم تمكين!
هناك الكثير في الواقع ، مثل عمليات فحص أكثر صرامة لـ in
وبعض التغييرات العاجلة التي قد تؤثر عليك. لذا تأكد من إطلاعك على ملاحظات الإصدار.
دعم Webpack 5
جلبنا الزاوي 11 دعم تجريبي لـ Webpack 5. مع Angular 12 ، أصبح دعم Webpack 5 جاهزًا الآن للإنتاج. w00t!
إذا كنت لم تنظر حزمة الويب 5، ستندهش. تم إصدار Webpack 5 مرة أخرى في أكتوبر 2020 ، لذا فهو مستقر تمامًا الآن. Webpack موجود حاليًا في إصدار 5.37 (صدر قبل أيام قليلة).
إليك شرحًا موجزًا لما تغير مع Webpack 5 ، ولماذا أنا سعيد جدًا بهذا الأمر 🤩
أولاً ، كما تعلم ، Webpack هو مفتاح قطعة من لغز Angular CLI ، وهي تلعب دورًا كبيرًا في حجم الحزمة ، وبناء الأداء ، وما إلى ذلك.
ثانيًا ، يعد Webpack 5 إصدارًا رئيسيًا لسبب ما. يتضمن عددًا من التغييرات العاجلة ، وهو ما يفسر سبب استغراق Angular و gazillion المرافق / المكتبات في النظام البيئي بعض الوقت للترقية.
في ملاحظات الإصدار ، أشار فريق Webpack إلى أن Webpack 5 يركز على:
- تحسين أداء البناء باستخدام مستمر التخزين المؤقت
- تحسين التخزين المؤقت طويل المدى باستخدام خوارزميات وافتراضيات أفضل
- تحسين حجم الحزمة مع أفضل اهتزاز الشجرة وإنشاء الكود
- تحسين التوافق مع منصة الويب
- تنظيف الهياكل الداخلية
- إدخال تغييرات عاجلة (haha) الآن ، مما يسمح لهم بالبقاء على v5 لأطول فترة ممكنة
أروع ميزة في Webpack 5 هي دعم اتحاد الوحدة، والذي يوفر الأسس اللازمة لتسهيل إنشاء واجهات أمامية صغيرة. إنه خارج نطاق هذه المقالة قليلاً ، ولكن في لمح البصر ، يتيح اتحاد الوحدات النمطية للبنيات المختلفة أن تتصرف مثل رسم بياني للوحدة المتصل الضخمة ، ويسمح لنا باستيراد واستخدام الوحدات من البنيات البعيدة. الدفع الوثائق الرسمية لمعرفة المزيد.
من بين التغييرات الرئيسية ، أسقط Webpack 5 كل شيء تم إهماله مسبقًا (على سبيل المثال ، NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
)، طالما IgnorePlugin
و BannerPlugin
.
أيضًا ، تمت إزالة polyfills Node.js التي تم حقنها تلقائيًا مسبقًا ؛ وهذا أحد أكبر التغييرات في هذا الإصدار. سمحت هذه polyfills في البداية لـ Webpack للسماح لنا باستخدام وحدات مصممة لـ Node.js في المتصفح. كان ذلك رائعًا ، لكن كان له جانب سلبي كبير: الحزم الأكبر. بالإضافة إلى ذلك ، كانت هذه polyfills أقل فائدة ، حيث كانت هناك بدائل مكتبات متوافقة مع المستعرض أو توزيعات محددة تدعم المستعرض. اعتبارًا من Webpack 5 ، نظرًا لأن هذه polyfills لن تتم إضافتها تلقائيًا بعد الآن ، فقد نعثر على بعض المفاجآت. على سبيل المثال في الحالات التي نستخدم فيها وحدات مصممة لـ Node.js في المتصفح دون أن ندرك أنها عملت سابقًا بفضل Webpack. يمكنك معرفة المزيد عن ذلك هنا.
قدم Webpack 5 دعمًا أفضل للتخزين المؤقت طويل المدى. في وضع الإنتاج ، يتضمن الآن خوارزميات جديدة بشكل افتراضي:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
كما تشير القيمة ، تقوم هذه الخوارزميات بتعيين معرفات حتمية للقطع والوحدات النمطية ، وأسماء حتمية للتصدير.
Webpack 5 قادر على أداء اهتزاز الشجرة المتداخلة ، من خلال تتبع الوصول إلى الخصائص المتداخلة للصادرات (مرحبًا بك في Matrix) ، والتي من شأنها تحسين اهتزاز الشجرة. أيضا ، يمكن الآن تحليل التبعيات بين الصادرات والواردات من وحدة. هناك أيضًا تحسينات على اهتزاز شجرة CommonJS. وهناك طن المزيد من التحسينات.
يتضمن Webpack 5 أيضًا عددًا من التغييرات لتحسين تجربة المطور. على سبيل المثال ، هناك ملف خوارزمية معرف القطعة المسماة الجديدة يتم تمكينه افتراضيًا في وضع التطوير. تعطي هذه الخوارزمية الجديدة أسماءً يمكن قراءتها بواسطة الإنسان. ال target
الممتلكات كانت أيضا إلى حد كبير تحسن.
بصراحة ، ليس لدي مساحة كافية هنا لتغطية كل ما هو جديد مع Webpack 5 ، هناكالصورة م طريق جدا كثيرا. لذا سأتوقف هنا
إذا كنت تستخدم Webpack بشكل غير مباشر فقط من خلال Angular CLI ، فيجب أن يكون معظم هذا "شفافًا" بالنسبة لك. ولكن إذا كنت تستخدم ملف بناء Webpack المخصص في مشروعك ، فمن المحتمل أنك يجب أن تلقي نظرة على دليل الهجرة.
أخيرًا ، إذا كنت مهتمًا بمعرفة ما سيحدث بعد ذلك مع Webpack ، فراجع ملف خارطة الطريق لعام 2021 وبالطبع أحدث ملاحظات الإصدار.
تم إيقاف دعم IE11
بقدر ما قد يبدو الأمر محزنًا (من أنا أمزح؟ 😂) ، فإن Angular 12 توقف دعم IE11. يعتبر Internet Explorer ميتًا بالنسبة لمعظمنا ، ولكن لسوء الحظ ، لا تزال العديد من المنظمات تستخدمه في الإنتاج. وبالتالي ، ستتم إزالة دعم IE 11 بواسطة Angular 13 ، مما يعني أن هذه المنظمات تحتاج حقًا إلى البدء في الابتعاد عن IE (وهو أمر جيد على أي حال). لا مزيد من الأعذار!
بمجرد انتهاء دعم IE ، سيكون Angular أصغر وأسرع وبالتالي أفضل لنا جميعًا. أيضًا ، بمجرد زوال عبء الحفاظ على التوافق مع الإصدارات السابقة مع المتصفحات القديمة (IE11 هو آخر هذه المتصفحات!) ، عندئذٍ سيكون Angular قادرًا على الاستفادة من واجهات برمجة التطبيقات الحديثة (على سبيل المثال ، متغيرات CSS, مراقب التقاطع, شبكة CSS, وكلاء, صور الويب المتحركةو الأكثر من ذلك).
أنا حقًا لا أطيق الانتظار حتى يختفي دعم IE!
صارم بشكل افتراضي
نعم نعم نعم 🤩. اعتبارًا من Angular 12 ، فإن ملف الوضع الصارم للزاوية يتم تمكينه افتراضيًا في CLI. وهذا رائع.
كما تعلم ، أنا معجب كبير بالوضع الصارم لـ TypeScript ، ولكن أيضًا من وضع Angular الصارم. إذا كنت تريد معرفة المزيد ، فقم بإلقاء نظرة على ذلك المقال الذي كتبته العام الماضي و Minko Gechev's مقال يشرح التغيير.
بناء الإنتاج بشكل افتراضي
حتى الآن ، يتم تشغيل ملف ng build
أمر خلق بناء التنمية. اعتبارًا من Angular 12 ، ng build
سيتم الآن افتراضيًا إنشاء إنتاج.
نأمل أن يساعد ذلك بعض الفرق على تجنب ارتكاب خطأ بناء ونشر بنيات التطوير في بيئات الإنتاج. على الرغم من أنني أخشى أن الفرق التي ترتكب هذا الخطأ ستظل لديها مشكلات أخرى للتعامل معها
دعم Sass للأنماط المضمنة
يدعم Angular Sass منذ وقت طويل جدًا ، لكن حتى الآن ، لا يمكننا استخدام Sass إلا في أوراق الأنماط الخارجية. مع Angular 12 ، أصبح من الممكن الآن استخدام Sass مع أنماط المكونات المضمنة (على سبيل المثال ، داخل ملف styles
خاصية).
هذا يحتاج إلى تمكين عن طريق تعيين الجديد inlineStyleLanguage
الملكية ل true
in angular.json
.
دعم Tailwind
الريح الخلفية الآن مدعوم رسميًا من Angular. في الواقع ، تم تقديم الدعم في Angular CLI في الإصدار 11.2.
Tailwind هو مشغول بالسيطرة على العالم، خاصة الآن بعد أن أصبح يحتوي على ملف مترجم rad JIT، ومن الرائع أن يكون لديك دعم مدمج لها في Angular.
في السابق ، كانت إضافة Tailwind إلى مشروع Angular مطلوبة تخصيص بناء Webpack. ليس بعد الآن! الآن ، تعد إضافة Tailwind أمرًا بسيطًا مثل تثبيت الحزمة وإنشاء ملف tailwind.config.js
الملف باستخدام npx tailwindcss init
، والتأكد من التمكين الوضع JIT في Tailwind.
تحسينات HTTP
يقدم Angular 12 عددًا من التحسينات حول دعم HTTP الخاص به.
البيانات الوصفية للطلبات والمعترضين
أولا، HttpClient
يمكن الآن استخدامها لتخزين واسترداد البيانات الوصفية المخصصة للطلبات. هذا مفيد بشكل خاص لبرامج اعتراض HTTP. يمكن استخدام هذه القدرة من خلال الجديد HttpContext
.
في السابق ، كان من الصعب توفير سياق للاعتراضات ، ولكن الآن سيكون الأمر أكثر وضوحًا. الآن ، يتم توفير طرق HTTP المختلفة بواسطة HttpClient
تشمل ملف context: HttpContext
الخيار الذي يمكننا استخدامه لتمرير في الخريطة.
نتانيل بصل كتب مقالًا عن هذا ، لذا تحقق من ذلك إذا كنت تريد معرفة المزيد.
appendAll على HttpParams
• HttpParams
فئة جديدة الآن appendAll
الطريقة ، والتي يمكن استخدامها لإضافة مجموعة من المعلمات بسهولة في وقت واحد:
appendAll(params: {[param: string]: string|string[]}): HttpParams
يمكن الآن تمرير Params كأرقام و منطقية
في السابق ، لم يكن من الممكن استخدام الأرقام والقيم المنطقية مباشرةً كمعلمات HTTP. كان علينا تحويلها إلى سلاسل. ليس بعد الآن!
http.StatusCode
قدمت Angular قائمتها الخاصة بالأسماء التي يمكن قراءتها من قبل الإنسان لرموز حالة HTTP ، في شكل تعداد ثابت.
في السابق ، كان علينا تقديم الحل الخاص بنا إذا أردنا الحصول على أسماء يمكن للبشر قراءتها. بفضل هذه الميزة الجديدة ، يمكننا الآن استخدامها بدلاً من ذلك HttpStatusCode
.
فمثلا:
if (response.status === HttpStatusCode.Ok) { ...
}
بالنسبة لأولئك الذين يستخدمون TypeScript على كل من الواجهة الخلفية والواجهة الأمامية ، فإن هذا ليس مفيدًا للغاية (حيث من المحتمل أن يكون لدينا جميعًا تجريدًا خاصًا بنا بالفعل) ، ولكن إذا كان مشروعك يستخدم TypeScript / Angular فقط في الواجهة الأمامية ، تحسن لطيف.
XhrFactory
• XhrFactory
تم نقل فئة إلى حزمة مختلفة. يتعرض الآن من قبل angular/common
بدلا من angular/common/http
.
لاحظ أنه تم تضمين الترحيل في الترقية ، لذلك لن تلاحظ حتى إذا قمت بالتشغيل ng update
تغييرات جهاز التوجيه
لقد تغير جهاز التوجيه Angular قليلاً في Angular 12.
أولا، routerLinkActiveOptions
تم تحسين التوجيه. الآن ، من الممكن تحديد ما إذا كنا نطلب مطابقة تامة أم لا لأجزاء مختلفة من عنوان URL من أجل إضافة فئة CSS إلى ارتباط.
في السابق ، كنا نطلب فقط مطابقة تامة (أو لا) لعنوان URL بالكامل:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
الآن ، يمكننا بدلاً من ذلك توفير قواعد مطابقة دقيقة للمسارات ومعلمات الاستعلام ومعلمات المصفوفة والأجزاء.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
القيم المدعومة هي exact
, ignored
و subset
، والتي يمكن استخدامها ل queryParams
و matrixParams
. بالنسبة للمسارات ، يمكنك إما المرور exact
or subset
و exact
or ignored
ل fragment
.
نلاحظ أن isActive
طريقة جهاز التوجيه أيضًا هذه الخيارات الجديدة.
شظية لاغية
حتى الآن، ActivatedRouteSnapshot.fragment
لم يكن باطلاً. لقد تغير هذا مع Angular 12. لا تقلق كثيرًا ؛ ng update
قد حصلت على تغطيتها.
استمارات
مزيد من التحكم في الأحداث المنبعثة
• emitEvent
تمت إضافة الخيار إلى طرق مختلفة من FormGroup
و FormArray
. بفضل هذا التغيير ، سيكون من الممكن الآن التحكم في ما إذا كانت الأحداث تحتاج إلى البث أم لا في المزيد من الحالات.
على سبيل المثال ، في السابق عندما تمت إزالة عنصر تحكم باستخدام امتداد removeControl
طريقة FormGroup
، ثم حدث دائمًا ما. مع هذا التغيير ، سنتمكن الآن من تجنب مثل هذه المشاكل.
• emitEvent
تمت إضافة الخيار إلى الطرق التالية من FormGroup
:
addControl
removeControl
setControl
وإلى الطرق التالية من FormArray
:
push
insert
removeAt
setControl
clear
الحد الأدنى والحد الأقصى لدعم المدققين للنماذج التي تعتمد على القوالب
• min
و max
يمكن الآن استخدام مدققي Angular مع النماذج التي تعتمد على القوالب:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
لاحظ أن هذا تغيير جذري ، حيث تم تجاهلها سابقًا.
i18n
لقد تغير نظام i18n الخاص بـ Angular مع هذا الإصدار.
كما هو موضح في منشور مدونة الإعلان ، يوجد حاليًا عدد من تنسيقات معرف الرسالة القديمة قيد الاستخدام. هذه المشكلات هشة ويمكن أن تظهر بسبب المسافات البيضاء وقوالب التنسيق وتعبيرات وحدة العناية المركزة.
يقدم Angular 12 تنسيقًا جديدًا لمعرف الرسالة الكنسي (على سبيل المثال ، تنسيق واحد للحكم عليهم جميعًا). هذا التنسيق أكثر مرونة وبديهية.
سيؤدي هذا التنسيق إلى تقليل إبطال الترجمة غير الضروري وتكلفة إعادة الترجمة المرتبطة في التطبيقات التي لا تتطابق فيها الترجمات بسبب تغييرات المسافات على سبيل المثال.
منذ الإصدار 11 ، يتم تكوين المشاريع الجديدة تلقائيًا لاستخدام معرّفات الرسائل الجديدة ، والآن توجد أدوات لترحيل المشاريع الحالية مع الترجمات الحالية. إذا كنت مهتمًا ، فيمكنك استخدام ملف localize-migrate
أداة لترحيل معرفات رسالتك:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
يمكنك العثور على مزيد من المعلومات هنا.
تحسينات في الأداء
مع هذا الإصدار ، هناك عدد من تحسينات الأداء. الأكثر وضوحًا يأتي مع الترقية إلى Webpack 5 ، ولكن هناك المزيد:
تمت إزالة عدد من الأساليب غير المستخدمة من DomAdapter
. إنه رائع لأن طرقه ليست قابلة للاهتزاز ، وقد تم تضمينها في جميع تطبيقات Angular ، كما هو موضح في ملف المقابلة العلاقات العامة.
ينشئ Angular الآن رمزًا أقل للوصول الآمن إلى الممتلكات ؛ على سبيل المثال لتعبيرات القالب مثل a?.b
والاندماج الصفري المدعوم حديثًا: a ?? b
.
يدعم المترجم Angular الآن التجميع المتزايد حتى في وجود ملفات المصدر المعاد توجيهها. في السابق ، لم يكن من الممكن إعادة استخدام العمل من التجميع السابق عندما قام TypeScript بإلغاء تكرار الملفات المصدر. يمكنك قراءة المزيد عن ذلك هنا.
يقوم المترجم Angular الآن بتخزين مسار نظام الملفات للملفات المصدر مؤقتًا. سابقا ، دعا مرارا وتكرارا fs.resolve()
، وهو ما يستغرق وقتًا طويلاً.
• getDirectives
تم تحسين الوظيفة. إلى جانب هذا التغيير ، فإن ng
تم أيضًا توسيع مساحة الاسم لتشمل ملف getDirectiveMetadata
خدمة.
و هناك اكثر.
تحسينات ng API
• ng
تصحيح الأخطاء API التي يمكننا استخدامها من المتصفح ، تم تحسين أدوات تطوير Angular 12.
هناك وظيفة جديدة تسمى getDirectiveMetadata
، والتي يمكن استخدامها لاسترداد معلومات حول المكونات والتوجيهات. لا أعتقد أننا سنحتاجه كثيرًا ، ولكن تحسينات أدوات التطوير المستقبلية ستعتمد على الأرجح على ذلك. يمكنك معرفة المزيد أكثر من هنا.
تسمى وظيفة جديدة لملف التعريف esetProfiler
تم تنفيذه أيضًا ، وهو متوفر أيضًا في وضع الإنتاج. يمكن استدعاء هذه الوظيفة الجديدة في عدد من السيناريوهات. على سبيل المثال ، يمكن استخدامه لتتبع مدد إنشاء القوالب ، وتحديثات القوالب ، ومعالجة خطافات دورة الحياة ، وما إلى ذلك مرة أخرى ، سيتم الاستفادة من واجهة برمجة التطبيقات هذه بواسطة أدوات التطوير القادمة ، مما يمنحنا الكثير من المعلومات الثاقبة حول كيفية أداء تطبيقاتنا مدة العرض.
لا يزال هذا تجريبيًا في هذه المرحلة ، لكن أعتقد أننا سنسمع المزيد عن هذا لاحقًا. أشعر بالفضول لمعرفة ما إذا كانت أدوات مثل Sentry ستدمج الدعم لجمع هذا النوع من المعلومات من أجل تزويدنا بلوحات أداء مفيدة / متى ستدمجها.
بعد أيام قليلة من إصدار Angular 12 ، قام فريق Angular بذلك أعلن توفر أدوات Angular Dev الجديدة تمامًا لمتصفح Google Chrome. يمكنك تنزيل ملفات هنا.
باستخدام امتداد المتصفح الجديد هذا ، يمكنك بسهولة فحص تطبيقات Angular أثناء التطوير. انه يدعم:
- تصور هيكل التطبيق (أي فحص شجرة المكونات)
- استكشاف وتحرير المكونات
- أداء التنميط
باستخدام المحلل المضمن ، يمكننا تسجيل أحداث الكشف عن التغيير ومعاينتها فور حدوثها. لكل دورة اكتشاف تغيير ، يمكننا النظر إلى المدة التي استغرقتها ، والمكونات التي استغرقت أطول وقت ، وما إذا كانت هذه الدورة تسببت في حدوث انخفاض في الإطارات.
كان لدى Angular سابقًا أدوات Dev شبه رسمية من خلال بشير (التي هي أساس الأدوات الجديدة!) ، لكن تلك لم تكن متوافقة مع Ivy. لذا فهذه أخبار رائعة لمجتمع Angular!
وأكثر من ذلك ...
هناك طن أكثر تغييرات طفيفة في هذا الإصدار. فيما يلي نظرة عامة سريعة.
APP_INITIALIZER يدعم الآن Observables
حتى الآن ، لم يكن من الممكن استخدام Observables مع APP_INITIALIZER
. اعتبارًا من Angular 12 ، يمكننا الآن القيام بذلك ، مما سيسمح برمز أكثر وضوحًا!
في حالة عدم معرفتك بميزة Angular هذه بعد ، APP_INITIALIZER
is رمز يمكننا استخدامها لتحديد الوظائف التي يجب تنفيذها أثناء تهيئة التطبيق. إذا كانت هذه الوظيفة غير متزامنة ، فقم بإرجاع ملف Promise
أو Observable
(جديد: p) ، ثم ينتظر Angular حتى يكتمل قبل بدء التطبيق.
هذا التغيير مرحب به كثيرًا ، لأنه يعني أنه يمكننا كتابة المزيد من التعليمات البرمجية باستخدام RxJS ، بدلاً من الاضطرار إلى "الرجوع" إلى Promise
API.
يمكنك قراءة المزيد عن ذلك هنا.
التحكم في وقت التشغيل في الرسوم المتحركة
في السابق ، كانت الطريقة الوحيدة لتعطيل الرسوم المتحركة هي توفير ملف NoopAnimationsModule
. اعتبارًا من Angular 12 ، أصبح من الممكن الآن تعطيل الرسوم المتحركة بناءً على معلومات وقت التشغيل ، باستخدام BrowserAnimationModule.withConfig
الطريقة ، وتمريرها disableAnimations
خاصية منطقية.
طريقة historyGo جديدة في خدمة الموقع
• LocationService
يتضمن Angular الآن أ historyGo
الطريقة ، والتي يمكن استخدامها للتنقل نحو صفحة معينة في سجل الجلسة ، والتي يتم تحديدها من خلال موقعها النسبي إلى الصفحة الحالية. هذه الطريقة تتوافق مع الأم window.history.go
الأسلوب. تحقق من MDN لبعض الأمثلة.
تحسينات خدمة اللغة
تم أيضًا تحسين خدمة اللغة ، التي توفر لمؤسسات تطوير البرامج (IDE) ، جميع الأفكار المفيدة حول الكود الزاوي مع هذا الإصدار.
مع Angular 12 ، يتم تمكين خدمة اللغة افتراضيًا (كانت تتطلب منا الاشتراك في السابق).
اعتبارًا من Angular 12 ، سيكتشف أيضًا ما إذا كان فحص صارم لنوع القالب لم يتم تمكينه ، و سوف ننصحك لتمكين هؤلاء.
تتضمن خدمة اللغة الآن أيضًا إمكانيات تتبع الأداء ، والتي يمكن استخدامها لتتبع الأداء. يمكن تمكين هذا في VSCode ، كما هو موضح هنا (هذا مستوى منخفض إلى حد ما).
إذا كنت لا تعرف خدمة اللغة بعد ، فتحقق من ذلك المستندات الرسمية، أو مشاركة المدونة اللطيفة التي كتبها فرقة النينجا، أو هذا فيديو مقدمة.
تعطيل قواعد النسالة مباشرة من قوالب HTML
يقوم برنامج التحويل البرمجي للقالب Angular الآن بتتبع تعليقات HTML.
في السابق ، لم يكن من الممكن تعطيل قواعد linter من قوالب HTML لأن مترجم القالب Angular تجاهل التعليقات. كان الحل هو تعطيل هذه القواعد للقالب بأكمله من وحدة تحكم المكون. بفضل هذا التغيير ، سيكون من الممكن الآن القيام بذلك بدقة أكبر من النموذج:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
ياي للحصول على رمز أنظف!
يدعم DatePipe الآن معيار وحدة العناية المركزة المستقلة يومًا من الأسبوع
في السابق ، كان لم يكن ممكنا لتنسيق تاريخ إلى يوم قائم بذاته من الأسبوع باستخدام DatePipe.
بفضل هذا التغيير ، يتم الآن دعم تنسيق التاريخ الفنلندي ، وأنا متأكد من أنه خبر سار لجزء صغير من مجتمع Angular 😉
دعم إلى الأمامالمراجع المقدمة في مجالات الديكور عن طريق الحقن
من الممكن الآن استخدام forwardRef
في حدود providedIn
مجال @Injectable
مصمم.
خطاف محول تحويل جديد على واجهة ResourceHost
A transformResource
تمت إضافة الطريقة إلى ResourceHost
واجهه المستخدم. بفضل هذا ، أصبح من الممكن الآن للأدوات القيام بأشياء مثل تقديم دعم المعالج المسبق للأنماط المضمنة. هذا هو ما يمكّن الدعم الجديد لـ SASS مع الأنماط المضمنة.
يمكنك معرفة المزيد عن ذلك هنا و هنا.
من الممكن إنشاء تطبيقات منفذ جهاز التوجيه المخصص
حتى الآن ، كان إنشاء منافذ توجيه مخصصة أمرًا ممكنًا ، ولكنه يتطلب القفز عبر بعض الحلقات (على سبيل المثال ، تسجيل منافذ مخصصة باستخدام ChildrenOutletContexts
).
يوفر Angular 12 أ دعم أنظف لمنافذ أجهزة التوجيه المخصصة.
إصلاحات الشوائب
كالعادة ، هناك gazillion إصلاحات للأخطاء متضمنة في هذا الإصدار.
هذه نسخة من ملاحظات الإصدار:
- الرسوم المتحركة: ضمان ترتيب مساحة اسم انتقال متسق (#19854()01cc995)
- الرسوم المتحركة: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()e918250)
- الرسوم المتحركة: تنظيف عناصر DOM عند إزالة عرض الجذر (#41059()c49b280)
- الرسوم المتحركة: السماح بالرسوم المتحركة على العناصر الموجودة في Shadow DOM (#40134()أبي 42c8) ، يغلق #25672
- الرسوم المتحركة: تنظيف عناصر DOM عند إزالة عرض الجذر (#41001()a31da48)
- بازل: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()8503246)
- بازل: تحديث أدوات البناء لأحدث التغييرات في rules_nodejs (#40710()696f7bc)
- بازل: تحديث اختبار التكامل للاستخدام Rules_nodejs@3.1.0 (#40710()34of89a)
- بازل: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()2c90391)
- مقاعد البدلاء: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()e721a5d)
- مشترك: أضف ContentType الصحيح للقيم المنطقية مع نص طلب HttpClient (#38924()#41885()922a602)
- مشترك: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()f2b6fd8)
- مشترك: لم يتم العثور على شريط تمرير منفذ العرض عناصر داخل الظل DOM (#41644()c0f5ba3) ، يغلق #41470
- مشترك: إعادة التصدير والإيقاف مؤقتًا
XhrFactory
(#41393()xnumxdfaxnumx) - مشترك: تنظيف موقع تغيير المستمعين عند إزالة عرض الجذر (#40867()38524c4) ، يغلق #31546
- مشترك: السماح بالرقم أو منطقيًا مثل معلمات http (#40663()91cdc11) ، يغلق #23856
- مشترك: تجنب تغيير كائن السياق في NgTemplateOutlet (#40360()d3705b3) ، يغلق #24515
- مترجم: الحفاظ على قواعد الصفحة في أنماط مغلفة (#41915()3e365ba) ، يغلق #26269
- مترجم: شريط محددات النطاق من
@font-face
قواعد (#41815()2a11cda) ، يغلق #41751 - مترجم: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()عبدالمحسن 8126)
- مترجم: القوالب المضمنة غير الحرفية التي تمت معالجتها بشكل غير صحيح في التجميع الجزئي (#41583()ab257b3)
- مترجم: عدم إنشاء تعليمات تحديث لـ ng-template داخل مساحات الأسماء البديلة (#41669()2bcbbda) ، يغلق #41308
- مترجم: تجنب تحليل EmptyExpr مع مسافة للخلف (#41581()e1a2930)
- مترجم: التعامل مع خصائص CSS المخصصة الحساسة لحالة الأحرف (#41380()e112e32) ، يغلق #41364
- مترجم: تشمل المكونات المستخدمة أثناء تجميع JIT للإعلان الجزئي عن المكونات (#41353()ff9470b) ، يغلق #41104 #41318
- مترجم: دعم متعدد
:host-context()
محددات (#40494()07b7af3) ، يغلق #19199 - مترجم: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()f728490)
- مترجم- CLI: استخدام "لعنوان URL لخريطة المصدر للقوالب غير المباشرة (#41973()7a4d980) ، يغلق #40854
- مترجم- CLI: فضح الرابط كمكوِّن إضافي بابل (#41918()8fdac8f)
- مترجم- CLI: تفضل الصادرات غير المستعارة في بواعث المرجعية (#41866()75bb931) ، يغلق #41443 #41277
- مترجم- CLI: السماح للرابط بمعالجة القيم المنطقية المصغرة (#41747()1fb6724) ، يغلق #41655
- مترجم- CLI: سلسلة مطابقة الإعلانات الجزئية المفهرسة (#41747()f885750) ، يغلق #41655
- مترجم- CLI: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()5b463f4)
- مترجم- CLI: أنواع حرفية الإكمال التلقائي في القوالب. (#41456()#41645()8b2b5ef)
- مترجم- CLI: لا تخطئ في المعالجة المسبقة إذا كان المكون لا يحتوي على أنماط مضمنة (#41602()a5fe8b9)
- مترجم- CLI: تأكد من مسارات المترجم
ts.Program
بشكل صحيح (#41291()ديكك 74) - مترجم- CLI: منع استبعاد الواردات الافتراضية في عمليات إعادة التجميع المتزايدة (#41557()7f16515) ، يغلق #41377
- مترجم- CLI: حل
rootDirs
إلى المطلق (#41359()3e0fda9) ، يغلق #36290 - مترجم- CLI: تضيف
useInlining
خيار لكتابة check config (#41043()09 aefd2) ، يغلق #40963 - مترجم- CLI:
readConfiguration
يجب أن تتجاوز الخيارات الحالية الخيارات في tsconfig (#40694()b7c4d07) - مترجم- CLI: مد
angularCompilerOptions
في tsconfig من العقدة (#40694()5eb1954) ، يغلق #36715 - مترجم- CLI: تحديث اختبارات تكامل ngcc لأحدث التغييرات في rules_nodejs (#40710()d7f5755)
- مترجم- CLI: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()b75d7cb)
- النواة: لا تحتفظ بالمكونات والوحدات المجمعة ديناميكيًا (#42003()1449c5c) ، يغلق #19997
- النواة: استدعاء ملف التعريف حول خطافات دورة حياة ngOnDestroy (#41969()اي 9ddc57)
- النواة: AsyncPipe متوافق الآن مع RxJS 7 (#41590()9759bca)
- النواة: التعامل مع سمات i18n متعددة مع روابط التعبير (#41882()73c6c64) ، يغلق #41869
- النواة: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()f9c1f08)
- النواة: اكتشاف المنشئات المركبة التي تم خفض المستوى باستخدام TS 4.2 (#41305()274dc15) ، يغلق #41298
- النواة: مفاتيح
emitDistinctChangesOnlyDefaultValue
على صواب (#41121()7096246) - النواة: إزالة ثابت EMPTY_OBJ المكرر (#41066()bf158e7)
- النواة: إزالة تكرار ثابت EMPTY_ARRAY (#40991()e12d9de)
- النواة: السماح بتحديث سياق EmbeddedViewRef (#40360()a3e1719) ، يغلق #24515
- النواة: اجعل DefaultIterableDiffer يحتفظ بترتيب التكرارات (#23941()a826926) ، يغلق #23815
- النواة: يجب تشغيل خيارات NgZone لتسيير الفحم في ثابت بشكل صحيح (#40540()22f9e45)
- عناصر: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()4f5d094)
- عناصر: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()efd4149)
- نماذج: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()dc975ba)
- HTTP: أكمل الطلب في الوقت المحدد (#39807()61a0b6d) ، يغلق #26453
- HTTP: إرسال خطأ في حدث إحباط XMLHttpRequest (#40767()3897265) ، يغلق #22324
- خدمة اللغة: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()9b6198c)
- خدمة اللغة: استخدام إصدارات البرنامج النصي للتجميعات المتزايدة (#41475()78236bf)
- خدمة اللغة: قدم فقط إكمالات خاصية Angular في القوالب (#41278()0226a11)
- خدمة اللغة: إضافة خيار البرنامج المساعد لفرض StrictTemplates (#41062()e9e7c33)
- خدمة اللغة: استخدام نقطة دخول واحدة لـ Ivy و View Engine (#40967()e986a97)
- توطين: استرخاء الخطأ للتحذير من الهدف المفقود (#41944()35 تقدم 2) ، يغلق #21690
- توطين: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()658ed1f)
- توطين: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()4b469c9)
- إن جي سي سي: اكتشاف المنشئات المركبة التي تم خفض المستوى باستخدام TS 4.2 (#41305()8د3دا56) ، يغلق #41298
- متصفح النظام الأساسي: منع تسرب الذاكرة لعقد النمط إذا تم استخدام تغليف DOM الظل (#42005()d555555) ، يغلق #36655
- متصفح النظام الأساسي: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()ea05cfd)
- متصفح النظام الأساسي: تكوين
XhrFactory
لاستخدامBrowserXhr
(#41313()e0028e5) ، يغلق #41311 - متصفح النظام الأساسي: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()7ecfd2d)
- منصة متصفح ديناميكية: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()bc45029)
- خادم النظام الأساسي: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()4b9d4fa)
- التوجيه: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()0067 د)
- التوجيه: استرداد المسار المخزن فقط عندما تشير استراتيجية إعادة الاستخدام إلى وجوب إعادة إرفاق (#30263()a4ff071) ، يغلق #23162
- التوجيه: دمج بشكل متكرر مباريات المسار الفارغ (#41584()1179dc8) ، يغلق #41481
- التوجيه: يمكن أن يكون الجزء فارغًا (#37336()b555160) ، يغلق #23894 #34197
- التوجيه: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()350 دادا)
- عامل الخدمة: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()6b823d7)
- عامل الخدمة: تحديث المسبوكات من أجل استخدام JSON.parse (#40710()4f7ff96)
- رفع مستوى: keep $ interal.flush عند استخدام ngMocks (#30229()87dc851)
- رفع مستوى: تحديث النطاق المدعوم لإصدارات العقدة لتضمين إصدارات LTS فقط (#41822()10c4523)
بالمناسبة ، هل لاحظت ذلك AsyncPipe
وكان مصححة بواسطة Ben Lesh ليكون متوافقًا مع كل من RxJS 6 و 7؟ كم ذلك رائع؟
كسر التغييرات
كالعادة ، هناك عدد من التغييرات العاجلة في هذا الإصدار.
As ملاحظات الإصدار الرسمية واضحة جدًا ، أنا فقط أقوم بنسخ / لصق تلك الموجودة هنا:
- لم تعد حزم UMD المصغرة مضمنة في حزم NPM الموزعة.
- الرسوم المتحركة: تتم الآن إزالة عناصر DOM بشكل صحيح عند إزالة عرض الجذر. إذا كنت تستخدم SSR وتستخدم HTML للتطبيق للعرض ، فستحتاج إلى التأكد من حفظ HTML في متغير قبل إزالة التطبيق. من الممكن أيضًا أن تعتمد الاختبارات عن طريق الخطأ على السلوك القديم من خلال محاولة العثور على عنصر لم تتم إزالته في اختبار سابق. إذا كانت هذه هي الحالة ، فيجب تحديث الاختبارات الفاشلة للتأكد من أن لديهم كود إعداد مناسب يهيئ العناصر التي يعتمدون عليها
- مشترك: طرق
PlatformLocation
فئة ، وهيonPopState
وonHashChange
، تستخدم للعودةvoid
. الآن هذه الطرق تعيد الوظائف التي يمكن استدعاؤها لإزالة معالجات الأحداث - مشترك: طرق
HttpParams
تقبل الطبقة الآنstring | number | boolean
بدلا منstring
لقيمة المعلمة. إذا قمت بتوسيع هذه الفئة في التطبيق الخاص بك ، فسيتعين عليك تحديث تواقيع الأساليب الخاصة بك لتعكس هذه التغييرات - مترجم- CLI: لم تعد المكتبات المرتبطة تنشئ معرفات رسائل i18n القديمة. سيحتاج أي تطبيق متلقٍ للمعلومات يوفر ترجمات لهذه الرسائل إلى ترحيل معرّفات رسائلهم باستخدام امتداد
localize-migrate
أداة سطر الأوامر - النواة: لم يعد Angular يحافظ على دعم العقدة v10 ، لذلك إذا كنت لا تزال تستخدمه لبيئة التطوير الخاصة بك ، فقد حان الوقت للترقية!
- النواة: سابقًا
ng.getDirectives
ألقى دالة خطأ في حالة عدم وجود سياق زاوي مرتبط بعقد DOM معين (على سبيل المثال ، إذا تم استدعاء دالة لعنصر DOM خارج تطبيق Angular). كان هذا السلوك غير متناسق مع أدوات تصحيح الأخطاء الأخرى الموجودة ضمنng
مساحة الاسم ، التي عالجت هذا الموقف دون إثارة استثناء. الآن استدعاءng.getDirectives
قد ينتج عن وظيفة لعقد DOM هذه مصفوفة فارغة يتم إرجاعها من نواة الوظيفة هذه: التبديل الافتراضي لـemitDistinctChangesOnlyDefaultValue
مما يغير السلوك الافتراضي وقد يتسبب في فشل بعض التطبيقات التي تعتمد على السلوك غير الصحيح
emitDistinctChangesOnly
تم أيضًا إيقاف العلامة وستتم إزالتها في إصدار رئيسي مستقبلي
سيطلق التطبيق السابق تغييرات QueryList.changes.subscribe
كلما QueryList
تم إعادة حسابه. نتج عن ذلك عدد كبير بشكل مصطنع من إخطارات التغيير ، حيث من الممكن إعادة الحساب QueryList
النتائج في نفس القائمة. عندما QueryList
يُعاد حسابه هو أحد تفاصيل التنفيذ ، ولا ينبغي أن يكون الشيء الذي يحدد عدد مرات إطلاق حدث التغيير.
لسوء الحظ ، تسبب إصلاح السلوك تمامًا في فشل العديد من التطبيقات الحالية. لهذا السبب ، يعتبر Angular هذا الإصلاح إصلاح كسر وقد قدم علامة في @ContentChildren
و @ViewChildren
الذي يتحكم في السلوك.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
للتوافق مع الإصدارات السابقة قبل الإصدار 12emitDistinctChangesOnlyDefaultValue
كان من المقرر ان false
. هذا التغيير
يغير الافتراضي إلى true
.
- النواة: نوع ملف
APP_INITIALIZER
تم تغيير الرمز المميز ليعكس بشكل أكثر دقة أنواع قيم الإرجاع التي تتم معالجتها بواسطة Angular. في السابق ، تمت كتابة كل رد اتصال مُهيئ للعودةany
، هذا الانPromise<unknown> | Observable<unknown> | void
. في حالة عدم استخدام التطبيق الخاص بك لملفInjector.get
orTestBed.inject
API لحقن ملفAPP_INITIALIZER
رمز مميز ، قد تحتاج إلى تحديث الرمز لحساب النوع الأكثر صرامة.
بالإضافة إلى ذلك ، قد يقوم TypeScript بالإبلاغ عن خطأ TS2742 إذا كان ملف APP_INITIALIZER
يتم استخدام الرمز المميز في التعبير الذي يجب إرسال نوعه المستنتج إلى ملف .d.ts. للتغلب على هذه المشكلة ، يلزم وجود تعليق توضيحي صريح من النوع ، والذي سيكون عادةً Provider
or Provider[]
.
-
النواة: الحد الأدنى المدعوم
zone.js
الإصدار هو0.11.4
. وبالتالي ، فهذا يعني أنه إذا كنت تستخدم إصدارًا أقدم ، فقد حان الوقت أيضًا لترقية zone.js في مشروعك! -
نماذج: •
emitEvent
تمت إضافة الخيار إلى ما يليFormArray
وFormGroup
أساليب: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
إذا كان التطبيق الخاص بك يحتوي على فئات مخصصة تمتد FormArray
or FormGroup
الطبقات وتجاوز
الطرق المذكورة أعلاه ، قد تحتاج إلى تحديث التنفيذ الخاص بك لأخذ الخيارات الجديدة فيه
حساب وتأكد من أن التجاوزات متوافقة من منظور الأنواع.
- نماذج: سابقا
min
وmax
السمات المحددة في<input type="number">
تم تجاهلها بواسطة وحدة النماذج. الآن وجود هذه الصفات
الزناد min / max منطق التحقق (في حالةformControl
,formControlName
orngModel
التوجيهات موجودة أيضًا على إدخال معين) و
حالة التحكم في النموذج المقابلة ستعكس ذلك. - متصفح النظام الأساسي:
XhrFactory
تم نقله من@angular/common/http
إلى@angular/common
.
قبل
import { XhrFactory } from '@angular/common/http';
بعد
import { XhrFactory } from '@angular/common';
- التوجيه: ستُبلغ عمليات التحقق من القيمة الفارغة الصارمة عن احتمال أن يكون الجزء فارغًا.
مسار الترحيل: إضافة علامة فارغة. - التوجيه: نوع ملف
RouterLinkActive.routerLinkActiveOptions
كان الإدخال
موسعة للسماح بمزيد من التحكم الدقيق. الكود الذي سبق قراءته
قد تحتاج هذه الخاصية إلى التحديث لمراعاة النوع الجديد.
خارطة طريق محدثة
وفقًا للزاوية الحالية خريطة طريق، الفريق مشغول الآن بالتحسينات التالية:
- تحسين تجربة المطور أثناء التصحيح والتنميط. يجب أن يساعدنا هذا في فهم بنية المكون (أتخيل أن أدوات React Dev تسمح لـ React) ، وتغيير الاكتشاف
- تحسين أوقات الاختبار وتصحيح الأخطاء باستخدام التفكيك التلقائي: من المفترض أن يؤدي ذلك إلى تحسين العزل بين الاختبارات وأوقات الاختبار. ال سرير اختبار سيتم أيضًا تغييرها لتنظيف بيئة الاختبار وتدميرها تلقائيًا بعد تنفيذ كل اختبار
- استخدام ES2017 + كإخراج افتراضي: سيقومون بتحديد حواجز الطرق وإزالتها بحيث يمكن ترقية لغة الإخراج الافتراضية
- دمج الويب MDC في المادة الزاويّة
- تحسين إمكانية الوصول إلى مكونات المواد الزاويّة
- نشر أدلة حول المفاهيم المتقدمة مثل اكتشاف التغيير ، وتوصيف الأداء ، والتفاعلات مع Zone.js ، إلخ
- تحديث استراتيجية اختبار e2e (CFR أعلاه)
- تحضير الترقية إلى RxJS v7 +. كما تعلم ، كان RxJS 7 صدر مؤخرا. نأمل أن نتمكن قريبًا من الترقية
يخطط فريق Angular في المستقبل إلى:
- انظر إلى بنية الواجهة الأمامية المصغرة: قد يقدمون لنا وسائل لإنشاء واجهات صغيرة بسهولة باستخدام Angular
- تحسين تجربة المطور من خلال الكتابة الصارمة للنماذج الزاويّة (نحن في أمس الحاجة إلى ذلك)
- اجعل Zone.js اختياريًا ، والذي يجب أن يبسط الإطار ، ويحسن تصحيح الأخطاء ، ويقلل من أحجام الحزم ويسمح أيضًا بالاستفادة من بناء الجملة الأصلي غير المتزامن / انتظار
- تحسين أداء البناء من خلال دمج مترجم Angular (
ngc
) كمكوِّن إضافي لمترجم TypeScript - السماح بإضافة توجيهات لعناصر المضيف. لقد طلب المجتمع ذلك لفترة طويلة أيضًا!
- اجعل NgModules اختيارية لتسهيل منحنى التعلم
- زودنا بوسائل أسهل لتنفيذ تقسيم الكود على مستوى المكون
المواد الزاوي والزاوية CDK
هجرة ساس
داخليًا ، تم ترحيل كل من Angular Material و CDK إلى ملف نظام وحدة Sass الجديد.
إذا كان التطبيق الخاص بك يستخدم أيًا من هذين ، فستحتاج إلى التأكد من أنك قمت باستبداله node-sass
by sass
: https://www.npmjs.com/package/sass. ال node-sass
لم يتم الحفاظ على الحزمة بعد الآن!
مع هذا الترحيل ، تم تحسين واجهة برمجة تطبيقات سمات Sass ، وهي تتيح لنا الآن الاستفادة من Sass @use
خدمة.
هناك الآن نقطة دخول واحدة لـ @angular/material
و @angular/cdk
.
أخيرًا ، تم أيضًا تغيير واجهات برمجة التطبيقات من أجل الوضوح. تمت إعادة تسمية العديد من الوظائف والمزج والمتغيرات على طول الطريق.
يمكنك العثور على مزيد من المعلومات حول هذه التغييرات في دليل السمات الجديد: https://github.com/angular/components/blob/master/guides/theming.md. بالإضافة إلى ذلك ، لاحظ أنه تمت إعادة كتابة الأدلة الموجودة على https://material.angular.io لعرض واجهة برمجة التطبيقات الجديدة وتضمين التفسيرات.
ستقوم عملية الترقية تلقائيًا بترحيل الرمز إلى Sass API الجديد. يمكنك أن تجد أمثلة قبل / بعد هنا.
تغييرات الزاوي CDK
الإصدار 12 يتضمن عددا من التغييرات إلى Angular CDK.
هنا ، سأدرج الميزات الجديدة فقط ، ولكن يمكنك التحقق من ملاحظات الإصدار إذا كنت تريد تفاصيل حول إصلاحات الأخطاء وتحسينات الأداء:
- السحب والإفلات: الحدث الذي تم إسقاطه يتضمن الآن ملف
dropPoint
الخاصية ، تحديد النقطة التي يشير إليها الماوس بالضبط عندما تم إسقاط العنصر. مزيد من المعلومات هنا - السحب والإفلات: حاوية المعاينة يمكن الآن تخصيصها
- طاولات ومكاتب : التوجيه الجديد يسمح بـ تمكين مكرر عرض المحذوفات، الذي يخزن الصفوف التي تم التخلص منها مؤقتًا ويعيد استخدامها عند تغيير مجموعة البيانات. يمكن أن يساعد ذلك في تحسين الأداء (تقليل زمن الوصول)
- طاولات ومكاتب : وأضاف إزاحة العناصر اللاصقة إلى
StickyUpdate
الواجهة - السائر: عندما يحاول المستخدم الابتعاد عن خطوة ، فإن ملف
interacted
سيكون الحدث الآن منبعث - السائر: يمكن أن يكون الاتجاه الآن غير
- إمكانية الوصولفي ممارسة اللياقة البدنية:
FocusOptions
موضوع يمكن تمريرها الآن في أساليب فخ التركيز المختلفة - الاختبار: بيئة تسخير WebDriver الجديدة. لم أغوص في هذا الأمر حتى الآن ، لذا لا يمكنني إخبارك أكثر. الدفع العلاقات العامة
تغيرات المواد الزاوي
وهناك أيضا عدد من تغييرات للمواد الزاويّة. مرة أخرى ، تحقق من ملاحظات الإصدار للحصول على القائمة الكاملة لإصلاحات الأخطاء.
الميزات الجديدة:
- منتقي التاريخ: لم يعد يعتمد في الحوار
- السائر: يمكن الآن تغيير الاتجاه ديناميكيًا (تغيير مماثل cfr في CDK)
- السائر: السماح للمحتوى ليكون قدم كسول
- القائمة: السماح بتحديث موضع القائمة برمجيا
- خطأ حصيرة: يستخدم الآن
aria-live="polite"
بدلا منrole="alert"
. المزيد من التفاصيل هنا - علامات التبويب: أضف طريقة إلى وضع التركيز برمجيًا على علامة تبويب محددة
- قائمة: يقوم الآن بإرجاع مصفوفة مع خيارات متغيرة من ملف
selectAll
وdeselectAll
أساليب. الدفع العلاقات العامة لمزيد من التفاصيل - تبديل الشرائح: السماح ل تكوين اللون الافتراضي بشكل عام من خلال مزود
- توولتيب: يعرض الآن الموضع الفعال للتلميح من خلال فئة على المكون
- راديو, مربع و المنزلق: قم بتضمين لون الخلفية لتلك المكونات في ملف أوراق أنماط الطباعة
هناك أيضًا عدد من التغييرات في الإصدار التجريبي: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
الزاوي العالمي
الزاوي العالمي 12 هو أيضًا طازجة من الفرن.
مع هذا الإصدار ، يونيفرسال الآن يتضمن CSS الهامة بشكل افتراضيوهو رائع.
يشمل Universal الآن ملف proxyConfig
الخيار لتوفير تكوينات وكيل مخصصة لملف ssr-dev-server
البناء.
في هذا الإصدار ، يوجد محرك SSR جديد (تجريبي) يسمى نفل (يذكرني بأداة الجودة في نظام Java البيئي). يبدو هذا المحرك الجديد واعدًا. يهدف إلى تبسيط الأمور ، والتخلص من Window is undefined
خطأ ، وإزالة الحاجة إلى إصدارات متعددة لـ SSR / prerender ، وإنشاء قذائف للتطبيق بدون بنية إضافية ، والمزيد. من المحتمل أن نسمع المزيد عنها لاحقًا. إذا كنت فضوليًا ، فتحقق من ذلك العلاقات العامة.
يتضمن هذا الإصدار ملف باني التي يمكن استخدامها لإنشاء صفحات ثابتة (أي ما قبل التصيير) باستخدام نهج Universal Clover الجديد.
أخيرًا ، يتضمن هذا الإصدار أيضًا دعم TLS لخادم التطوير.
Google Maps
كما تعلم ، يتضمن Angular مكونات لخرائط Google و Youtube. يقدم الإصدار 12 بعض التحسينات لمكون خرائط Google:
- يتضمن الآن ملف
icon
الإدخال لتخصيص العلامة بسهولة - يصدر الآن ملف
clusterClick
حدث عندما الكتلة تم النقر عليه - ويشمل غلاف حول Google Maps Geocoder API ، والتصدير
MapDirectionsResponse
التي لم يتم الكشف عنها من قبل - يقدم دعمًا لـ تقديم خرائط الحرارة
- وأضاف
MapDirectionsRenderer
، مما يسمح بعرض الاتجاهات على الخريطة ، وMapDirectionsService
الذي يلفgoogle.maps.DirectionsService
لحساب الطرق بين نقطتين. - جديد
options
المدخلات على علامة العنقودية، على غرار التوجيهات الأخرى.
ترقية
كالعادة ، يتوفر دليل ترقية كامل ، و ng update
سوف تساعدك على: https://update.angular.io/؟l=3&v=11.0-12.0
إذا كنت تستخدم نرول إن إكس (يجب عليك حقًا) ، لاحظ أن Nx 12.3 يتضمن دعم Angular 12 بالفعل! تعلم المزيد عن ذلك هنا. كميزة إضافية ، ستساعدك Nx أيضًا على الانتقال من TSLint إلى ESLint (وقد حان الوقت!)
وفي الختام
في هذه المقالة ، قمت باستكشاف الميزات الجديدة لـ Angular 12.
كالعادة ، هذا هو الإصدار بطولي (ماذا يمكن أن يكون ؟! 😎).
تتقدم Ivy إلى الأمام ، ونأمل أن نكون "قريبًا" أقل انزعاجًا من ذلك ngcc
، مع هجرة النظام البيئي. هناك عدد من التغييرات الرائعة في هذا الإصدار ، لذا تحقق من ذلك وقم بالترقية الآن !.
هذا كل شيء لهذا اليوم!
ملاحظة: إذا كنت ترغب في تعلم الكثير من الأشياء الرائعة الأخرى حول تطوير المنتجات / البرامج / الويب ، فراجع ملف مفاهيم ديف سلسلة ، (https://mailchi.mp/fb661753d54a/developassion-newsletter) [الاشتراك في رسالتي الإخبارية] ، و تعال وقل مرحبًا على Twitter!
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- ماهرون
- من نحن
- حوله
- فوق
- مطلق
- استمر
- يقبل
- الوصول
- إمكانية الوصول
- حسابي
- بدقة
- في الواقع
- وأضاف
- إضافة
- متقدم
- مميزات
- بعد
- وتهدف
- ملاحظه
- خوارزمية
- خوارزميات
- الكل
- السماح
- يسمح
- وحده
- سابقا
- البديل
- بالبدائل
- بالرغم ان
- دائما
- من بين
- و
- زاوي
- الرسوم المتحركة
- أعلن
- اشعارات
- آخر
- في أى مكان
- API
- واجهات برمجة التطبيقات
- التطبيق
- تظهر
- تطبيق
- التطبيقات
- نهج
- ابريل
- هندسة معمارية
- حول
- مجموعة
- البند
- مقالات
- أسوشيتد
- سمات
- الكتاب
- أوتوماتيك
- تلقائيا
- توفر
- متاح
- بابل
- الى الخلف
- الخلفية
- خلفية
- شريط
- على أساس
- أساس
- لان
- قبل
- يجري
- تستفيد
- أفضل
- ما بين
- كبير
- أكبر
- قطعة
- المدونة
- العلامة تجارية
- جديدة
- كسر
- يجلب
- جلبت
- المتصفح
- المتصفحات
- علة
- نساعدك في بناء
- باني
- ابني
- يبني
- مدمج
- حزمة
- عبء
- تسمى
- دعوة
- قدرات
- حقيبة
- الحالات
- سبب
- تسبب
- تغيير
- التغييرات
- التحقق
- الشيكات
- الكروم
- وضوح
- فئة
- فصول
- واضح
- بوضوح
- إغلاق
- كتلة
- الكود
- جمع
- اللون
- آت
- تعليقات
- مجتمع
- التوافق
- متوافق
- إكمال
- معقد
- عنصر
- مكونات
- المفاهيم
- قلق
- اختتام
- متصل
- وتعتبر
- ثابتة
- ثابت
- تستهلك
- وعاء
- محتوى
- سياق الكلام
- استمر
- مراقبة
- مراقب
- ضوابط
- رائع
- جوهر
- يتوافق
- التكلفة
- استطاع
- الدورة
- بهيكل
- مغطى
- خلق
- خلق
- خلق
- خلق
- حرج
- عبر المتصفح
- حاسم
- CSS
- فضولي
- حالياًّ
- حاليا
- على
- خصائص مخصصة
- تصميم
- التاريخ
- يوم
- أيام
- ميت
- صفقة
- أعمق
- الترتيب
- يعتمد
- نشر
- عمق
- التفاصيل
- تفاصيل
- كشف
- يحدد
- تحديد
- ديف
- المطور
- التطوير التجاري
- فعل
- مختلف
- DIG
- توجيهات
- مباشرة
- وزعت
- التوزيعات
- فعل
- DOM
- إلى أسفل
- بإمكانك تحميله
- الجانب السلبي
- إسقاط
- قطرات
- التكرارات
- أثناء
- كل
- أسهل
- بسهولة
- النظام الإيكولوجي
- الطُرق الفعّالة
- جهد
- إما
- عناصر
- جزءا لا يتجزأ من
- تمكين
- تمكن
- مغلفة
- النهائي إلى نهاية
- طاقة
- محرك
- تعزيز
- كاف
- ضمان
- دخول
- البيئة
- البيئات
- خطأ
- أخطاء
- خاصة
- إلخ
- الأثير (ETH)
- تقييم
- حتى
- الحدث/الفعالية
- أحداث
- كل شخص
- كل شىء
- تطورت
- المتطورة
- مثال
- أمثلة
- ممتاز
- استثناء
- تنفيذ
- القائمة
- موسع
- متوقع
- الخبره في مجال الغطس
- شرح
- شرح
- شرح
- ويوضح
- تفسير
- استكشاف
- مستكشف
- صادرات
- مكشوف
- التعبيرات
- مد
- تمديد
- خارجي
- احتفل على
- تسهيل
- يفشلون
- بإنصاف
- فال
- مروحة
- FAST
- أسرع
- خوف
- الميزات
- المميزات
- اتحاد
- ردود الفعل
- قليل
- حقل
- مجال
- قم بتقديم
- ملفات
- أخيرا
- العثور على
- نار
- حل
- تدفق
- تركز
- ويركز
- متابعيك
- القوة
- النموذج المرفق
- شكل
- أشكال
- إلى الأمام
- وجدت
- أسس
- جزء
- FRAME
- الإطار
- تبدأ من
- الواجهة
- بالإضافة إلى
- وظيفة
- وظائف
- إضافي
- مستقبل
- توليد
- يولد
- توليد
- دولار فقط واحصل على خصم XNUMX% على جميع
- GitHub جيثب:
- منح
- معطى
- يعطي
- إعطاء
- Go
- الذهاب
- خير
- شراء مراجعات جوجل
- جوجل كروم
- خرائط جوجل
- رسم بياني
- عظيم
- توجيه
- دليل
- مقبض
- الثابت
- وجود
- سمعت
- مساعدة
- هنا
- hi
- مرتفع
- تسليط الضوء
- تاريخ
- السنانير
- نأمل
- مضيف
- كيفية
- HTML
- HTTPS
- ضخم
- انسان قارئ
- سوف
- فكرة
- محدد
- تحديد
- التأثير
- تنفيذ
- التنفيذ
- نفذت
- استيراد
- أهمية
- واردات
- تحسن
- تحسن
- تحسين
- تحسينات
- in
- تتضمن
- شامل
- يشمل
- غير صحيح
- يشير
- بشكل غير مباشر
- info
- معلومات
- في البداية
- مبتكرة
- إدخال
- رؤى
- تثبيت
- تركيب
- مثل
- بدلًا من ذلك
- تعليمات
- دمج
- دمج
- التكامل
- التفاعلات
- وكتابة مواضيع مثيرة للاهتمام
- السطح البيني
- داخلي
- Internet
- تقديم
- أدخلت
- يدخل
- إدخال
- حدسي
- استثمرت
- عزل
- مسائل
- IT
- جافا
- JIT
- وظيفة
- الانضمام
- جسون
- احتفظ
- نوع
- علم
- لغة
- أكبر
- اسم العائلة
- كمون
- آخر
- الدوري
- تسرب
- تعلم
- تعلم
- إرث
- مستوى
- الرافعة المالية
- المكتبات
- المكتبة
- خط
- LINK
- مرتبط
- قائمة
- موقع
- طويل
- وقت طويل
- طويل الأجل
- يعد
- بحث
- بدا
- أبحث
- الكثير
- منخفض
- صنع
- المحافظة
- تحتفظ
- رائد
- أغلبية
- جعل
- يصنع
- القيام ب
- كثير
- رسم خريطة
- برنامج Maps
- مباراة
- مطابقة
- مادة
- مصفوفة
- ماكس
- يعني
- مكبر الصوت : يدعم، مع دعم ميكروفون مدمج لمنع الضوضاء
- القائمة
- دمج
- الرسالة
- رسائل
- البيانات الوصفية
- طريقة
- طرق
- مایکروسافت
- ربما
- الهجرة
- هجرة
- الحد الأدنى
- قاصر
- مفقود
- خطأ
- موضة
- تقدم
- وحدة
- الوحدات
- الأكثر من ذلك
- أكثر
- خطوة
- يتحرك
- موزيلا
- متعدد
- عين
- أي
- أسماء
- محلي
- التنقل
- ضروري
- حاجة
- إحتياجات
- سلبي
- صاف
- جديد
- مزايا جديدة
- أخبار
- بريدك الإلكتروني
- التالي
- Next.js
- العقدة
- نود.جي إس
- العقد
- ملاحظة
- جدير بالملاحظة
- الإخطارات
- عدد
- أرقام
- موضوع
- واضح
- حدث
- شهر اكتوبر
- رسمي
- رسميا
- قديم
- ONE
- عامل
- خيار
- مزيد من الخيارات
- طلب
- المنظمات
- في الأصل
- أخرى
- منافذ
- في الخارج
- نظرة عامة
- الخاصة
- صفقة
- حزم
- المعلمة
- المعلمات
- خاصة
- أجزاء
- مرت
- مرور
- مسار
- نفذ
- أداء
- العروض
- أداء
- منظور
- قطعة
- خط أنابيب
- المكان
- خطط
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- المساعد
- البوينت
- شعبية
- ان يرتفع المركز
- ممكن
- منشور
- يحتمل
- قوي
- على وجه التحديد
- تفضل
- وجود
- يقدم
- جميل
- منع
- أرسال
- سابق
- سابقا
- قبل
- المحتمل
- مشاكل
- عملية المعالجة
- معالجة
- الإنتــاج
- جانبي
- البرنامج
- تنفيذ المشاريع
- مشروع ناجح
- واعد
- لائق
- HAS
- الملكية
- تزود
- المقدمة
- ويوفر
- الوكيل
- نشرت
- دفع
- لغز
- جودة
- سريع
- رفع
- نطاق
- الخام
- RE
- رد فعل
- عرض
- تحقيق
- سبب
- الأسباب
- التوصية
- سجل
- تخفيض
- تعكس
- تسجيل
- ذات صلة
- الافراج عن
- صدر
- عن بعد
- إزالة
- إزالة
- أداء
- مرارا وتكرارا
- استبدال
- تقرير
- طلب
- طلبات
- تطلب
- مطلوب
- مرن
- استجابة
- REST
- نتيجة
- النتائج
- عائد أعلى
- عودة
- عائدات
- تخلص من
- الحواجز
- النوع
- جذر
- طريق
- جهاز التوجيه
- قاعدة
- القواعد
- يجري
- تشغيل
- خزنة
- نفسه
- ساس
- حفظ
- سيناريوهات
- نطاق
- الثاني
- يبدو
- إحساس
- مسلسلات
- الخدمة
- الجلسة
- طقم
- ضبط
- الإعداد
- شادو
- قصير
- ينبغي
- عرض
- التوقيعات
- مماثل
- الاشارات
- تبسيط
- منذ
- عزباء
- حالة
- مقاس
- الأحجام
- ببطء
- صغير
- الأصغر
- So
- حتى الآن
- حل
- الحلول
- بعض
- شيء
- مصدر
- الفضاء
- محدد
- مستقر
- موقف
- معيار
- المعايير
- بداية
- ابتداء
- الحالة
- إقامة
- خطوة
- لا يزال
- قلة النوم
- متجر
- تخزين
- قصتنا
- الإستراتيجيات
- صارم
- أكثر صرامة
- بناء
- نمط
- الاشتراك
- هذه
- فائق
- الدعم
- مدعومة
- الدعم
- مفاجآت
- مفاتيح
- نظام
- الريح الخلفية
- الريح الخلفية
- أخذ
- يأخذ
- مع الأخذ
- الهدف
- فريق
- فريق
- قالب
- النماذج
- تجربه بالعربي
- الاختبار
- اختبارات
- •
- المصدر
- من مشاركة
- شيء
- الأشياء
- هذا العام
- عبر
- الوقت
- استهلاك الوقت
- الجدول الزمني
- مرات
- إلى
- سويا
- رمز
- طن
- نغمة
- جدا
- أداة
- أدوات
- افضل مستوى
- نحو
- تتبع
- البحث عن المفقودين
- مسار
- تتبع الشحنة
- تحول
- انتقال
- خدمات ترجمة
- شفاف
- يثير
- صحيح
- أنواع
- نسخة مطبوعة على الآلة الكاتبة
- عادة
- مع
- فهم
- عالمي
- غير المستخدمة
- المقبلة
- تحديث
- تحديث
- آخر التحديثات
- تحديث
- ترقية
- URL
- us
- الأستعمال
- تستخدم
- مستخدم
- المستخدمين
- خدمات
- سهل حياتك
- التحقق من صحة
- المصادقون
- القيمة
- قيمنا
- القيم
- مختلف
- Ve
- الإصدار
- المزيد
- W3
- انتظر
- مطلوب
- تحذير
- الويب
- Webpack
- أسبوع
- أسابيع
- ترحيب
- ابحث عن
- سواء
- التي
- في حين
- من الذى
- سوف
- في غضون
- بدون
- وون
- رائع
- للعمل
- عمل
- عامل
- سوف
- اكتب
- جاري الكتابة
- مكتوب
- X
- عام
- حل متجر العقارات الشامل الخاص بك في جورجيا
- موقع YouTube
- زفيرنت