电子白屏问题答案

【问题标题】：White screen issue in electron电子白屏问题
【发布时间】：2021-08-19 07:58:31
【问题描述】：

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

这是我的 main.js 文件的 sn-p：

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>

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： angular electron

【解决方案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".

【讨论】：