Question

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

请建议!!!

Answer 1

假设您有一个正常工作的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

的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函数

通过名为ngx-electron的软件包，可以快速轻松地访问API。

从控制台安装：

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 - 电子的CrashReporter
process：NodeJS.Process - 电子的过程对象
screen：Electron.Screen - Electron的Screen API
shell：Electron.Shell - Electron的Shell API
nativeImage：Electron.NativeImage - Electron的NativeImage API
isElectronApp：boolean - 表示app是否正在电子内部执行

Answer 2

简单步骤：

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

Answer 3

我有一个解决方案。只需将 ../ 添加到您的图片路径，例如：src="../assets/someImage.png"

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

3 个答案: