конвертировать приложение angular 4 в настольное приложение с помощью электрона

Предполагая, что у вас есть работающее приложение Angular, я использую следующие шаги, чтобы преобразовать его в электронное веб-приложение:

• В src/index.html измените <base href="/"> на <base href="./">
• Установить электрон npm install electron --save-dev
• Создайте main.js в корне проекта (не в src) (вот куда идет код createWindow())
• Убедитесь, что main.js указывает на dist/index.html (а не только на index.html)
• добавить "main":"main.js" в package.json

• добавьте их в раздел сценариев package.json

  "electron": "electron .", // <-- run electron 
  "electron-build": "ng build --prod && electron ." // <-- build app, then run electron `
  

запустить/отладить приложение с помощью:

npm run electron-build

для создания приложения:

npm install electron-packager -g​​
npm install electron-packager --save-dev

затем запустите:

electron-packager . --platform=win32​

Пример main.js:

const {app, BrowserWindow} = require('electron') 
const path = require('path') 
const url = require('url') 
let win 
function createWindow () { 
win = new BrowserWindow({width: 800, height: 600}) // load the dist folder from Angular 
win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })) 
// Open the DevTools optionally: 
// win.webContents.openDevTools() 
win.on('closed', () => { win = null }) 
} 

app.on('ready', createWindow) 
app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) 
app.on('activate', () => { if (win === null) { createWindow() } })

Доступ к функциям электронного API

Есть быстрый и простой способ получить доступ к API через пакет ngx-electron.

Установите его из консоли:

npm install ngx-electron --save​

Его нужно добавить в массив импорта в /src/app/app.module.ts:

import { NgxElectronModule } from 'ngx-electron';

@NgModule({
  ...
  imports: [
    BrowserModule,
    NgxElectronModule   // Add it here
  ],
  ...
})
export class AppModule { }​

Чтобы использовать его, откройте /src/app/app.component.ts и добавьте в импорт следующее:

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';​

Затем в классе компонента создайте его экземпляр через внедрение зависимостей, что даст доступ к методам API:

export class AppComponent {

  constructor(private _electronService: ElectronService) {}   // DI

  launchWindow() {
    this._electronService.shell.openExternal('http://google.co.uk');
  }

}

Он предоставляет вам следующие функции (посетите их Github для получения дополнительной информации):

• desktopCapturer: Electron.DesktopCapturer — API захвата рабочего стола Electron.
• ipcRenderer: Electron.IpcRenderer - Электронный IpcRenderer
• удаленный: Electron.Remote - возможности Electron Remote
• webFrame: Электрон.WebFrame - Электрон WebFrame
• буфер обмена: Electron.Clipboard — API буфера обмена
• CrashReporter: Electron.CrashReporter - CrashReporter Electron
• процесс: NodeJS.Process — объект процесса Electron
• screen: Electron.Screen — API экрана Electron
• оболочка: Electron.Shell — API оболочки Electron
• nativeImage: Electron.NativeImage — API NativeImage от Electron
• isElectronApp: boolean — указывает, выполняется ли приложение внутри электрона или нет.

Простые шаги:

1. Сборка углового приложения (например: ng build)
2. Скопируйте файлы из каталога dist в электронный проект (index.html bundle.js и т. д.)
3. Запустить электронное приложение

У меня есть решение для этого. Просто добавьте ../ к пути к изображению, например: src="../assets/someImage.png"