logo أكاديمية أكسبورت للتطوير والبرمجة logo-alt أكاديمية أكسبورت للتطوير والبرمجة
تسجيل الدخول  أو  تسجيل حساب
  • الرئيسية
  • دروس برمجية
    • HTML
    • CSS
    • ANGULAR
    • IONIC / MOBILE
    • YII 2.0
    • Odoo /epen ERP
    • مواضيع متنوعة
  • مفاهيم برمجية
  • من نحـن
  • اتصل بنا

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

Angular Deployment

الدورة 103 من 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 الى ملف تنفيدي على ويندوز
  • قم بتسجيل الدخول للتعليق : تسجيل الدخول أو تسجيل عضوية
الدروس المقبلة
  • تحويل تطبيق angular الى ملف تنفيدي على ويندوز
    توليد ملف تنفيدي بواسطة electron
  • ماهو HTTP headers , request ةresponse
  • الكود المتزامن Synchronous والغير متزامن Asynchronous
    Synchronous Asynchronous
  • ماهو promise
    Promises
ANGULAR
  • المستوى 101 من دورة angular
  • المستوى 102 من دورة angular
  • الدورة 103 من angular
Mobile Development
دورة تطوير تطبيق موبايل

sitemap - Exportdeveloper Academy © 2019 All rights reserved