web-dev-qa-db-fra.com

Comment intégrer Electron ipcRenderer dans l'application Angular 2 basée sur TypeScript?

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

javascripttypescriptangularipcelectron
21
Sommereder

Il y a conflit, parce que Electron utilise commonjs module en résolvant, mais votre code déjà compilé avec systemjs rules.

Deux solutions:

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(...)
18
DenisKolodin

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

12
user3587412

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.

2
basarat

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.

1
KarlPurk

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' ] ) ],

0
quickreplyguest

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"
  }
}
0
Charles HETIER