Запуск Angular-приложения в окне рабочего стола с Electron

Electron позволяет запускать веб-приложения как настольные приложения на Windows, macOS и Linux. Для Angular это означает, что вы можете открывать скомпилированный фронтенд в отдельном окне рабочего стола — при этом структура и процесс разработки Angular остаются знакомыми.

Важно: Electron — это оболочка, которая загружает HTML/CSS/JS в встроенный Chromium. Логика приложения по-прежнему пишется на Angular; дополнительные настройки нужны только для оконной среды и взаимодействия с нативными API.

Что нужно иметь перед началом

• Установленный Node.js (включает npm). Проверить версии: node -v и npm -v.
• Существующий проект Angular или готовность создать новый через ng new.
• Базовые знания npm-скриптов и структуры Angular (src/, src/app/, angular.json).

Как установить Electron в проект Angular

1. Установите Node.js с официального сайта и убедитесь в корректной установке:

node -v
npm -v

2. Если у вас ещё нет проекта Angular, создайте его:

ng new electron-app

3. Перейдите в корень проекта и установите Electron как dev-зависимость:

npm install --save-dev electron

4. Опционально: установить Electron глобально (не обязательно, обычно рекомендуется локальная dev-зависимость):

npm install -g electron

После установки в node_modules появится папка electron, а бинары будут доступны через npm-скрипты.

Структура файлов и где что располагается

• src/index.html — исходный HTML-файл Angular проекта.
• dist//index.html — собранная копия после ng build.
• main.js (в корне проекта) — основной скрипт Electron, который создаёт окно и загружает index.html из dist.
• package.json — нужно добавить поле “main” с указанием main.js и npm-скрипт для запуска.

index.html обычно выглядит так:

Объяснение: — это контейнер корневого Angular-компонента. При сборке Angular генерирует конечный HTML/JS/CSS в папке dist, и именно этот index.html нужно подгружать в окне Electron.

Создание main.js — точка входа Electron

Создайте в корне проекта файл main.js и добавьте код, который создаёт окно и загружает скомпилированный index.html из папки dist. Пример простого main.js:

const { app, BrowserWindow } = require('electron');
const path = require('path');
let win;

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

  // Замените 'electron-app' на имя вашей сборки в angular.json
  win.loadFile(path.join(__dirname, 'dist', 'electron-app', 'index.html'));

  win.on('closed', () => {
    win = null;
  });
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Совет: используйте path.join(__dirname, ‘dist’, ‘’, ‘index.html’) чтобы корректно работать с путями на всех ОС.

Изменения в index.html и package.json

1. В src/index.html установите базовый href в относительный режим, чтобы пути работали и в десктопном окне:

2. В package.json добавьте поле main и npm-скрипт для удобного запуска. Пример:

{
  "name": "electron-app",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "electron": "ng build && electron ."
  }
}

После этого команда npm run electron будет собирать приложение и запускать Electron, который откроет окно с содержимым dist/electron-app/index.html.

Настройки совместимости и полировка сборки

В некоторых сценариях в .browserslistrc имеет смысл убрать проблемные версии Safari/iOS, чтобы избежать предупреждений во время сборки. Пример содержимого:

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3

Изменения в исходных компонентах (app.component.html / app.component.css) — опциональны, их делайте как для обычного Angular-проекта. Примеры базовой разметки и стилей:

src/app/app.component.html:

  

    
 Home 
    

      Welcome to my Angular Electron application!
    
  

src/app/app.component.css:

.content {
  line-height: 2rem;
  font-size: 1.2em;
  margin: 48px 10%;
  font-family: Arial, sans-serif;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 85%;
  padding: 16px 48px;
  margin: 24px 0px;
  background-color: whitesmoke;
  font-family: sans-serif;
}

Глобальные стили (src/styles.css):

html {
  margin: 0;
  padding: 0;
}

Как запускать приложение во время разработки

