在 Angular 5 中使用电子生成器构建电子应用程序
Posted
技术标签:
【中文标题】在 Angular 5 中使用电子生成器构建电子应用程序【英文标题】:Building Electron Application with electron-builder in Angular 5 【发布时间】:2018-12-31 16:27:03 【问题描述】:我正在创建一个使用 Angular 5 应用程序作为前端的电子应用程序。我可以通过运行 npm run build && electron 以开发模式运行应用程序。触发电子实例并加载角度站点。但是,当根据文档使用 npm run dist 构建时,它不允许我引用文件或者它无法读取 asar 文件或者我可能做错了什么,我在这里完全一无所知。当我安装运行 .exe 文件的应用程序时,我完全看到空白屏幕。
这里是 package.json 和 electron-main.js 的一些代码 sn-ps 包.json
"version": "0.0.0",
"license": "MIT",
"main": "electron-main.js",
"build":
"appId": "com.example.Dashboard",
"productName": "Dashboard",
"win":
"target": [
"nsis"
]
,
"nsis":
"runAfterFinish": true
,
"scripts":
"ng": "ng",
"start": "ng serve",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "install-app-deps",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron ."
,
electron-main.js
win.loadURL(url.format(
pathname: __dirname + '/dist/index.html',
protocol: 'file:',
slashes: true
))
【问题讨论】:
【参考方案1】:终于苦苦挣扎,头破血流找到了解决办法。首先,Electron-builder 没有在所需位置构建文件,GitHub 中存在未解决的错误问题。
您可以参考这些链接了解更多信息
1.Build Process Ignores app/dist/
folder?
2.Not all files in /app are packaged.
通常在 ReactJs 中,他们都使用两个 package.json 文件以避免混淆,并且他们编写了很多 webpack 代码。
我找到了一个解决方法。 这里到底发生了什么是 angular-cli 正在输出 dist 文件夹中的构建文件。 Electron builder 也在 dist 文件夹中输出它的文件。
首先我要澄清的是,如果你运行 npm run dist,electron builder 不会为我们构建文件。
所以首先你需要构建运行ng build的文件。
其次,您需要在 package.json 中进行更改,指定构建资源以使用构建文件,并且您需要更改 electron-builder 的输出目录。
修改后的 package.json 看起来像这样。
"main": "electron-main.js",
"build":
"appId": "com.example.companyDashboard",
"productName": "Farmhub Companies Dashboard",
"files": ["**/*", "dist/**/*"],
"directories":
"output": "release",
"buildResources": "dist"
,
"asar":false,
"win":
"target": [
"nsis"
]
,
"nsis":
"runAfterFinish": true,
"license":"LICENSE"
,
"scripts":
"ng": "ng",
"start": "ng serve",
"pack": "build --dir",
"dist": "build",
"postinstall": "install-app-deps",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron .",
"electron-package": "electron-packager . FarmhubCompanyDashboard --platform=win32 --arch=x64"
,
如果你运行 electron builder 运行命令 npm run dist 它就像轻而易举。
【讨论】:
谢谢..你刚刚把我从问题的迷宫中解救出来。 欢迎,很高兴它有帮助。以上是关于在 Angular 5 中使用电子生成器构建电子应用程序的主要内容,如果未能解决你的问题,请参考以下文章
放入文件服务器时,电子打包器和电子生成器错误使用电子 vue 构建