web-dev-qa-db-fra.com

Angular 4 + Electron - Comment exécuter une application et surveiller les modifications (rechargement en direct)

Je crée une application Electron à l'aide de Angular 4. Comment puis-je la configurer pour qu'elle surveille les modifications et la recharge en temps réel?.

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"
  }
}

électron

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

merci.

Actuellement, je construis mon application à chaque fois en utilisant la commande suivante

ng build --prod && electron .

Cela devient fatiguant, donc je veux pouvoir créer une commande pour qu’elle surveille les changements et les recharges en direct.

angularelectron
6
user1829348

Vous pouvez utiliser electron-reload pour recharger un module à chaud. Il écoute les modifications de fichiers et recharge l'application électronique.

Ajoutez-le simplement aux devDependencies de votre package.json.

Ensuite, vous devez l'ajouter à votre main.ts:

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, {});
}

Ajoutez ensuite une commande à votre paquet json

"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"

où build:main est votre script de compilation pour compiler votre projet. Cela compile tous les fichiers TypeScript et les place dans le dossier dist. Ensuite, il exécute npm install pour télécharger et installer des modules à partir de NPM.

Pour cela, vous avez besoin du Webpack-bundler Module. Installez-le avec

npm install --save-dev webpack

Tout d'abord, dans une console, exécutez npm start. Ensuite, dans une seconde console executenpm run serve. Maintenant, il écoute les modifications et recompile les modifications de fichiers.

tsc est synonyme de compilateur TypeScript. Si vous utilisez tsc en tant que module de nœud, assurez-vous qu’il est installé:

npm install -g TypeScript

Je l'utilise actuellement pour un projet avec la même configuration (Angular 4, Electron) et cela fonctionne parfaitement.

2
MatthiasSommer

Personnellement, je déteste à peu près toutes les autres réponses sur Internet. J'ai choisi de faire quelque chose de plus décalé. Je fais TOUT développement avec juste un angle brut et j'écrase les parties de l'application qui nécessitent des choses électroniques, telles que le partage du bureau ou l'obtention d'un fichier de configuration à partir d'un endroit comme celui-ci:

if (!this.electron.isElectronApp) {
  return {
    config:data,
    more:data,
  }
} else {
  do electron things
}

Jusqu'à présent, cela a fonctionné à merveille. Si quelqu'un peut penser comment cela va me mordre à la fesse plus tard s'il vous plaît partager.

1
Samuel Thompson