电子白屏问题

Question

我有一个转换为电子的 angular 应用程序。在构建应用程序时出现白屏，但在重新加载时，应用程序运行完美。可能是什么原因造成的？任何帮助将不胜感激。

这是我的 main.js 文件片段：

const { app, BrowserWindow, session, ipcMain, globalShortcut, Menu, dialog, screen } = require('electron')
const fs = require('fs');
const https = require('https');
const Path = require('path');
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

let mainWindow
let appicon = `${__dirname}/dist/sbox-signage/assets/icons/icon-72x72.png`;

let signage_storage = app.getPath('userData') + '/signage_storage/';
let playlistUrl = ""; //any URL

function createWindow() {

    // Check if Windows OS    
    let isWin = process.platform === "win32";
    global.signage_storage = signage_storage;

    mainWindow = new BrowserWindow({
        frame: isWin,
        kiosk: !isWin,
        icon: appicon,
        show: false,
        resizable: true,
        fullscreen: true,
        webPreferences: {
            nodeIntegration: true,
            webSecurity: false,
            enableWebSQL: false,
            spellcheck: false,
            paintWhenInitiallyHidden: false,
            devTools: true,
            enableRemoteModule: true
        }
    })

    // mainWindow.loadURL(`file://${__dirname}/dist/sbox-signage/SplashScreen.html`);
    // setTimeout(function () {
    mainWindow.loadURL(`file://${__dirname}/dist/sbox-signage/index.html`);
    // }, 1000);

    //**mainWindow.loadURL(`file://${__dirname}/dist/sbox-signage/index.html`);

    mainWindow.on('closed', function () {
        mainWindow.destroy();
    })

    // Electron Menu
    if (isWin) {
        //let getmenu0 = Menu.buildFromTemplate(menu.template)
        let getmenu = null;
        Menu.setApplicationMenu(getmenu);
        mainWindow.maximize();
    }

    mainWindow.once('ready-to-show', function () {
        // First time load issue fixed        
        //**mainWindow.reload();
        mainWindow.show();
        //setTimeout(mainWindow.show(), 21000);
        // For API Cors-Origin first time block issue fix
        app.commandLine.appendSwitch("disable-features", "OutOfBlinkCors");
    })

    mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.focus();
    });
}
} //the scopes are not properly closed. (can  ignore)

这是我的 index.html 文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sbox Signage</title>
  <base href="./">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.png">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="manifest" href="manifest.webmanifest">
  <meta name="theme-color" content="#1976d2">
</head>
<body class="mat-typography">
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
</html>

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

我通过更改目录路径和更改电子启动画面的间隔以某种方式设法摆脱了白屏。这不是永久修复，但足够了：

在main.js:

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

mainWindow.loadURL(`file://${__dirname}/dist/SplashScreen.html`);
 setTimeout(function () {
 mainWindow.loadURL(`file://${__dirname}/dist/index.html`);
    }, 5000);

在angular.json

设置Projects->architect->build->options->outputPath to "dist" only.

在tsconfig.json中：

设置compilerOptions to "es5".

电子白屏问题

White screen issue in electron

electron

angular