我有一个角度应用程序，它被转换为电子。在构建应用程序时，会出现白色屏幕，但在重新加载时，应用程序会完美运行。原因是什么？任何帮助都将不胜感激。
这是我的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&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>
任何帮助都将不胜感激。非常感谢。
我通过改变目录路径和电子中启动屏幕的间隔，设法摆脱了白色屏幕。这不是一个永久性的解决方案，但已经足够了：
在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".