我正在尝试使用Angular Electron创建一个桌面应用程序，我正在使用Electron生成器来打包我的应用程序。我可以通过运行这个命令"在本地查看我的应用程序ng构建--prod&；电子"；并且在使用命令"封装"之后电子助洗剂-w"；dist文件夹已生成，但如果我尝试启动可执行文件，我将无法查看我的应用程序，相反，我只能看到一个白色页面。
我可以在控制台中看到一条错误消息-不允许加载本地资源
"file:///E:/DevFiles/Angular/electronn/dist/win-unpacked/resources/app.asar/dist/enern/index.html"；
似乎在应用程序内部找不到index.html。asar
这是我的main.js
const { app, BrowserWindow } = require('electron')
var path = require('path')
//const updater= require('./updater')
let win;
function createWindow() {
//Calling updator after 3 seconds
//setTimeout(updater,3000)
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
})
win.setMenu(null);
// I am thinking this is where the issue is
win.loadURL(`file://${__dirname}/dist/electronn/index.html`)
win.webContents.openDevTools()
// Event when the window is closed.
win.on('closed', function () {
win = null
})
}
// Create window on electron intialization
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS specific close process
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS specific close process
if (win === null) {
createWindow()
}
})
这里是我的package.json
{
"name": "electronn",
"version": "0.0.0",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"electron": "electron .",
"desk": "ng build --prod && electron .",
"build-win": "electron-builder -w "
},
"private": true,
"dependencies": {
"@angular/animations": "~13.2.0",
"@angular/common": "~13.2.0",
"@angular/compiler": "~13.2.0",
"@angular/core": "~13.2.0",
"@angular/forms": "~13.2.0",
"@angular/platform-browser": "~13.2.0",
"@angular/platform-browser-dynamic": "~13.2.0",
"@angular/router": "~13.2.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.2.0",
"@angular/cli": "~13.2.0",
"@angular/compiler-cli": "~13.2.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"electron": "^20.1.3",
"electron-builder": "^23.3.3",
"electron-packager": "^16.0.0",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
},
"author": "Rabbit",
"repository": "https://github.com/ThiruDev50/electronn",
"build": {
"appId": "com.rabit.electronn",
"win": {
"publish": [
{
"provider": "github"
}
]
}
}
}
我在这个问题上花了将近一个星期的时间，尝试了多种方法，但没有成功。我缺少什么？请提出你的建议。提前谢谢。
终于解决了这个问题！。问题是，在用电子生成器打包我们的应用程序后，app.asar文件中缺少dist文件夹，因此应用程序无法找到启动路径。我找到了一种方法，而且确实有效。
步骤1：在angular.json文件中，将输出路径更改为out/｛您的应用程序名称｝，在我的情况下为out/eelctronn
"outputPath": "out/electronn"
步骤2：更改main.js文件中loadUrl的路径，如下所示
win.loadURL(`file://${__dirname}/out/electronn/index.html`)
步骤3：现在运行此命令ng build --prod && electron-builder -w，它将首先从内到外构建angular应用程序，然后使用electron将打包到dist文件夹内
希望这能奏效，我面对这个问题已经两周了，后来我解压缩了app.asar文件，尝试了各种方法，然后找到了这个工作解决方案
请查看以下帖子：
电子白板后建立日志错误不允许加载资源