你可以使用electron-reload来进行热模块重载，它会监听文件更改并重载电子应用程序。
只需将其添加到package.json中的devDependencies。
然后，你必须将它添加到你的主.ts：

import { app, BrowserWindow, Menu } from 'electron';

let win, serve;
const args = process.argv.slice(1);
serve = args.some(val => val === '--serve');

if (serve) {
  require('electron-reload')(__dirname, {});
}

然后向您的包json添加一个命令

"start": "webpack --watch",
"serve": "npm run build:main && electron ./dist --serve",
"build:main": "tsc main.ts --outDir dist && copyfiles package.json dist && cd dist && npm install --prod"

其中build:main是编译项目的编译脚本。这将编译所有Typescript文件并将其放入dist文件夹。然后，它运行npm install从NPM下载并安装模块。
您需要模块捆绑器Webpack才能运行此程序。请使用

npm install --save-dev webpack

首先，在一个控制台中运行npm start。然后，在另一个控制台中执行npm run serve。现在，它侦听更改并在文件更改时重新编译。
tsc代表TypeScript编译器。如果您使用tsc作为节点模块，请确保已安装：

npm install -g typescript

我使用它目前为一个项目与相同的设置（Angular 4，电子），它的工作完美。

我个人非常讨厌互联网上的其他解决方案。我选择做一些更出格的事情。我做所有的开发都是用原始的Angular ，并删除应用程序中需要电子化的部分，比如共享桌面，或者从下面这样的地方获取配置文件：

if (!this.electron.isElectronApp) {
  return {
    config:data,
    more:data,
  }
} else {
  do electron things
}

到目前为止，它的效果非常好。如果有人能想到这将如何咬我的屁股后，请分享。

你可以同时运行ng build与手表和电子。

"electron": "tsc application/start.ts && concurrently \"ng build --watch  --base-href ./\"  \"devMode=1 electron .\""

还可以使用electron-reload，并将其配置为在每次更改dist文件夹时重新加载。

require('electron-reload')(__dirname);

首次打开电子窗口时，由于未生成dist文件夹，因此会出现错误。一旦ng构建完成，则会生成dist，并且electron-reload将重新加载应用程序。之后，每次更改dist文件夹时，都会因为--watch而更改，并且electron-reload将重新加载应用程序。
相关的npm软件包
https://www.npmjs.com/package/concurrently
https://www.npmjs.com/package/electron-reload

首先，我们需要了解问题的实质。下面给出了两个问题，关于使用带Angular 和带电的电子：
1.如何在Build更改时重新加载Electron
1.如何在Source上重新加载Electron更改
现在，当我在寻找答案的时候，我实际上是在寻找第二个问题的答案，但是却得到了第一个问题的答案。我有太多的困惑，没有明确的答案。所以，让我们摆脱这种困惑，我来回答第二个问题。

如何在Source变更时重新载入电子

很明显，当我们开发Angular应用程序时，我们运行ng serve命令，将TS编译为JS并放入内存中，从内存而不是磁盘提供服务（当我们创建构建时）。
因此，要将in-memory source用于live electron reload，请执行以下操作：

安装电子再加载器：

npm install electron-reloader --save-dev
在main.js文件中添加以下内容：

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

使用ng serve在一个终端上运行Angular应用程序，您将获得类似于http：//localhost：4200的地址。
在其他终端运行electron，为此在您的package.json脚本文件中添加"electron": "electron ."并运行node electrone。
现在在main.js中提供mainWindow.loadURL()中的本地地址作为字符串。
现在，您的电子应用程序将得到重新加载，每当您作出更改，这将为您提供相同的重新加载体验时，Angular应用程序在浏览器上运行。

我使用以下解决方案（哪些部分来自互联网）-electron: ^19.0.4与angular: 13（在Windows 11上）：

更改后的代码编译

首先，在package.json中，我们使用ng build --watch代码来检测更改和编译代码（我将跳过我的整个脚本-可能您可以简化它）

"runElectron": "electron .",
"ngBuildDevHmr": "ng build --watch --configuration dev  --optimization=false --build-optimizer=false",
"hmr": "node electron/edit-package.js --dev && copy config\\env-dev.json electron\\env.json && cd electron && tsc --skipLibCheck && cd .. && npm run ngBuildDevHmr"

我只是在单独的终端中通过npm run hrm运行它，以查看编译器消息。

电子更新

好了，现在我们有了修改后的新编译代码--但是电子还不知道它。所以它必须检测到新代码的出现--我们使用下面的库：
npm install --save-dev electron-reload
(do不要混淆电子再装载器（^2.0.0-α .1）和电子再装载器--它们是分开的项目）
在主电子文件angular\electron\main.ts中，我添加了此代码以检测文件更改（在imports部分的正下方顶部）

if (!env.production) { 
    require('electron-reload')(
        __dirname+'\\..', // directory for detect changes
        {
            electron: path.join(__dirname+'\\..\\..', 'node_modules', '.bin', 'electron'), // path to electron executable
            hardResetMethod: 'exit' // hard reset after changes detection - you can comment it for better performance
        }
    );
}

可能是电子目录中的角代码被删除和创建-所以我们必须检测在父目录中的变化（上面的__dirname+'\\..'），我们也必须重新加载整个页面（这将在下面的代码中完成），因为电子将失去访问以前打开（但当前已删除）的文件夹。我使用did-fail-load事件检测它。
在main.ts的中间部分，我得到win = new BrowserWindow(...我添加代码，重新加载浏览器：

if (!env.production) {
        win.webContents.on("did-fail-load", function() {
            win.loadURL(`file:///${__dirname}/../sqar-spaceplan-frontend/index.html`);
        });
    }

最后在单独的终端I运行npm run rumElectron