Hot reload using Electron and Angular

问题

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

回答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 !

回答2:

electron-reload by default only reloads the WebContents of all open BrowserWindows when a file changes. If you want to restart Electron (i.e. if you want changes to the Electron main process file to reload the application), then what you're looking for is a "hard reset".

To do this you'll have to set the electron app path, like so:

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

The documentation says that the path should be to ./node_modules/.bin/electron, but I've only been able to get it to work using ./node_modules/.bin/electron.cmd. This is apparently an issue with Windows machines, and supposedly pointing to the executable works on MacOS. This may also be the case on Linux systems.

The following should be all the files you need for a boilerplate example:

_./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"
    }
}

Install with:

> npm install

Run with:

> npm start

回答3:

Isn't app.relaunch() the way to go to perform a "hard reset"?

app.relaunch([options])

options Object (optional)
args String

execPath String (optional)

Relaunches the app when current instance exits.

By default the new instance will use the same working directory and command line arguments with current instance. When args is specified, the args will be passed as command line arguments instead. When execPath is specified, the execPath will be executed for relaunch instead of current app.

Note that this method does not quit the app when executed, you have to call app.quit or app.exit after calling app.relaunch to make the app restart.

回答4:

change your code like i do:

and call reloadWindow method Wherever you need.

following this url : 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:

These steps worked for me:

install electron-reload simply using npm install electron-reload
add these lines to your main.js

const electron = require('electron')

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

来源：https://stackoverflow.com/questions/53453504/hot-reload-using-electron-and-angular

标签

angular

electron