• Для локальной разработки в браузере используйте ng serve (http://localhost:4200):

ng serve

• Для запуска в десктопном окне выполните npm run electron:

npm run electron

Команда соберёт проект (ng build) и запустит Electron, который откроет окно с готовым приложением. При изменениях в коде вам нужно будет пересобрать проект для отражения изменений в окне Electron (или настроить механизм автообновления).

Отладка и быстрые советы

• Включите DevTools в BrowserWindow для отладки:

win.webContents.openDevTools();

• Для горячей перезагрузки можно использовать electron-reload или инструменты типа electron-forge / electron-builder с настройкой “watch”.
• Следите за режимом nodeIntegration и contextIsolation: по умолчанию безопаснее иметь nodeIntegration: false и contextIsolation: true, и общаться с нативным кодом через безопасный IPC.

Important: не включайте nodeIntegration в продакшне без крайней необходимости — это повышает риск выполнения произвольного кода.

Упаковка и распространение

Для сборки дистрибутива используйте инструменты: electron-builder, electron-packager или electron-forge. Они создают установщики для Windows (.exe/.msi), macOS (.dmg/.pkg) и Linux (.AppImage/.deb).

Короткий чеклист для упаковки:

• Проверить поле build в package.json (если используете electron-builder).
• Подготовить иконки для платформ (форматы и размеры отличаются).
• Настроить автообновления (опционально) и подпись кода для macOS/Windows, если требуется.

Когда такой подход не подходит (примеры и ограничениия)

• Если нужна крайне низкая задержка старта и минимальный размер бинарника — Electron даёт большой размер из-за встроенного Chromium.
• Если приложение требует нативных UI-виджетов и интеграции со специфичными OS-сервисами — лучше рассмотреть нативную разработку (например, для macOS Swift/Cocoa, для Windows WPF).

Альтернативы: NW.js (ещё одна Chromium-обёртка), Tauri (меньше размер бандла, использует системный WebView), Flutter Desktop (кроссплатформенный, с нативной отрисовкой).

Ментальная модель и рекомендации

• Ментальная модель: думайте об Electron как о «браузере в приложении», который отдаёт визуальную оболочку; Angular остаётся «движком» логики и UI.
• Разделение зон: UI/бизнес-логика — Angular; нативные вызовы и файловая система — main.js / нативные модули через IPC.
• Безопасность: всегда минимизируйте доступ к Node.js в рендер-процессе и используйте contextIsolation + безопасный IPC.

Критерии приёмки

• npm run electron успешно запускает приложение и открывает окно с интерфейсом.
• В окне отображается тот же функционал, что и в сборке dist при тесте в браузере.
• Нет предупреждений о несовместимости браузеров при сборке (проверить консоль сборки).
• Основные интеграции (файловая система, диалоги) работают через безопасный IPC.

Роль‑базовые чеклисты

Разработчик frontend:

• Проверил работу приложения в ng serve.
• Настроил относительный base href в src/index.html.
• Обновил компоненты под десктопный UX (если нужно).

Разработчик Electron / backend:

• Создал main.js с безопасными webPreferences.
• Настроил IPC для нативного функционала.
• Настроил сборку и иконки для платформ.

Тестировщик:

• Проверил запуск npm run electron на целевых ОС.
• Прогнал ручные тесты основных сценариев.

Безопасность и приватность

• Не встраивайте чувствительные секреты в фронтенд или main.js. Для хранения секретов используйте защищённые хранилища или серверную часть.
• Разрешайте только необходимые привилегии для процессов Electron.
• Если приложение обрабатывает персональные данные, убедитесь в соответствии требованиям локального законодательства и GDPR (если применимо).

Короткая методология работы (шаги для быстрой интеграции)

1. Установить electron в devDependencies.
2. Создать main.js, настроить BrowserWindow и loadFile на dist//index.html.
3. Поменять на “./“ в src/index.html.
4. Добавить “main”: “main.js” в package.json и скрипт “electron”: “ng build && electron .”.
5. Запустить npm run electron и отладить через DevTools.
6. Настроить сборщик (electron-builder) для публикации.

Резюме

Electron позволяет быстро превратить Angular-приложение в кроссплатформенное настольное приложение с минимальными изменениями. Основные шаги: установить Electron, добавить main.js, изменить base href и прописать main в package.json. При этом важно соблюдать принципы безопасности (contextIsolation, безопасный IPC) и учитывать повышенный размер дистрибутива. Для продакшна используйте специальные инструменты упаковки и подписи.

Notes: Если вы хотите уменьшить размер финального приложения или повысить безопасность, изучите альтернативы типа Tauri и подходы с отдельными нативными модулями.

Краткий чеклист для запуска прямо сейчас:

• Установить Node.js
• ng new или перейти в проект
• npm install –save-dev electron
• Создать main.js
• Поменять на “./“
• Добавить main в package.json и скрипт “electron”
• npm run electron