shows empty blank screen when creating electron app of existing angular app

Question

I have developed one app using angular 6. now I want to make Build Desktop Apps With Electron. I have followed all the steps to make a build. when I run 'npm run electron-build' it makes a build & displays me empty white window it shows nothing. I don't even understand what is the problem. Thank you in advance.

// main.js

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

let win;

function createWindow () {
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff',
    icon: `file://${__dirname}/dist/assets/logo.png`
  })


  win.loadURL(`file://${__dirname}/dist/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

"name": "demo-electron",
"version": "0.0.0",
"main": "main.js",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "electron": "electron .",
  "electron-build": "ng build --prod && electron ."
}

index.html

<base href="./">

I have created a main.js, made changes in the index.html & package.json. System configuration OS: Linux x64 (Ubuntu 16), node 8.11.1 Angular CLI: 6.2.9 Angular: 6.1.10.

clevin clevin · Accepted Answer · 2019-04-30T13:10:47

Try checking your index.html location in the dist folder and update the win.loadurl path accordingly. Worked for me

shows empty blank screen when creating electron app of existing angular app

2 Answers