title: Electron + Angular 6 blank screen on production application
body: <p>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.</p>
  
  <p>For build production application I'm using electron-builder, there is my command:</p>
  
  <p>electron-builder build -w --x64</p>
  
  <p>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?</p>
  
  <p><a href="https://i.stack.imgur.com/3T50X.jpg" rel="nofollow noreferrer">blank screen on application</a></p>
  
  <p>There is a folder structure:
  <a href="https://i.stack.imgur.com/WDqoP.jpg" rel="nofollow noreferrer">structure</a></p>
  
  <p>There is package.json:</p>
  
  <pre><code>{
    "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 &amp;&amp; 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"
    }
  }
  </code></pre>
  
  <p>This is main.js file:</p>
  
  <pre><code>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: () =&gt; {
          window.show();
        }},
      { label: 'Quit',
        click: () =&gt; {
          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) =&gt; {
      event.preventDefault();
      window.hide();
    });
  
    window.on('close', (event) =&gt; {
      if(!app.isQuiting){
        event.preventDefault();
        window.hide();
      }
      return false;
    });
  
    window.on('closed', () =&gt; {
      window = null;
    });
  
    window.on('show', () =&gt; {
      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', () =&gt; {
  
    // On macOS specific close process
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });
  
  app.on('activate', () =&gt; {
    // macOS specific close process
    if (window === null) {
      init();
    }
  });
  </code></pre>