如何将 Electron ipcRenderer 集成到 Angular 2 基于 TypeScript 的应用程序中？

Question

我想在我的项目中使用 ipcMain / ipcRenderer 从 Angular 到 Electron 并返回。

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

But I have no idea how to integrate that Electron module into my Angular 2 app

您将在 electron 的 UI 渲染过程中托管 angular。 ipcMain 用于与非渲染子进程通信。

Answer 2

这应该只是在您的 html 主文件中需要 ipcRenderer 模块的情况（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';
});

应该就这些了。

Answer 3

There is conflict, because Electron use commonjs module resolving, but your code already compiled with systemjs rules.

两种解决方案：

稳健的方式。注册对象 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 4

我的解决方案：

在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;

（理想情况下导出默认 [...]require（'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;

注意：我得到的打字来自：

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

Answer 5

一个名为 ngx-electron 的最新软件包使这变得容易。 Link to repo and link to 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');
    }
}

注意：使用 NgZone 是因为 this.message 在 Angular 的区域之外异步更新。 article

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

配置

插件：[ 新 webpack.ExternalsPlugin('commonjs', [ 'desktop-capturer', 'electron', 'ipc', 'ipc-renderer', 'native-image', 'remote', 'web-frame', 'clipboard', 'crash-reporter', 'screen', 'shell' ]) ],

如何将 Electron ipcRenderer 集成到 Angular 2 基于 TypeScript 的应用程序中？

How to integrate Electron ipcRenderer into Angular 2 app based on TypeScript?

javascript

ipc

typescript

electron

angular

两种解决方案：