progtask.ru

В данной статье мы создадим Angular приложение и запустим его как десктопное, используя для этого Electron.

Для начала необходимо установить Angular CLI:

npm install -g @angular/cli

После установки создадим приложение Angular:

ng new angular-electron-app

После создания приложения необходимо перейти в папку с проектом:

cd angular-electron-app/

Теперь установим electron в наше приложение:

npm install electron --save-dev

После его установки добавим в корень нашего приложения файл main.js со следующим содержимым:

const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");

let browserWindow;

function createBrowserWindow() {
  browserWindow = new BrowserWindow({ width: 1200, height: 800 });

  browserWindow.loadURL(
    url.format({
      // тут нужно уточнить, что путь к файлу index.html будет валиден для
      // Angular 6+ приложения. Если у вас версия ниже, то используйте
      // следующий путь - /dist/index.html
      pathname: path.join(__dirname, '/dist/angular-electron-app/index.html'),
      protocol: "file:",
      slashes: true
    })
  );

  browserWindow.on("closed", () => {
    browserWindow = null;
  });
}

app.on("ready", createBrowserWindow);

app.on("activate", () => {
  if (browserWindow === null) {
    createBrowserWindow();
  }
});

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

Теперь нам нужно добавить в package.json информацию о точке входа в приложение (это будет файл main.js):

{
	"name": "angular-electron-app",
	"version": "0.0.0",
	"main": "main.js",
	...
}

Также нужно в секцию scripts добавить скрипт для запуска electron с нашим приложением:

{
  "name": "angular-electron-app",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "electron": "ng build --base-href ./ && electron .",
  ...
}

Теперь всё готово. Запускаем приложение:

npm run electron

Результат: