Electron + Angular 6 blank screen on production application

Question

I have a problem with production build of Electron application with Angular 6. ng build --prod for Angular works fine. When I run the development version of my app by running an electron . command everything works fine and I able to use my application.

For build production application I'm using electron-builder, there is my command:

electron-builder build -w --x64

The application gets created without any problems by this command, but when I want to start the application .exe I'm getting the blank white screen, like on the image. DevTools are clean. What I'm doing wrong?

blank screen on application

There is a folder structure: structure

There is package.json:

{
  "name": "simple-password-manager",
  "version": "1.0.0",
  "main": "main.js",
  "build": {
    "directories": {
      "buildResources": "dist",
      "output": "app"
    }
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "electron": "electron .",
    "electron-build": "ng build --prod && electron ."
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.2",
    "@angular/cdk": "^7.1.1",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/material": "^7.1.1",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "generate-password": "^1.4.1",
    "reset-css": "^4.0.1",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "~7.1.0",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/language-service": "~7.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "cross-env": "^5.2.0",
    "electron": "^3.0.10",
    "electron-builder": "^20.38.3",
    "electron-log": "^2.2.17",
    "electron-packager": "^13.0.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

This is main.js file:

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

let window;
let trayContextMenu;
let appIcon;
const iconPath = path.join(__dirname, 'dist/assets/images/key.png');

function createContextMenu() {
  trayContextMenu = Menu.buildFromTemplate([
    { label: 'Show App',
      click: () => {
        window.show();
      }},
    { label: 'Quit',
      click: () => {
        app.isQuiting = true;
        app.quit();
      }
    }
  ]);
}

function createWindow() {
  window = new BrowserWindow({
    width: 1280,
    height: 768,
    icon: iconPath,
    autoHideMenuBar: true,
    webPreferences: {
      nodeIntegration: false,
      devTools: true,
      webSecurity: false,
    },
  });
  // window.webContents.openDevTools();
}

function contextMenuInit() {
  appIcon = new Tray(iconPath);
  appIcon.setContextMenu(trayContextMenu);
}

function windowLoad() {
  window.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file',
    slashes: true,
  }));
}

function watchWindowEvents() {
  window.on('minimize', (event) => {
    event.preventDefault();
    window.hide();
  });

  window.on('close', (event) => {
    if(!app.isQuiting){
      event.preventDefault();
      window.hide();
    }
    return false;
  });

  window.on('closed', () => {
    window = null;
  });

  window.on('show', () => {
    appIcon.setHighlightMode('always');
  });
}

function init() {
  // createContextMenu();
  createWindow();
  // contextMenuInit();
  windowLoad();
  watchWindowEvents();
}

// Create window on electron intialization
app.on('ready', init);

// Quit when all windows are closed.
app.on('window-all-closed', () => {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // macOS specific close process
  if (window === null) {
    init();
  }
});

Answer 1

I had the same error with an Angular 7 application. The thing is, Angular is putting the application not directly under dist. Instead, it creates a subdirectory.

Changing the build variable in package.json to this, resolved the problem for me:

  "build": {
    "appId": "de.ubweb.okapi",
    "files": [
      "dist/okapi-electron/**/*",
      "node_modules/**/*",
      "package.json",
      "main.js"
    ]
  },

Make sure that the main.js is also adjusted accordingly.

win.loadURL(`file://${__dirname}/dist/okapi-electron/index.html`);