Question

我在使用Angular 6生产电子应用程序时遇到问题。ng build --prod for Angular可以正常工作。当我通过运行电子来运行应用程序的开发版本时。命令一切正常，我可以使用我的应用程序。

对于构建生产应用程序，我正在使用电子生成器，这是我的命令：

electron-builder build -w --x64

此命令创建的应用程序没有任何问题，但是当我要启动应用程序.exe时，出现空白的白色屏幕，如图像上所示。 DevTools很干净。我在做什么错了？

有一个文件夹结构： structure

有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下。而是创建一个子目录。

将package.json中的build变量更改为此，为我解决了这个问题：

  "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`);

电子+ Angular 6黑屏在生产中的应用

1 个答案: