الترحيل من AngularJS إلى Angular7 من خلال تطبيق مختلط
المهمة ليست أسهل ، ولكن قابلة للتنفيذ.
لقد واجهتها عند الانتقال إلى شركة جديدة.
يمكن العثور على حقيقة أنها قابلة للتنفيذ في
الدليل .
تم إنشاؤه خصيصًا لتبسيط عملية النقل دون الحاجة إلى إنشاء مشروع جديد وإعادة كتابة كل مكون من البداية.
كما تصوره المطورون ، يجب أن يبدأ مشروعنا في العمل على كل من الإصدار الجديد من AngularJS وعلى Angular مع الاستبدال التدريجي للرمز.
لذلك قررت أن أفعل ذلك.
الدليل مفصل تمامًا ، لكنه يحتوي أساسًا على الجزء النظري.
بالنسبة للشخص الذي اعتاد التعامل بشكل رئيسي مع Vue ، فإن فهم تعقيدات تنظيم الأطر على الفور ليس بهذه البساطة.
كانت الصعوبة الرئيسية بالنسبة لي هي أن هيكل المشاريع على AngularJS و Angular7 مختلف.
ومن هنا تأتي الحاجة إلى إعادة كتابة جميع التبعيات والخدمات والمكونات يدويًا.
في الواقع ، فإن أي تهجين مع هذا النهج يفقد معناه ، لأن التطبيق في أي حال يجب إعادة كتابته بالكامل.
هكذا فعلت في البداية ، ولم أجد طريقة أقل تكلفة.
ومع ذلك ، هناك خيار أفضل.
هنا وجدت الكثير من المفيد.
سوف أصف بالتفصيل ما فعلت.
تحتاج إلى إنشاء مشروع جديد.
في Node.js:
npm install -g @angular/cliتثبيت الزاوي على الصعيد العالمي.
بعد ذلك ، تحتاج إلى إنشاء مجلد للتطبيق والانتقال إليه من خلال Node.js.
الأوامر الرئيسية التي قد تكون مطلوبة هنا للعثور على المجلد المطلوب:
cd _ و
cd .. للعودة إلى الدليل أعلاه.
لذلك ، عندما يتم العثور على مجلد المشروع ، تحتاج إلى إنشاء مشروع فيه.
في Node.js نكتب:
ng new _في عملية إنشاء المشروع ، ستُعرض عليك عدة خيارات للتطبيق ، حيث تحتاج إلى تحديد المعلمات المطلوبة.
عند إنشاء التطبيق ، يمكنك فتحه في المتصفح باستخدام الأمر:
ng serve --openومع ذلك ، لا يوجد شيء لفتح حتى الان.
تحتاج الآن إلى تثبيت التبعيات الضرورية لكلا AngularJS و Angular للعمل:
npm install --save @angular/upgradeمن الآن فصاعدًا ، يدعم التطبيق كلا الإطارين.
افتح الآن المشروع القديم ، ابحث عن ملف package.json.
وهو يسرد جميع التبعيات اللازمة لتشغيل تطبيقنا.
يجب أن يتم تثبيتها يدويًا.
على سبيل المثال:
npm install --save angular @uirouter/angularjsبعد هذه الخطوة ، يمكنك نقل جميع الأنماط العامة إلى التطبيق الجديد.
الآن نقوم بنقل جميع الملفات من التطبيق.
للحصول على التوجيه أعلاه ، نذهب أبعد من ذلك.
تغيير اسم المكون الجذر.
في app.module.ts أضف السطر:
import * as angular from 'angular';
لم يتم توضيح ذلك في الدليل ، ولكن بدونه لا يمكن تحقيق التهجين.
الآن لدينا تطبيق ، والتي من الناحية النظرية يجب أن تكون مختلطة.
في الممارسة العملية ، قد تحدث أخطاء مختلفة في هذه المرحلة ، تتعلق أساسًا بالتبعيات ، والتي سأكتب عنها في مقالة منفصلة.
إذا لم تنشأ ، فقم بالمتابعة وتغيير الوحدة بعد وحدة AngularJS إلى Angular ، الإصدار المطلوب.
توفر
هذه المقالة تمثيلًا مرئيًا ممتازًا للاختلافات الرئيسية بين رمز الإطارين.
خطوة بخطوة ، ولن يكون لديك سطر واحد اليسار على AngularJS.