7

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

请推荐！！！

4

4 回答 4

27

假设您有一个工作的 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 中的 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
  • 远程：Electron.Remote - 电子远程功能
  • webFrame: Electron.WebFrame - Electron WebFrame
  • 剪贴板：Electron.Clipboard - 剪贴板 API
  • crashReporter: Electron.CrashReporter - Electron 的 CrashReporter
  • 进程：NodeJS.Process - Electron 的进程对象
  • screen: Electron.Screen - Electron 的屏幕 API
  • 外壳：Electron.Shell - Electron 的外壳 API
  • nativeImage: Electron.NativeImage - Electron 的 NativeImage API
  • isElectronApp: boolean - 指示应用程序是否在电子内部执行
于 2018-04-13T08:20:09.170 回答
3

简单的步骤：

  1. 构建 Angular 应用程序（例如：ng build）
  2. 将文件从dist目录复制到电子项目（index.html bundle.js等）
  3. 运行电子应用程序
于 2017-08-04T08:23:38.863 回答
1

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

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 文件以指向电子主入口点，并填写有关您的应用程序的信息（应用程序名称、版本、描述和作者）

包.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：

带工具

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

  1. 电子锻造

  2. 电子生成器

  3. 电子包装器

这些工具将负责完成可分发的 Electron 应用程序所需的所有步骤，例如捆绑应用程序、重新命名可执行文件和设置正确的图标。

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

1. 添加 Electron Forge 作为应用的开发依赖，并使用其 import 命令设置 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

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

于 2021-09-20T09:37:26.173 回答
-1

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

于 2021-02-24T08:13:37.493 回答