Je souhaite utiliser ipcMain / - ipcRenderer sur mon projet pour communiquer de manière angulaire à Electron et inversement.
Le côté Electron est assez clair:
const
electron = require('electron'),
ipcMain = electron.ipcMain,
;
ipcMain.on('asynchronous-message', function(event, arg) {
console.debug('ipc.async', arg);
event.sender.send('asynchronous-reply', 'async-pong');
});
ipcMain.on('synchronous-message', function(event, arg) {
console.debug('ipc.sync', arg);
event.returnValue = 'sync-pong';
});
Mais je ne sais pas comment intégrer ce module Electron dans mon application Angular 2. J'utilise SystemJS comme chargeur de modules, mais je suis un débutant avec ça.
Toute aide appréciée. Merci.
--- mario
Il y a conflit, parce que Electron utilise commonjs module en résolvant, mais votre code déjà compilé avec systemjs rules.
Manière robuste . Enregistrer l'objet require
retourné:
<script>
System.set('electron', System.newModule(require('electron')));
</script>
C'est le meilleur, car le script renderer/init.js
charge ce module au démarrage. SystemJS doit le prendre uniquement, pas de charges.
Manière alternative . Utilisez sale tour avec déclaration.
Récupère l'instance électronique dans index.html
:
<script>
var electron = require('electron');
</script>
Déclarez-le dans votre fichier TypeScript
de cette façon:
declare var electron: any;
Utilisez-le en toute liberté)
electron.ipcRenderer.send(...)
Un package récent appelé ngx-electron
facilite cette tâche. Lien vers repo et lien vers article
src/app/app.module.ts
import { NgxElectronModule } from 'ngx-electron';
// other imports
@NgModule({
imports: [NgxElectronModule],
...
})
src/app/your.component.ts
import { Component, NgZone } from '@angular/core';
import { ElectronService } from 'ngx-electron';
@Component({
selector: 'app-your',
templateUrl: 'your.component.html'
})
export class YourComponent {
message: string;
constructor(private _electronService: ElectronService, private _ngZone: NgZone) {
this._electronService.ipcRenderer.on('asynchronous-reply', (event, arg) => {
this._ngZone.run(() => {
let reply = `Asynchronous message reply: ${arg}`;
this.message = reply;
});
}
}
playPingPong() {
this._electronService.ipcRenderer.send('asynchronous-message', 'ping');
}
}
Remarque: NgZone
est utilisé car this.message
est mis à jour de manière asynchrone en dehors de la zone de Angular. article
Mais je ne sais pas comment intégrer ce module Electron dans mon application Angular 2
angular
serait hébergé dans le processus de rendu d'interface utilisateur dans electron. La ipcMain
est utilisée pour communiquer avec des processus enfants non rendus.
Cela devrait juste être un cas d’exigence du module ipcRenderer
dans votre fichier html principal (electron vous le fournira):
<script>
var ipc = require('electron').ipcRenderer;
var response = ipc.sendSync('getSomething');
console.log(response); // prints 'something'
</script>
puis en configurant un gestionnaire dans votre fichier js principal:
const ipcMain = require('electron').ipcMain;
ipcMain.on('getSomething', function(event, arg) {
event.returnValue = 'something';
});
C'est tout ce qu'il devrait y avoir.
Composant.TS
const ipc = require('electron').ipcRenderer;
@Component({
selector: 'app-my component',.....
})
....
public testElectronIpc(): void{
ipc.send('test-alert');
}
MAIN.JS
// IPC message listeners
ipc.on('test-alert', function (event, arg) {
console.log('Test alert received from angular component');
})
config
plugins: [ nouveau webpack.ExternalsPlugin ('commonjs', [ 'desktop-capturer', 'electron', 'ipc', 'ipc-renderer', 'native-image' 'distant', 'web-frame', 'presse-papiers', 'crash-reporter', 'écran', 'Shell' ] ) ],
Ma solution:
configurer un baseUrl dans tsconfig.json
à la racine du répertoire indiqué par la baseUrl, créez un répertoire "electron" . Dans ce répertoire, un fichier index.ts:
const electron = (<any>window).require('electron');
export const {BrowserWindowProxy} = electron;
export const {desktopCapturer} = electron;
export const {ipcRenderer} = electron;
export const {remote} = electron;
export const {webFrame} = electron;
(idéalement, [...] défaut d'exporter ('électron'), mais ce n'est pas analysable statiquement ...)
maintenant je peux avoir dans mon processus de rendu:
import {remote} from 'electron';
console.log(remote);
J'espère que c'est logique ...
avec les saisies activées:
///<reference path="../../typings/globals/electron/index.d.ts"/>
const electron = (<any>window).require('electron');
export const BrowserWindowProxy = <Electron.BrowserWindowProxy>electron.BrowserWindowProxy;
export const desktopCapturer = <Electron.DesktopCapturer>electron.desktopCapturer;
export const ipcRenderer = <Electron.IpcRenderer>electron.ipcRenderer;
export const remote = <Electron.Remote>electron.remote;
export const webFrame = <Electron.WebFrame>electron.webFrame;
NB: les tapages que j'ai reçus proviennent de:
{
"globalDependencies": {
"electron": "registry:dt/electron#1.4.8+20161220141501"
}
}