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

Posted 2023-03-22

【中文标题】使用电子将 Angular 4 应用程序转换为桌面应用程序

【英文标题】：convert angular 4 application to desktop application using electron

【发布时间】：2018-01-12 00:50:33

【问题描述】：

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

请推荐！！！

【问题讨论】：

这个问题太宽泛了。

我没有得到。其实这是我的疑问

【参考方案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​

ma​​in.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"