使用 Electron 和 Angular 进行热重载

Posted 2023-03-22

【中文标题】使用 Electron 和 Angular 进行热重载

【英文标题】：Hot reload using Electron and Angular

【发布时间】：2019-04-26 11:14:38

【问题描述】：

我正在为我的应用程序使用 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);，但没有任何改变

【问题讨论】：

“更改保存” 你是说“保存更改”吗？

另外，您是要进行硬重置（重启 electron main.js 进程）还是软重置（重启 BrowserWindow 渲染器进程）

是的对不起我编辑了。我真的不知道，我是电子新手，我正在尝试像 Angular 一样热重载。我猜这是软重置，不是吗？

那么您是否希望对 main.js 文件的更改会导致重新加载？如果你是那将需要硬重置。如果您不担心 main.js 文件的更改（即，您可以通过杀死它然后重新启动来手动重新启动应用程序），那么您可以使用软重置

我会写一个例子。

【参考方案1】：

我发现了这个：https://github.com/maximegris/angular-electron 这是一个空的项目模板，使用 Electron 和 Angular。 执行yarn start 允许热重载。 README.md 中写的很好！

【讨论】：

虽然这个值得一看，但对于直接解决已有项目的问题并没有帮助。

效果很好！对于所提出的问题，这可能不是一个确切的解决方案，但是拥有一些有效的东西 - 并且运作良好 - 是解决原始问题的一个很好的起点。我与原始海报处于完全相同的位置，我将从这个模板开始并将我现有的代码集成到其中。感谢您的链接，克莱门特。

看起来你可以从现有项目中获取 src 目录并用它替换模板的 src 目录。您唯一需要做的就是将依赖项添加到 package.json

【参考方案2】：

electron-reload 默认仅在文件更改时重新加载所有打开的BrowserWindows 中的WebContents。如果您想重新启动 Electron（即，如果您想更改 Electron 主进程文件以重新加载应用程序），那么您正在寻找的是“硬重置”。

为此，您必须设置电子应用路径，如下所示：

require('electron-reload')(__dirname, 
    electron: path.join(__dirname, 'node_modules/.bin/electron.cmd')
);

documentation 表示路径应该是到./node_modules/.bin/electron，但我只能使用./node_modules/.bin/electron.cmd 让它工作。这显然是an issue with Windows machines，据说指向MacOS 上的可执行文件。 Linux 系统上也可能出现这种情况。

以下应该是样板示例所需的所有文件：

_./main.js

const  app, BrowserWindow  = require('electron')
const path = require('path')
const url = require('url')

require('electron-reload')(__dirname, 
    electron: path.join(__dirname, 'node_modules/.bin/electron.cmd')
);

let mainWindow = null

function main() 
    mainWindow = new BrowserWindow()

    mainWindow.loadURL(
        url.format(
            pathname: path.join(__dirname, '/dist/index.html'),
            protocol: 'file:',
            slashes: true
        )
    )

    mainWindow.on('closed', () => 
        mainWindow = null
    )


app.on('ready', main)

app.on('window-all-closed', () => 
    if (process.platform !== 'darwin') 
        app.quit()
    
)

app.on('activate', () => 
    if (mainWindow === null)  
        main()
    
)

_./index.html

<h1>Hello World!</h1>

_{./package.json}

    "name": "electron-hot-reload-boilerplate",
    "version": "1.0.0",
    "description": "An Electron Boilerplate demonstrating hot reloading",
    "main": "main.js",
    "scripts": 
        "start": "electron ."
    ,
    "repository": "https://github.com/link/to/your/repo",
    "keywords": [],
    "author": "You",
    "license": "CC-BY-SA-3.0",
    "dependencies": 
        "electron": "^3.0.9",
        "electron-reload": "^1.3.0"
    

安装方式：

> npm install

运行：

> npm start

【讨论】：

谢谢，我在 Windows 上试过了，当我在我的 angular 组件上保存更改时，我得到了一个白页...

【参考方案3】：

app.relaunch() 不是执行“硬重置”的方法吗？

app.relaunch([options])

options 对象（可选） args字符串 execPath 字符串（可选）

在当前实例退出时重新启动应用程序。

默认情况下，新实例将使用相同的工作目录和 当前实例的命令行参数。当指定args 时， args 将作为命令行参数传递。什么时候 execPath 被指定，execPath 将被执行以重新启动 而不是当前的应用程序。

请注意，此方法在执行时不会退出应用程序，您必须 在调用app.relaunch 后调用app.quit 或app.exit 进行 应用重启。

【讨论】：

问题询问如何使用electron-reload，它是一个监控目录中文件的更改并在进行更改时重新启动应用程序的包。 app.relaunch 只是一种重新启动应用程序的方法，它不监视任何文件。所以不，这无论如何都不能回答这个问题。

【参考方案4】：

像我一样改变你的代码：

并根据需要调用 reloadWindow 方法。

按照这个网址：https://electronjs.org/docs/api/browser-window#winreload

const  app, BrowserWindow, ipcMain  = require('electron');
const url = require('url');
const path = require('path');

let mainWindow;
app.on('ready', Start);

function Start() 
  createWindow();
  settingsWindow();

function createWindow() 
  mainWindow = new BrowserWindow();
  mainWindow.loadURL(url.format( pathname: path.join(__dirname, `/dist/index.html`), protocol: 'file:', slashes: true, ));

function reloadWindow() 
  mainWindow.reload();
  mainWindow.loadURL(url.format( pathname: path.join(__dirname, `/dist/index.html`), protocol: 'file:', slashes: true, ));

function settingsWindow() 
  mainWindow.maximize();
  mainWindow.setMenu(null);

【参考方案5】：

这些步骤对我有用：

简单地使用npm install electron-reload安装电子重载

将这些行添加到您的 ma​​in.js

const electron = require('electron')

require('electron-reload')(__dirname, electron: require("$__dirname/node_modules/electron") );

【参考方案6】：

已经很晚了，但认为这对新登陆此页面的人有帮助。

只需替换 win.loadFile("angular app 的索引文件路径");用下面的代码

if(env==="PROD")
   win.loadFile("path to index file of angular app");
else      //// Else block is for hot reload in dev mode
   win.loadUrl("http://localhost:4200")

在电子主文件中。在此之后使用 --live-reload 选项运行您的角度应用程序，然后单独运行电子应用程序或在 package.json 中创建一个脚本，如下所示

ng serve --live-reload && electron .

【参考方案7】：

我找到的最简单的方法是使用electron-reloader，安装后，只需将以下代码粘贴到条目.js文件的顶部，就可以了：

const  app  = require('electron')

app.isPackaged || require('electron-reloader')(module)