Electron app shows blank screen when built with electron-builder

Question

As the title explains, i have a simple Electron app that loads a html page when started. Everything works fine, but if i try to build the project using electron-builder (yarn dist), the application shows nothing but a blank screen. Any idea of why this happens?

My project structure is the following:

-- e2e
-- dist
-- node_modules
-- src
   -- app
   -- assets
   -- environments
   -- index.html
-- editor.config
-- angular.json
-- broswerlist
-- karma.conf.js
-- main.js
-- package.json
-- package-lock.json
-- tsconfig.json
-- tslint.json

I also post my main.js and package.json files:

main.js

const electron = require("electron")
const {app, Menu, BrowserWindow} = require("electron")
const path = require("path")

let mainWindow

app.on('window-all-closed', e => e.preventDefault() )
app.on('ready', createWindow);

function createWindow() {

  mainWindow = new BrowserWindow({
    width:1380,
    frame:false,
    closable: false,
    minimizable: false,
    maximizable: false,
    resizable: false,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: true
    }
  })


  mainWindow.webContents.openDevTools();


  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: "file",
    slashes: "true"
  }))

}

package.json

{
  "name": "test_app",
  "version": "1.0.0",
  "description": "test",
  "author": "me",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "electron": "electron .",
    "dist": "electron-builder",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "devDependencies": {
    "electron": "7.1.8",
    "electron-builder": "^22.2.0"
  },
  "build": {
    "target": [
      "nsis"
    ]
  },
  "dependencies": {
    "msal-electron-poc": "^0.1.0",
    "@angular-devkit/build-angular": "~0.803.21",
    "@angular/animations": "~8.2.14",
    "@angular/cli": "~8.3.21",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "fs": "0.0.1-security",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "rxjs": "~6.4.0",
    "ts-node": "~7.0.0",
    "tslib": "^1.10.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "zone.js": "~0.9.1"
  }
}

Does the value of `path.join(__dirname, 'dist/index.html')` match what you expect? — Andrew Allen, Jan 28 '20 at 16:55
I actually don't know. I am trying to load the html file built by angular and packaged by electron-builder, but i don't know its location and i cannot explore it since it's inside an asar file. — Maffe, Jan 29 '20 at 09:02
You can use [this answer](https://stackoverflow.com/a/38524534/4711754) to explore the asar file but I think you need `path.join(__dirname, 'dist/whatever-your-app-name-is/index.html')` — Andrew Allen, Jan 29 '20 at 09:22

score 0 · Answer 1 · answered Jan 29 '20 at 08:24

0

//Replace
path.join(__dirname, 'dist/index.html')

//with
path.join(__dirname, 'src/index.html')

answered Jan 29 '20 at 08:24

aniyd

31
1
4

1

Isn't this supposed to load the source html file without the angular components working? – Maffe Jan 29 '20 at 09:03
In case of Electron-builder, dist is the folder where application file appears and it is excluded from the build. In your case use some other name in place of dist after compiling the source code through angular CLI. – aniyd Jan 29 '20 at 09:45

score 0 · Answer 2 · answered Feb 26 '21 at 11:46

Had same problem. And was able to run electron on windows by running. for windows:

vue-cli-service electron:build --mode development --windows

for Linux:

vue-cli-service electron:build --mode development --rpm

And check if there are some hidden errors or it just work after.

Electron app shows blank screen when built with electron-builder

2 Answers2