Building Electron Application with electron-builder in Angular 5

Question

I am creating an electron application that is utilizing an Angular 5 application as the front end. I am able to run the application in a development mode by running npm run build && electron . to trigger the electron instance and load up the angular site. However, when building using npm run dist based on the documentation, it will not allow me to reference the files or it is not able to read asar file or I might be doing something wrong, I am totally clueless here. When I install application running .exe file I totally see blank screen.

Here are the some code snippets of package.json and 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 ."
  },

electron-main.js

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

Answer 1

Finally struggling a lot and breaking head found a solution. First thing Electron-builder is not building files in the required location there are open bug issues in the GitHub. You can refer these links for more 1.Build Process Ignores app/dist/ folder?

2.Not all files in /app are packaged.

Usually in ReactJs and all they are using two package.json files to avoid confusion, and they are writing a lot webpack code.

There is a work around which I found. What exactly happening here is that angular-cli is outputting build files in the dist folder. Electron builder is also outputting its files in the dist folder.

First thing I want clarify here is that If you run npm run dist electron builder is not going to build files for us.

So first you need to build files running ng build.

second you need to make changes in the package.json specifying build resources to make use of build files and you need to change electron-builder's output directory.

Modified package.json looks something like this.

"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"
  },

If you run electron builder running command npm run dist It works like a breeze.