MarioHofer MarioHofer - 2 years ago 983
Javascript Question

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

I want to use ipcMain / ipcRenderer on my project to communicate from Angular to Electron and back.

The Electron side is pretty clear:

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

But I have no idea how to integrate that Electron module into my Angular 2 app. I use SystemJS as module loader, but I'm a rookie with it.

Any help appreciated. Thanks.

--- Mario

Answer Source

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

Two solutions:

Robust way. Register object require returned:

    System.set('electron', System.newModule(require('electron')));

This is the best, because renderer/init.js script loads that module on start. SystemJS have to take it only, not loads.

Alternative way. Use dirty trick with declaration.

Get electron instance inside index.html:

    var electron = require('electron');

Declare it inside your typescript file this way:

declare var electron: any;

Use it with freedom )

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download