我已经按照教程创建了Angular/Electron桌面应用程序。当我运行ng Serve时，我会在浏览器屏幕上看到内容。当我构建并运行电子构建时，我会得到一个没有内容的桌面窗口。有人看到我做错了什么吗？
Package.json:
{
"name": "myProj",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && npm run electron"
},
"dependencies": {
"@angular/animations": "~11.0.4",
"@angular/common": "~11.0.4",
"@angular/compiler": "~11.0.4",
"@angular/core": "~11.0.4",
"@angular/forms": "~11.0.4",
"@angular/platform-browser": "~11.0.4",
"@angular/platform-browser-dynamic": "~11.0.4",
"@angular/router": "~11.0.4",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.1100.4",
"@angular/cli": "~11.0.4",
"@angular/compiler-cli": "~11.0.4",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"electron": "^11.1.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.1.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.2"
}
}
main.js:
const { app, BrowserWindow } = require('electron')
let win;
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 670,
icon: `file://${__dirname}/dist/assets/logo.png`
})
win.loadURL(`file://${__dirname}/dist/index.html`)
win.on('closed', function () {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS specific close process
if (win === null) {
createWindow()
}
})
Index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RsInvPro</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html：
<H2> Content is here!!!</H2>
可能是它的白屏问题。确保涵盖以下几点。
main.js
要点1：确保路径正确。是dist/index.html还是dist/{YourAppName}/index.html？
win.loadURL(`file://${__dirname}/dist/{YourAppName}/index.html`)
要点2：使用SplashScreen，因此如果内容有任何延迟，您可以找到问题
win.loadURL(`file://${__dirname}/dist/{YourAppName}/SplashScreen.html`);
setTimeout(function () {
win.loadURL(`file://${__dirname}/dist/{YourAppName}/index.html`);
}, 1000);
要点3：一旦应用程序准备好，然后向世界展示
win.once('ready-to-show', function () {
win.show();
})
注意：如果您的项目直接在dist文件夹中，则忽略｛YourAppName｝
您应该更新您的angular应用程序的配置
示例
src/index.html
<base href="#">
src/app/app-routing.module.ts
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
})
export class AppRoutingModule {}