[Fixed] Hot reload using Electron and Angular

Issue

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

Solution

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 !

Leave a Reply

(*) Required, Your email will not be published