Hot reload using Electron and Angular

Question

I'm using Angular and Electron for my app. I'm looking for a way to enable hot reload... When I run my yarn run electron (scripts : "electron": "ng build --base-href ./ && electron ."), if I save a change, my app isn't reloading. Here is my main.js file :

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();
  }
});

I tried to include require('electron-reload')(__dirname); in the main.js file but nothing changed

Answer 1

I found this : https://github.com/maximegris/angular-electron It's an empty project template, using Electron and Angular. Execute yarn start allow the hot reloading. It's well written in the README.md !