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的软件包使这一切变得简单。 Link to repo和link to article

<强>的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的区域之外异步更新。 article

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指向的目录的根目录下，创建一个目录＆＃34; electron＆＃34;。在这个目录里面，有一个文件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;

（理想情况下，导出默认[...]需要（＆＃39;电子＆＃39;），但这不是静态可分析的......）

现在我可以在渲染器进程中使用：

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

config

插件：[ 新的webpack.ExternalsPlugin（'commonjs'，[ “桌面捕获器”， '电子'， 'ipc'， 'ipc-renderer'， “本地图片”， '远程'， “网络框架”， '剪贴板'， “崩溃报告”， '屏幕'， '贝壳' ]） ]

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

6 个答案:

两种解决方案：