在 Angular 5 中使用 electron-builder 构建 Electron 应用程序

Question

我正在创建一个使用 Angular 5 应用程序作为前端的电子应用程序。我可以通过运行ning npm 运行 build && electron 运行开发模式下的应用程序。触发电子实例并加载 angular 站点。但是，当基于文档使用 npm 运行 dist 构建时，它不允许我引用文件或者它无法读取 asar 文件或者我可能做错了什么，我在这里完全无能为力。当我安装应用程序运行ning .exe 文件时，我完全看到空白屏幕。

下面是package.json和electron-main.js的一些代码片段 package.json

"version": "0.0.0",
  "license": "MIT",
  "main": "electron-main.js",

  "build": {
    "appId": "com.example.Dashboard",
    "productName": "Dashboard",

    "win": {
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "runAfterFinish": true
    }
  },

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "install-app-deps",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron ."
  },

电子-main.js

 win.loadURL(url.format({
        pathname: __dirname + '/dist/index.html',
        protocol: 'file:',
        slashes: true
    }))

Answer 1

千辛万苦终于找到了解决办法。第一件事 Electron-builder 没有在所需位置构建文件 GitHub 中存在未解决的错误问题。您可以参考这些链接了解更多 1.Build Process Ignores app/dist/ folder?

2.Not all files in /app are packaged.

通常在 ReactJs 中，他们都使用两个 package.json 文件来避免混淆，并且他们正在编写大量的 webpack 代码。

我发现了一个解决方法。这里发生的事情是 angular-cli 正在 dist 文件夹中输出构建文件。 Electron builder 也在 dist 文件夹中输出它的文件。

我想在这里澄清的第一件事是，如果你运行 npm 运行 dist electron builder 不会为我们构建文件。

所以首先你需要构建文件运行ning ng build.

其次，您需要在 package.json 中进行更改，指定构建资源以使用构建文件，并且您需要更改 electron-builder 的输出目录。

修改后的 package.json 看起来像这样。

"main": "electron-main.js",

  "build": {
    "appId": "com.example.companyDashboard",
    "productName": "Farmhub Companies Dashboard",
    "files": ["**/*", "dist/**/*"],

  "directories": {
      "output": "release",
      "buildResources": "dist"
    },
    "asar":false,
    "win": {

      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "runAfterFinish": true,
      "license":"LICENSE"
    }
  },

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "pack": "build --dir",
    "dist": "build",
    "postinstall": "install-app-deps",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron .",
    "electron-package": "electron-packager . FarmhubCompanyDashboard --platform=win32 --arch=x64"
  },

如果你运行 electron builder 运行ning 命令 npm 运行 dist 它的工作方式类似于 breeze.

在 Angular 5 中使用 electron-builder 构建 Electron 应用程序

Building Electron Application with electron-builder in Angular 5

node.js

electron

electron-builder

angular