web-dev-qa-db-ger.com

Wie kann ich Electron ipcRenderer in die auf TypeScript basierende Angular 2 App integrieren?

Ich möchte ipcMain / ipcRenderer für mein Projekt verwenden, um von Angular zu Electron und zurück zu kommunizieren.

Die Electron-Seite ist ziemlich klar:

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';
});

Aber ich habe keine Ahnung, wie ich dieses Electron-Modul in meine Angular 2 App integrieren kann. Ich benutze SystemJS als Modullader, aber ich bin ein Anfänger damit.

Jede Hilfe geschätzt. Vielen Dank.

--- Mario

javascripttypescriptangularipcelectron
21
Sommereder

Es gibt einen Konflikt, da Electron commonjs module auflöst, aber Ihr Code bereits mit systemjs rules kompiliert wurde.

Zwei Lösungen:

Robuste Art . Registrieren Sie das Objekt require zurückgegeben:

<script>
    System.set('electron', System.newModule(require('electron')));
</script>

Dies ist das Beste, weil das Skript renderer/init.js dieses Modul beim Start lädt. SystemJS muss es nur nehmen, nicht laden.

Alternativer Weg . Verwenden Sie einen schmutzigen Trick mit Deklaration.

Holen Sie sich die Elektroneninstanz in index.html:

<script>
    var electron = require('electron');
</script>

Deklarieren Sie es in Ihrer TypeScript-Datei folgendermaßen:

declare var electron: any;

Benutze es mit Freiheit)

electron.ipcRenderer.send(...)
18
DenisKolodin

Ein aktuelles Paket namens ngx-electron macht dies einfach. Link zum Repo und Link zum Artikel

src/app/app.module.ts

import { NgxElectronModule } from 'ngx-electron';
// other imports 
@NgModule({
  imports: [NgxElectronModule],
  ...
})

src/app/Ihre.Komponente.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');
    }
}

Hinweis: NgZone wird verwendet, da this.message außerhalb der Zone von Angular asynchron aktualisiert wird. Artikel

12
user3587412

Ich habe jedoch keine Ahnung, wie ich dieses Electron-Modul in meine Angular 2-App integrieren kann

Sie hätten angular im Rendering-Prozess der Benutzeroberfläche in Elektron gehostet. Die Variable ipcMain wird verwendet, um mit nicht darstellenden untergeordneten Prozessen zu kommunizieren.

2
basarat

Dies sollte nur der Fall sein, wenn Sie das ipcRenderer-Modul in Ihrer Haupt-HTML-Datei benötigen (Elektron stellt dies für Sie bereit):

<script>
  var ipc = require('electron').ipcRenderer;
  var response = ipc.sendSync('getSomething');
  console.log(response); // prints 'something'
</script>

und dann einen Handler in Ihrer js-Hauptdatei einrichten:

const ipcMain = require('electron').ipcMain;
ipcMain.on('getSomething', function(event, arg) {
  event.returnValue = 'something';
});

Das ist alles was dazu gehört.

1
KarlPurk

Component.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');
})

konfig

plugins: [ neues webpack.ExternalsPlugin ('commonjs', [ 'desktop-capturer'), 'electron', 'ipc', 'ipc-renderer', 'native-image' , 'remote', 'Web-Frame', 'Zwischenablage', 'crash-reporter', 'screen', 'Shell' ] ) ]

0
quickreplyguest

Meine Lösung:

konfigurieren Sie eine baseUrl in tsconfig.json

erstellen Sie im Stammverzeichnis des Verzeichnisses, auf das die baseUrl verweist, ein Verzeichnis "electron" . In diesem Verzeichnis befindet sich eine Datei 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;

(Exportieren Sie im Idealfall den Standardbedarf [...] "Elektron"), dies ist jedoch nicht statisch auswertbar ...)

jetzt kann ich in meinem Renderer-Prozess Folgendes haben:

import {remote} from 'electron';
console.log(remote);

Hoffe es macht Sinn ...

mit aktivierten Typisierungen:

///<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: ich habe Typisierungen von:

{
  "globalDependencies": {
    "electron": "registry:dt/electron#1.4.8+20161220141501"
  }
}
0
Charles HETIER