如何创建角度电子应用程序的exe包答案

【问题标题】：how to create exe package of angular electron app如何创建角度电子应用程序的exe包
【发布时间】：2019-08-26 00:58:05
【问题描述】：

我已经开发了一个 Angular 6 的应用程序。我正在尝试使用电子构建 .exe。当我在开发环境中进行电子构建时，它工作正常，但现在我想为 Windows 发布一个包，我已经在我的机器上安装了电子打包器，试图为 Windows 构建一个。我已经在 Linux 机器上安装了 wine 来运行构建。它正在构建应用程序，但是当我运行 .exe 文件时，它会显示一个空窗口。我不明白问题是什么以及为什么它给我显示一个空白屏幕。

// main.ts

const { app, BrowserWindow } = require('electron')
const path = require('path');

let win;

function createWindow () {
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff'
  })

  win.maximize()

  win.loadURL(`file://${__dirname}/dist/task-reporting-tool/index.html`)

  win.on('closed', function () {
    win = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {

  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (win === null) {
    createWindow()
  }
})

// package.json

 "main": "main.js",
  "description": "task-reporting-tool",
  "files": [ "build", "*.js", "public"],
  "scripts": {
    "electron": "electron .",
    "electron-build": "ng build --prod && electron .",
    "packager": "electron-packager . WinApp --platform=win32 --arch=all"
  }

index.html

<base href="./">

我创建了一个 main.js 文件。在 index.html 文件和 package.json 中完成了更改。

使用 npm run packager 进行构建。所有必需的更改都已成功构建，但显示一个空白屏幕。

【问题讨论】：

它在开发者工具中显示此错误“不允许加载本地资源：file://home/lakhan/Desktop/task-reporting-tool/WinApp-win32-x64/resources/app/src /index.html"

标签： javascript node.js angular electron electron-packager

【解决方案1】：

你可以试试：

win.loadURL(
    url.format({
      pathname: path.join(__dirname, "/dist/angular-electron/index.html"),
      protocol: "file:",
      slashes: true
    })
);

【讨论】：

【解决方案2】：

安装 npm 然后尝试：

electron-packager . --asar
electron-packager . --all

【讨论】：