Let´s say we want to use ipcMain / ipcRenderer on our project to communicate from Angular to Electron and back.

The Electron side look like this:

const { ipcMain } = require('electron');

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

how to integrate the “ipcRenderer” Electron module into our Renderer ( Here Angular app) ?

Solutions:

Robust way. Register object require returned:

if for example , we are using SystemJS as module loader

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

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:

<script>
      const { ipcRenderer } = require("electron");
</script>

Declare it inside your typescript file this way:

declare var ipcRenderer: any;

Use it with freedom : )

ipcRenderer.send(...)