Пустой экран Electron + Angular 6 на производстве

Question

У меня проблема с производственной сборкой приложения Electron с Angular 6. ng build --prod для Angular работает нормально.Когда я запускаю версию моего приложения для разработки, запускаю электрон.команда все работает нормально, и я могу использовать свое приложение.

Для создания производственного приложения я использую электронный сборщик, есть моя команда:

сборщик электронов сборка -w --x64

Приложение создается без каких-либо проблем с помощью этой команды, но когда я хочу запустить приложение .exe, я получаю пустой белый экран, как на изображении.DevTools чистые.Что я делаю не так?

пустой экран в приложении

Есть структура папок: Структура

Есть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"
  }
}

Это файл main.js:

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

У меня была такая же ошибка с приложением Angular 7.Дело в том, что Angular помещает приложение не непосредственно под dist.Вместо этого он создает подкаталог.

Изменение переменной build в package.json на это решило проблему для меня:

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

Убедитесь, что main.js также настроен соответствующим образом.

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