使用电子将 Angular 4 应用程序转换为桌面应用程序答案

【问题标题】：convert angular 4 application to desktop application using electron使用电子将 Angular 4 应用程序转换为桌面应用程序
【发布时间】：2018-01-12 00:50:33
【问题描述】：

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

请推荐！！！

【问题讨论】：

这个问题太宽泛了。
我没有得到。其实这是我的疑问

标签： angular electron electron-builder electron-packager

【解决方案1】：

假设您有一个工作的 Angular 应用程序，我使用以下步骤将其转换为电子网络应用程序：

在src/index.html 中将<base href="/"> 更改为<base href="./">
安装电子npm install electron --save-dev
在项目的根目录（不在 src 中）创建 main.js（这是 createWindow() 代码所在的位置）
确保main.js 指向dist/index.html（不仅仅是index.html）
在 package.json 中添加 "main":"main.js"

将这些添加到 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 函数

通过一个名为 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 - Electron 远程功能
webFrame: Electron.WebFrame - Electron WebFrame
剪贴板：Electron.Clipboard - 剪贴板 API
crashReporter：Electron.CrashReporter - Electron 的 CrashReporter
进程：NodeJS.Process - Electron 的进程对象
屏幕：Electron.Screen - Electron 的屏幕 API
shell: Electron.Shell - Electron 的 Shell API
nativeImage：Electron.NativeImage - Electron 的 NativeImage API
isElectronApp: boolean - 指示应用程序是否在电子内部执行

【讨论】：

谢谢老兄，它节省了很多时间
按照这些说明，我遇到了很多错误。这只是第一个... src/app/app.module.ts:19:5 中的错误 - 错误 NG6001：无法在 NgModule 中声明“NgxElectronModule”，因为它不是当前编译的一部分。

【解决方案2】：

简单的步骤：

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

【讨论】：

我按照步骤创建了电子应用程序，但是电子应用程序中没有加载 css 和图像示例：找不到文件：///C:/assets/css/custom.css
在index.html中有一个<base href=/>标签；只需使用href 属性即可。例如href="./"

【解决方案3】：

我刚刚从一个角度应用程序成功构建了一个桌面应用程序，以下是步骤：

1.将目录更改为您的 Angular 应用并安装电子

cd my-angular-app/
  
npm i -D electron@latest

2。创建电子输入文件在项目的根目录中创建一个 main.js 文件。该文件将是电子应用程序的主要入口点，并将包含桌面应用程序的主要 API。

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'), // compiled verion of our app
      protocol: "file:",
      slashes: true
    })
  );
  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()
  win.on("closed", () => {
    win = null;
  });
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

3.使用您的应用详细信息更新 package.json

更新 package.json 文件以指向电子主入口点，并填写有关您的应用程序的信息（应用程序名称、版本、描述和作者）

package.json

{
  "name": "my-angular-app",
  "version": "0.0.1",
  "main": "main.js",
  "author" : "my-name",
  "description": "The app is about foo and bar",
  ...
}

4.更新 package.json 中的脚本

添加一个新的 NPM 脚本，它将首先创建一个构建，然后从 dist 文件夹启动桌面应用程序。

{
  ...
  "scripts": {
   "electron": "ng build --base-href ./ && electron .",
   ...
  }
 ...
}

5.更新 Angular 以设置构建目录

在 angular.json 中，像我们在 main.js 文件中设置 /dist/index.html 一样设置构建目录。

...,
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",

6.运行应用程序 在所有条件相同的情况下，运行运行命令后，您现在应该会在桌面窗口中看到应用程序启动了：

npm run electron

7.构建（打包）APP：

使用工具

您可以使用以下工具来分发您的应用程序：

电子锻造
电子制造商
电子包装器

这些工具将处理您需要采取的所有步骤，以最终获得可分发的 Electron 应用程序，例如捆绑您的应用程序、重新命名可执行文件和设置正确的图标。

以下是如何使用电子锻造进行打包

1.添加 Electron Forge 作为您应用的开发依赖项，并使用其导入命令设置 Forge 的脚手架：

npm install --save-dev @electron-forge/cli
npx electron-forge import

2。使用 Forge 的 make 命令创建可分发文件：

npm run make

Electron Forge 会创建你的包所在的 out 文件夹：

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

我希望这可以帮助很多人。

【讨论】：

【解决方案4】：

我有办法解决这个问题。只需将../ 添加到您的图像路径，例如：src="../assets/someImage.png"

【讨论】：