如何將Electron ipcRenderer集成到基於TypeScript的Angular 2應用程序中？

Question

我想在我的項目中使用ipcMain / ipcRenderer從Angular到Electron並返回。

電子方面很清楚：

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

但我不知道如何將Electron模塊集成到我的Angular 2應用程序中。 我使用SystemJS作為模塊加載器，但我是一個新手。

任何幫助贊賞。 謝謝。

---馬里奧

Answer 1

有沖突，因為Electron使用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(...)

Answer 2

最近的一個名為ngx-electron軟件包使這很容易。 鏈接到repo並鏈接到文章

SRC /應用程序/ app.module.ts

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

SRC /應用程序/ 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');
    }
}

注意：使用NgZone是因為this.message在Angular的區域之外異步更新。 文章

Answer 3

但我不知道如何將Electron模塊集成到我的Angular 2應用程序中

你會在電子的UI渲染過程中托管angular 。 ipcMain用於與非呈現子進程通信。

Answer 4

這應該只是需要你的主html文件中的ipcRenderer模塊（電子將為你提供）：

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

這就應該是它的全部。

Answer 5

我的解決方案

在tsconfig.json中配置baseUrl

在baseUrl指向的目錄的根目錄下，創建一個目錄“electron”。 在這個目錄里面，有一個文件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;

（理想情況下，導出默認值[']需要（'電子'），但這不是靜態可分析的......）

現在我可以在我的渲染過程中：

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

希望它有意義......

啟用打字：

///<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：我得到的打字來自：

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

Answer 6

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

配置

插件：[new webpack.ExternalsPlugin（'commonjs'，['desktop-capturer'，'electron'，'ipc'，'ipc-renderer'，'native-image'，'remote'，'web-frame'，' clipboard'，'crash-reporter'，'screen'，'shell']）]，