Создайте настольное приложение с электронным и угловым

В этом руководстве мы создадим кроссплатформенное настольное приложение с использованием Electron и веб-технологий, таких как TypeScript и Angular.

Electron.js — это популярная платформа для создания кроссплатформенных настольных приложений для Windows, Linux и macOS с JavaScript, HTML и CSS. Он создан и поддерживается GitHub и доступен под разрешающей лицензией MIT. Первоначально он был создан для редактора Atom в GitHub, но с тех пор использовался для создания приложений такими компаниями, как Microsoft ( код Visual Studio ), Facebook, Slack и Docker.

Electron использует мощные платформы, такие как Google Chromium и Node.js, но также предоставляет собственный набор богатых API для взаимодействия с базовой операционной системой.

Electron предоставляет собственный контейнер, который оборачивает веб-приложения, чтобы они выглядели и выглядели как настольные приложения с доступом к функциям операционной системы (аналогично Cordova для мобильных приложений). Это означает, что мы можем использовать любую библиотеку JavaScript или фреймворк для создания нашего приложения. В этом уроке мы будем использовать Angular.

Предпосылки

Для этого урока вам понадобятся следующие условия:

• Знакомство с TypeScript и Angular.
• Node.js и npm установлены на вашем компьютере разработчика.

Установка углового CLI

Давайте начнем с установки Angular CLI, который является официальным инструментом для создания и работы с Angular-проектами. Откройте новый терминал и выполните следующую команду:

npm install -g @angular/cli

Мы установим Angular CLI глобально в нашей системе. Если команда завершается с ошибкой EACCESS , добавьте sudo

Если CLI успешно установлен, перейдите в рабочий каталог и создайте новый проект Angular, используя следующие команды:

 cd ~
ng new electron-angular-demo

Подождите, пока файлы вашего проекта будут сгенерированы и зависимости будут установлены из npm. Затем перейдите к корню вашего проекта и выполните следующую команду, чтобы установить последнюю версию Electron из npm в качестве зависимости для разработки:

 npm install --save-dev electron@latest

На момент написания данной статьи эта команда установит Electron v4.1.4 .

Затем создайте файл main.js

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

    let mainWindow

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

      mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, `/dist/index.html`),
          protocol: "file:",
          slashes: true
        })
      );
      // Open the DevTools.
      mainWindow.webContents.openDevTools()

      mainWindow.on('closed', function () {
        mainWindow = null
      })
    }

    app.on('ready', createWindow)

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

    app.on('activate', function () {
      if (mainWindow === null) createWindow()
    })

Этот код просто создает окно графического интерфейса и загружает файл index.htmldist Этот пример кода адаптирован из официального начального репозитория .

Затем откройте файл package.jsonmainmain.js

     {
      "name": "electron-angular-demo",
      "version": "0.0.0",
      "main": "main.js",
      // [...]
    }

Далее нам нужно добавить скрипт, чтобы легко запустить приложение Electron после сборки проекта Angular:

     {
      "name": "electron-angular-demo",
      "version": "0.0.0",
      "main": "main.js",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "start:electron": "ng build --base-href ./ && electron ."
      }, 
      // [...]
    }

 npm run start:electron

        mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, `/dist/index.html`),
          protocol: "file:",
          slashes: true
        })
      );

       "projects": {
        "electron-angular-demo": {
          "root": "",
          "sourceRoot": "src",
          "projectType": "application",
          "prefix": "app",
          "schematics": {},
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist", 

 npm run start:electron

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

     function openModal(){
      const { BrowserWindow } = require('electron');
      let modal = new BrowserWindow({ parent: mainWindow, modal: true, show: false })
      modal.loadURL('https://www.sitepoint.com')
      modal.once('ready-to-show', () => {
        modal.show()
      })
    }

     ipcMain.on('openModal', (event, arg) => {
      openModal()
    })

 import { IpcRenderer } from 'electron';

       private ipc: IpcRenderer
      constructor(){
        if ((<any>window).require) {
          try {
            this.ipc = (<any>window).require('electron').ipcRenderer;
          } catch (e) {
            throw e;
          }
        } else {
          console.warn('App not running inside Electron!');
        }
      }

       openModal(){
        console.log("Open a modal");
        this.ipc.send("openModal");
      }

     <button (click)="openModal()">
      Open Modal
    </button>

 npm run start:electron