تحويل تطبيق angular الى ملف تنفيدي على ويندوز

انشئ مشروع جديد  أو تأكد ان مشروعك خالي من الأخطاء عند وضع الـ prod و serve  حتى نتجنب الأخطاء 

ng new angular-electron

سطب اداة electron  التي ستمكننا من تحويل مشاريع angular الى ملفات نفيدية سواء على منصة windows او mac او linux

// ادخل الى ملف المشروع ونصب التالي
npm install electron --save-dev   
npm install electron-packager --save-dev      
npm install electron-installer-dmg --save-dev   // macOS لمن يرغب بتوليد الملف  على نظام فقط

ادهب الى ملف src/index.html  وقم بتغيير المسار القاعدي التالي  حتى يتعرف electron على مكان المصادر 

غيره الى هدا الشكل

<base href="./">

أو بامكانك اضافة مسار ديناميكي عن طريق javascript مثل هدا

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

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

  <script>  // for compile jquery 
    try {
        window.nodeRequire = require;
        delete window.require;
        delete window.exports;
        delete window.module;
    } catch (e) {
    }
</script>

قم بانشاء ملف main.js  بمجلد المشروع مجلد (root folder)

f

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1100, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `${__dirname}/dist/assets/logo.png`  // تأكد من وجود ملف الايقونة
  })

  win.loadURL(`file://${__dirname}/dist/index.html`)

  //// uncomment below to open the DevTools.
  // win.webContents.openDevTools()

  // Event when the window is closed.
  win.on('closed', function () {
    win = null
  })
}

// Create window on electron intialization
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // macOS specific close process
  if (win === null) {
    createWindow()
  }
})

 لا تنسى أن تغير عرض وطول واجهة البرنامج width height  حسب حاجتك التي ترغب بها أن يظهر برنامجك عن طريق هدا الكائن بملف main.js

  win = new BrowserWindow({
    width: 1100, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/logo.png`
  })

ادهب الى ملف package.json وقم باضافة  ماهو معلم باشارة (+) بالكود

{
  "name": "angular-electron",
  "version": "0.0.0",
  "license": "MIT",
  "main": "main.js", // <-- + here
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .", // <-- + here
    "electron-build": "ng build && npm run electron ." // + <-- build app, then run electron 
  },
}

تأكد ان قيمة outputPath هي dist في ملف angular.json او قد تجد الملف باسم angular-cli.json

"outputPath": "dist", 

الان بامكانك التحقق من برنامجك يعمل عبر عملية  building انطلاقا من هده التعليمة

npm run electron-build

الان وبعدما تاكدت ان البرنامج يعمل بدون مشاكل وظهرت لك نافدة البرنامج بعد عملية  building

بامكانك بدأ عملية تحويل التطبيق الى برنامج تنفيدي 

لتوليد برنامج تنفيدي يعمل على منصة وندوز

ng build --output-path=dist/
electron-packager . --platform=win32

لتوليد برنامج على Mac os

electron-packager . --platform=darwin

توليد الملف على نظام debien linux

electron-packager . --platform=linux --arch=x64 

ادا لم تعمل معك تعليمة electron-packager قد تكون المشكلة بعدم توافق النسخة لدا جرب تنزل قيمة النسخة الى قيمة ادنى .

سياخد بعض الوقت لتحزيم برنامجك وبعدها سوف تلاحظ انه قام بانشاء مجلد /angular-electron-darwin-x64/ بمجلد المشروع  ادخل داخله وستجد تطبيقك التنفيدي

لاتنسى تعمل building بعد كل عملية توليد الملف التنفيدي لكي يقوم بتحديث التغييرات