使用电子将角度4应用转换为桌面应用程序

Question

我使用角度4开发了应用程序.我需要为此Web应用程序开发桌面应用程序.从我最初的研究中我得到了最好的解决方案是电子.任何人请建议将角4应用转换为电子的步骤？

请建议!!!

Answer 1

假设您有一个有效的Angular应用程序,我使用以下步骤将其转换为电子Web应用程序:

• 在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的scripts部分

  "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中的imports数组中:

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 - Electron的桌面捕获API
• ipcRenderer:Electron.IpcRenderer - Electron IpcRenderer
• remote:Electron.Remote - 电子远程功能
• webFrame:Electron.WebFrame - Electron WebFrame
• 剪贴板:Electron.Clipboard - 剪贴板API
• crashReporter:Electron.CrashReporter - Electron的CrashReporter
• process:NodeJS.Process - 电子的过程对象
• 屏幕:Electron.Screen - 电子屏幕API
• shell:Electron.Shell - Electron的Shell API
• nativeImage:Electron.NativeImage - Electron的NativeImage API
• isElectronApp:boolean - 指示应用程序是否正在电子内部执行

Answer 2

简单步骤：

1. 构建角度应用程序（例如：ng build）
2. 将文件从dist目录复制到电子项目（index.html bundle.js等）
3. 运行电子应用程序