Electron — это платформа для разработки настольных приложений с использованием таких веб-технологий, как HTML, CSS и JS. Интеграция приложения ng-cli с Electron проще, чем может показаться.

Двухпакетная структура Electron

Если вы знакомы с Electron, вы, возможно, помните структуру двух пакетов. Мы будем использовать аналогичную структуру, но с ключевым отличием: в обычной структуре из двух пакетов папка /app/ будет содержать приложение Electron. Мы назовем эту папку /electron/, а другая папка /app/ внутри будет содержать наше скомпилированное приложение Angular.

Может показаться, что мы используем структуру из двух пакетов, но мы просто отделяем часть Electron от остального приложения.

Изменения в конфигурации приложения

  • Создайте скрипт в нашем приложении Angular package.json.
"electron:start": "ng build --watch -op=electron/app"

Это создаст приложение Angular в папке приложения внутри нашего приложения папки Electron и будет перестраиваться при каждом изменении.

  • Добавьте новую выходную папку в .gitignore, в раздел #compiled output, /electron/app.
  • Измените тег base в index.html нашего приложения Angular следующим образом:

Добавление точки перед косой чертой позволит Electron найти обслуживаемые файлы, и без ошибки 404 будет выброшена ошибка.

Это будут все модификации, которые нам понадобятся для интеграции приложения с Electron.

Создание нашего приложения Electron

  • Нам нужно создать папку electron внутри нашего проекта. Внутри мы собираемся запустить команду npm init для создания Electron package.json. Эта папка будет нашей корневой папкой Electron.
  • Мы добавляем Electron в качестве зависимости разработки.
  • Мы создаем точку входа для нашей программы Electron.

index.js

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({ width: 800, height: 600 });
  // and load the index.html of the app.
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'app', 'index.html'),
      protocol: 'file:',
      slashes: true,
    }),
  );
  // Open the DevTools.
  win.webContents.openDevTools(); 
  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows 
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow();
  }
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Запуск приложения

  • Откройте терминал и перейдите к проекту Angular и запустите npm run electron:start, чтобы запустить приложение Angular.
  • Откройте второй терминал и перейдите в папку electron внутри проекта и запустите electron ., чтобы запустить электронное приложение.

Вы должны увидеть окно с работающим внутри него приложением Angular.

Движение вперед

Теперь у нас есть очень простое приложение Angular, работающее внутри процесса рендеринга Electron. Если мы изменим что-то либо в приложении Angular, либо в приложении Electron, нам нужно закрыть окно Electron и снова запустить electron .. Это можно было бы оптимизировать с помощью плагинов и систем сборки, но это стандартное поведение Electron.

Вы можете заметить, что входной файл приложения Electron написан на ванильном Javascript. Это связано с тем, что Electron запускает только ванильный Javascript, и для запуска другого языка, такого как Typescript, вы должны использовать плагин, такой как ts-node, или систему сборки.

Первоначально опубликовано на dev.to.