我正在为我的应用程序使用Angular和Electron。我正在寻找一种启用热重载的方法...当我运行我的yarn run electron
(脚本:"electron": "ng build --base-href ./ && electron ."
),如果我保存更改,我的应用不会重新加载。以下是我的main.js文件:
const { app, BrowserWindow } = require("electron");
const path = require("path");
const url = require("url");
let win;
function createWindow() {
win = new BrowserWindow({ width: 800, height: 600 });
// load the dist folder from Angular
win.loadURL(
url.format({
pathname: path.join(__dirname, `/dist/index.html`),
protocol: "file:",
slashes: true
})
);
// The following is optional and will open the DevTools:
// win.webContents.openDevTools()
win.on("closed", () => {
win = null;
});
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
// initialize the app's main window
app.on("activate", () => {
if (win === null) {
createWindow();
}
});
我尝试在main.js文件中包含require('electron-reload')(__dirname);
,但没有任何变化
8条答案
按热度按时间ahy6op9u1#
我发现了这个:https://github.com/maximegris/angular-electron这是一个空的项目模板,使用电子和Angular 。执行
yarn start
允许热重载。它写得很好,在README.md!owfi6suc2#
默认情况下,
electron-reload
只在文件更改时重新加载所有打开的BrowserWindows
中的WebContents
。如果您想重新启动Electron(iidoEe.如果您想更改Electron主进程文件以重新加载应用程序),那么您要寻找的是“硬重置”。为此,您必须设置电子应用程序路径,如下所示:
documentation说路径应该是
./node_modules/.bin/electron
,但是我只能使用./node_modules/.bin/electron.cmd
来使它工作。这显然是an issue with Windows machines,应该指向MacOS上的可执行文件。在Linux系统上也可能是这样。下面应该是样板示例所需的所有文件:
./主文件.js
./索引.html
./包.json
安装时:
运行条件:
gzjq41n43#
难道app.relaunch()不是执行“硬重置”的方法吗?
app.relaunch([options])
options
对象(可选)args
字符串execPath
字符串(可选)当前示例退出时重新启动应用程序。
默认情况下,新示例将使用与当前示例相同的工作目录和命令行参数。如果指定
args
,则将args
作为命令行参数传递。如果指定execPath
,则将执行execPath
以重新启动,而不是当前应用程序。请注意,此方法在执行时不会退出应用,您必须在调用
app.relaunch
后调用app.quit
或app.exit
才能重新启动应用。xxls0lw84#
像我一样修改你的代码:
并调用reloadWindow方法。
以下URL:https://electronjs.org/docs/api/browser-window#winreload
y0u0uwnf5#
这些步骤对我很有效:
npm install electron-reload
简单安装电子钉仓const electron = require('electron')
require('electron-reload')(__dirname, { electron: require("${__dirname}/node_modules/electron") });
mspsb9vt6#
现在已经很晚了,但我认为这将有助于新的人登陆这个页面的问题。
只需替换win.loadFile(“Angular 应用索引文件路径”);具有以下代码
在电子主文件中。在这之后运行你的角应用程序与--live-reload选项,然后单独运行电子应用程序或创建一个脚本在package.json如下
ng serve --live-reload && electron .
jv4diomz7#
我发现最简单的方法是使用electron-reloader,安装后,只需将以下代码粘贴到
.js
文件的顶部,就可以了:tzxcd3kk8#
完整HMR
下面的解决方案显示了如何设置HMR,将电子重新加载到当前URL中
输入
package.json
我们运行
npm i
(不要把electron-reload
和electron-reloader
混淆,这两个是独立的库)。在文件
angular\electron\preload.ts
内添加在
ngOnInit
的angular\src\app\app.component.ts
内部加上window.electron.appControl.isReady();
如何运行它
在一个终端编译代码后,每次修改,运行
npm run hmr
此命令将重建(删除和创建)
angular\dist\project
目录。并在第二个终端运行electron byx1米11米1x
它将自动检测/dist文件夹更改并将其重新加载到当前URL中。