Electron с Angular

Использование Angular вместе с Electron позволяет создавать кроссплатформенные десктопные приложения с веб-технологиями. Electron предоставляет оболочку для запуска веб-приложения в отдельном процессе с доступом к файловой системе и нативным API.

Структура проекта

Типичный проект Angular + Electron содержит два основных процесса:

  1. Main process (главный процесс) Отвечает за управление окнами, работу с системными ресурсами и обработку нативных событий. Файл запуска обычно называется main.js или main.ts.

    import { app, BrowserWindow } from 'electron';

let mainWindow: BrowserWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadURL('http://localhost:4200');
}

app.on('ready', createWindow);

  2. Renderer process (рендер-процесс) Представляет собой стандартное Angular-приложение, которое работает в браузерной среде Electron. Renderer может обращаться к Main через IPC (Inter-Process Communication) для выполнения задач, требующих нативного доступа.

Интеграция Angular с Electron

  • Установка Electron:
npm install electron --save-dev
  • Настройка скриптов сборки в package.json:
"scripts": {
  "start": "ng serve",
  "electron": "ng build --base-href ./ && electron ."
}
  • Использование IPC для обмена данными между процессами:
// main.ts
import { ipcMain } from 'electron';
ipcMain.on('get-data', (event) => {
  event.reply('send-data', { message: 'Данные с main process' });
});

// renderer.ts (Angular service)
import { ipcRenderer } from 'electron';
ipcRenderer.send('get-data');
ipcRenderer.on('send-data', (event, data) => {
  console.log(data.message);
});

Особенности разработки

  • Angular предоставляет удобную маршрутизацию и компонентную архитектуру, что упрощает создание интерфейса.
  • Electron позволяет подключать нативные модули Node.js, расширяя возможности приложения за пределы браузера.
  • Важно учитывать безопасность: nodeIntegration: true упрощает доступ к Node API, но повышает риск выполнения вредоносного кода. Используются contextIsolation и preload скрипты для безопасного взаимодействия.

Оптимизация

  • Для уменьшения размера сборки рекомендуется использовать angular.json с настройкой outputPath, чтобы Electron подхватывал только необходимые файлы.
  • Lazy-loading модулей Angular помогает сократить время загрузки и ускорить рендер интерфейса.
  • Использование electron-builder или electron-forge упрощает создание установочных пакетов для Windows, macOS и Linux.
Оглавление