I have a vanilla Angular 14.x application (just ng new) to which I've added Electron 19.x and electron-reload. Everything works if I run ng build --base-href ./ && electron .
Now I'm trying to add hot reloading. All I want is to have changes I make in my renderer process code to be reflected in the Electron app without having to hard reset Electron. I've seen many questions and answers on SO, seen several blog articles but for some reason none of it is working for me. Here are the important parts of my main.js (Electron main):
require("electron-reload"); // <-- package is installed
//In my createWindow function:
const url = `file://${__dirname}/dist/index.html`;
win.loadURL(url);
//I've also tried: win.loadFile(`${__dirname}/dist/index.html`); (with no difference in the result)
The Angular application is entirely unchanged except for editing angular.json to
...
"options": {
"outputPath": "dist",
...
}
...
The application loads correctly the first time. But after I make a change (add extra characters in app.component.html), I get the following logged to the console in VSCode:
(node:4788) electron: Failed to load URL: file:///C:/myProject/dist/ with error: ERR_FILE_NOT_FOUND
It seems odd that the failing URL doesn't include the filename - index.html - but I don't know if that matters. If I look in the dist folder, I can see that the file is there.
This is on a Windows machine. What do I need to do to make this work?
