how to create exe package of angular electron app

Question

I have developed an app in angular 6. I am trying to make .exe build using electron. When I am making an electron build in the dev environment which is working fine but now I want to release a package for windows I have installed electron packager on my machine trying to make a build for windows. I have installed wine on Linux machine to run the build. It is making the build of the app but when I run .exe file it displays me an empty window. I don't understand what the issue is & why it is displaying me an empty screen.

// main.ts

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

let win;

function createWindow () {
  win = new BrowserWindow({
    width: 600, 
    height: 600,
    backgroundColor: '#ffffff'
  })

  win.maximize()

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

 "main": "main.js",
  "description": "task-reporting-tool",
  "files": [ "build", "*.js", "public"],
  "scripts": {
    "electron": "electron .",
    "electron-build": "ng build --prod && electron .",
    "packager": "electron-packager . WinApp --platform=win32 --arch=all"
  }

index.html

<base href="./">

I have created a main.js file. done changes in the index.html file & in package.json.

Using npm run packager to make a build. All the required changes are done build successful but displays an empty screen.

Answer 1

Install npm and then try:

electron-packager . --asar
electron-packager . --all

Answer 2

You could try :

win.loadURL(
    url.format({
      pathname: path.join(__dirname, "/dist/angular-electron/index.html"),
      protocol: "file:",
      slashes: true
    })
);