用Angular 5中的电子助剂构建电子应用

Question

我正在创建一个使用Angular 5应用程序作为前端的电子应用程序.我可以通过运行npm run build && electron在开发模式下运行应用程序.触发电子实例并加载角位置.但是,当根据文档使用npm run dist构建时,它不允许我引用文件或者它无法读取asar文件或者我可能做错了什么,我在这里完全无能为力.当我安装应用程序运行.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中存在开放的bug问题.您可以参考这些链接获取更多 1.Build Process Ignores app/dist/文件夹？

2.未打包/ app中的所有文件.

通常在ReactJs中,他们使用两个package.json文件以避免混淆,并且他们正在编写很多webpack代码.

我找到了一个工作.这里究竟发生了什么,angular-cli正在dist文件夹中输出构建文件.电子建设者也在dist文件夹中输出其文件.

我想在这里澄清的第一件事是,如果你运行npm run dist电子建设者不会为我们构建文件.

首先,您需要构建运行ng build的文件.

第二,你需要在package.json中进行更改,指定构建资源以使用构建文件,并且需要更改电子构建器的输出目录.

修改后的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"
  },

如果你运行电子生成器运行命令npm run dist它就像一个轻而易举的工作.