gpt4 book ai didi

angular - 为什么Angular 11和Electron会产生没有内容的窗口

转载 作者:行者123 更新时间:2023-12-03 12:25:03 25 4
gpt4 key购买 nike

我已按照教程创建 Angular/Electron 桌面应用程序。当我运行 ng Serve 时,我会在浏览器屏幕上看到内容。当我构建并运行 electron-build 时,我得到一个没有内容的桌面窗口。谁能看到我做错了什么?
包.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"
}
}
主.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()
}
})
索引.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 - 为什么Angular 11和Electron会产生没有内容的窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65348147/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com