تحويل مشروع angular الى ملفات جاهزة قابلة للتنفيد على اي متصفح أو استضافة

في هذا الدرس سنشرح كيفية تحويل المشروع الى وضع prod أو بمعنى اخر عمل Deployment للمشروع لكي يصبح قابل للتنفيد على الاجهزة / المتصفحات أو رفع التطبيق على استضافة / سرفر

افتح سطر الأوامر terminal / command prompt وادهب لمسار مشروعك و قم بتنفيد هدا الأمر لبدأ عملية Deployment

ng build --prod

ستلاحظة بسطر الأوامر عملية معالجة للملفات انتظر بعض الوقت وسوف ينهى العملية

بعد الانتهاء ستلاحظ انه قام باضافة مجلد جديد بمشروعك اسمه dist وبداخله ستجد بعض الملفات + ملف index.html ..وهده هي ملفات المشروع النهائية التي يفترض ان ترفعها على استضافتك او تحتاجها من اجل عمل مشروعك على أي متصفح دون الحاجة لمشغل apache أو nodejs ...فقط كل ماتحتاجه هو ملفات المشروع + متصفح او ادا كنت ترغب برفعه على استضافة فستحتاج لرفع الملفات الى استضافتك بشكل عادي عن طريق FTP والتوجه نحو مسار index.html وسيتم تنفيد مشروعك بشكل طبيعي عند الضغط على ملفindex.html

..طبعا في حال ما ادا كنت تحتاج بمشروعك تطبيق يستخدم API عليك رفعها بالاستضافة أيضا وتحديد مسارها في تطبيقك ولنقل مثلاhttp://yourpath.com/api وستعمل ان شاء الله دون مشاكل

مشكلة .أحيانا قد تصادفك مشكلة متكررة جدا خصوصا ادا لم تفتح مشروعك عن طريق apache أو استضافة ( فتحته عن طريق الضغط على ملف index.html ) ستفاجئ بظهور صفحة بيضاء

سبب هده المشكلة هو ان المتصفح لم يتمكن من تحديد مسارات الملفات التي بداخل المشروع "مثل ملفات js css الصور..." حيث انه لن يجدها ولن يتمكن من تضمينها الى ملف index.html

حل المشكلة : الحل بسيط وهو الدهاب الى ملف index.html وهنا نحن لانقصد ملف الموجود بمجلد dist وانما نقصد ملف السورس أي المشروع قبل عملية Deployment

افتح الملف src/index.html سوف تجدا برأس الصفحة هدا الوسم وهو سبب مشكلة تخبط المتصفح

<base href="/">

المتصفح لايفهم مادا يعني مسار الجدر (/) لأنه أساسا لايعرف مكانه (مكان صفحة index.html)

قم باضافة (.) بالمسار حتى تعلم المتصفح انه يتعين عليه الانطلاق في البحث عن مسارات ملفات المشروع من المكان الدي فتحت منه الملف index.html وهكدى سيفهم المتصفح المكان الدي سينطلق منه

حيث سيكون المسار بهدا الشكل

<base href="./">

الان قم بحفظ الصفحة وقم باعادة عملDeployment للمشروع وافتح صفحة index.html من المجلد الناتج dist سيعمل المشروع دون مشكلة

ng build --prod

احيانا قد لاتعمل معك هده الطريقة لسبب ما ربما قد قد لاتعمل معك بعض الصفحات ربما السبب قد يكون لانك اضفت بعض الاضافات plugins javascript حيث قامت بالتحكم بمسار base .لسبب ما.. في هده الحالة ستحتاج الى عمل مسار ديناميكي يتم بناءه عن طريق كود js وأنا صراحة أفضل هدا الحل لانه اكثر ديناميكية ومرونة

وهو انك تضيف هدا الكود وتحدف وسم base

//javascript
document.write('<base href="' + document.location + '" />');

ادا صادفتك اخطاء بمشروعك أثناء عملية building / Deployment دائما لاتنسى فحص وتتبع الخطأ عن طريق inspector عن طريق الضفط على زر F12 وتختار نافدة console والبحث عن المشكلة فيgoogle أو ضع المشكلة بخانة التعليقات لمساعدتك بحل المشكلة

مدونتي الرقمية

بحث هذه المدونة الإلكترونية

تحويل مشروع angular الى ملفات جاهزة قابلة للتنفيد على اي متصفح أو استضافة

الدروس السابقة :

تعليقات

إرسال تعليق