Как интегрировать Electron ipcRenderer в приложение Angular 2 на основе TypeScript?

Я хочу использовать ipcMain / ipcRenderer в моем проекте для связи с угловым электроном и обратно.

электронная сторона довольно ясна:

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

но я понятия не имею, как интегрировать этот электронный модуль в мое приложение Angular 2. Я использую SystemJS как загрузчик модулей, но я новичок с ним.

любая помощь ценится. Спасибо.

--- Марио

17
angular electron ipc javascript typescript

5 ответов

есть конфликт, потому что Электрон использовать на CommonJS разрешение модуля, но код уже скомпилирован с systemjs правила.

два решения:

надежный способ. Зарегистрировать объект require вернулся:

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

это самое лучшее, потому что renderer/init.js скрипт загружает этот модуль при запуске. SystemJS должен взять его только, а не нагрузки.

альтернативный способ. Используйте грязный трюк с декларацией.

получить электронный экземпляр внутри index.html:

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

объявить его внутри вашего typescript файл таким образом:

declare var electron: any;

используйте его со свободой)

electron.ipcRenderer.send(...)
15

недавний пакет под названием ngx-electron делает это легко. ссылка на репо и ссылка на статью

src / app / app.модуль.ТС

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

src / app / your.деталь.ТС

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

Примечание: NgZone используется, потому что this.message обновляется асинхронно вне зоны Angular. статьи

11

но я понятия не имею, как интегрировать этот электронный модуль в мое приложение Angular 2

ты бы angular размещено в процессе рендеринга пользовательского интерфейса в electron. The ipcMain используется для связи с дочерними процессами без рендеринга.

2

Это должен быть просто случай, требующий ipcRenderer модуль в вашем основном html-файле (electron предоставит это для вас):

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

а затем настройка обработчика в вашем основном файле js:

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

Это все, что должно быть.

1

мое решение:

настройте baseUrl в tsconfig.в JSON

в корне каталога, на который указывает baseUrl, создайте каталог "электрон". В этой директории файл index.ТС:

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;

(в идеале экспорт по умолчанию [...] require ('electron'), но это не поддается статическому анализу...)

теперь я могу иметь в своем процессе визуализации:

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

надеюсь, что это имеет смысл...

С typings включено:

///<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: typings я получил от:

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