تحويل مشروع 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 وستعمل ان شاء الله دون مشاكل

حل المشكلة :  الحل بسيط وهو الدهاب الى ملف 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 + '" />');