Angular 4 + Electron - how to run the application and monitor changes (live reload)
I am building an Electron app using Angular 4. How can I set it up so that it monitors any changes and reloads it.
package.json
{
"name": "angular-electron",
"version": "0.0.0",
"license": "MIT",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"electron": "electron .",
"electron-build": "ng build --prod && electron ."
},
"private": true,
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"angular-svg-round-progressbar": "^1.1.0",
"bulma": "^0.5.3",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "1.4.1",
"@angular/compiler-cli": "^4.2.4",
"@angular/language-service": "^4.2.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.1.1",
"electron": "^1.7.6",
"electron-packager": "^9.1.0",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
electron
const { app, BrowserWindow } = require('electron')
let win;
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/dist/assets/logo.png`
})
win.loadURL(`file://${__dirname}/dist/index.html`)
//// uncomment below to open the DevTools.
// win.webContents.openDevTools()
// Event when the window is closed.
win.on('closed', function () {
win = null
})
}
// Create window on electron intialization
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS specific close process
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS specific close process
if (win === null) {
createWindow()
}
})
thank.
I am currently building my application every time using the following command
ng build --prod && electron .
This is getting tedious, so I want to be able to run a single command to keep track of changes and live reboots.
You can use electron-reload to reload a hot module. It listens for file changes and reloads the electronic application.
Just add it to devDependencies in your package.json.
Then you have to add it to your main.ts file:
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, {});
}
Then add command to json package
"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"
where build:main
is your build script to compile your project. This will compile all the Typescript files and place them in the dist folder. It then launches npm install
to download and install modules from NPM.
To do this, you need the Webpack for the module. Install it with
npm install --save-dev webpack
First, when starting the console npm start
. Then in the second console execute npm run serve
. Now it listens for changes and recompiles the file changes.
tsc stands for Typescript compiler. If you are using tsc as a node module make sure it is installed:
npm install -g typescript
I am currently using it for a project with the same setup (Angular 4, Electron) and it works great.
source to share