Install
src/index.html (这是代码所在的位置)，并确保电子邮件指向< <base href="/"> >d15>(不仅仅是< index.html)
add >d19，to package.json
add main.js to createWindow()
of main.js package.json )。

“电子”：“电子。”，// <--运行电子“电子构建”："ng build --prod && 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的包。

从控制台安装：

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';

然后，在component类中，通过依赖项注入创建它的一个实例，这样就可以访问API的方法：

export class AppComponent {

  constructor(private _electronService: ElectronService) {}   // DI

  launchWindow() {
    this._electronService.shell.openExternal('http://google.co.uk');
  }

}

它为你提供了以下功能(更多信息请访问他们的Github)：

desktopCapturer:外壳-电子的桌面捕获API
ipcRenderer:外壳-电子IpcRenderer
remote:外壳-电子远程capabilities
webFrame:外壳-电子远程界面-剪贴板API
crashReporter:外壳-电子的CrashReporter
process:外壳-电子的Object
screen: API
nativeImage Electron.DesktopCapturer -电子的屏幕Electron.IpcRenderer Electron.Remote
外壳: Electron.Shell -电子的外壳用法: Electron.NativeImage - Electron's NativeImage API
isElectronApp: boolean -指示应用程序是在electron内部执行还是在

内部执行

票数 27

Stack Overflow用户

发布于 2017-08-04 08:23:39

简单的步骤：

构建angular应用程序(例如: ng build)
将文件从dist目录复制到电子项目(index.html bundle.js等)
运行电子应用程序<代码>H29<代码>G210

票数 3

Stack Overflow用户

发布于 2021-09-20 01:37:26

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

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.运行应用程序在所有条件相同的情况下，在运行run命令后，您现在应该会看到应用程序已在桌面窗口中运行：

npm run electron

7.构建(打包)应用程序:

使用工具的

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

electron-forge

electron-builder

electron-packager

这些工具将负责您最终获得可分发的Electron应用程序所需的所有步骤，例如捆绑您的应用程序、重新标记可执行文件以及设置正确的图标。

下面的是如何用电子伪造打包的

将Electron Forge添加为应用程序的开发依赖项，并使用其导入命令来设置的脚手架：

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

Forge 2.使用的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

我希望这对很多人有帮助。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45500750

复制

相似问题

问使用电子将angular 4应用程序转换为桌面应用程序
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用电子将angular 4应用程序转换为桌面应用程序EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用电子将angular 4应用程序转换为桌面应用程序
EN