Ionic Cordova Electron: How to get access to ipcRenderer in Ionic Angular

I am investigating the use of Cordova Electron (post is here as no Cordova group) so I can move away from Windows UWP (which sees me stuck at Ionic 4). As my app is using Cordova, as it started many years ago when Cordova was the default, I want to stay with Cordova for now as it has the (official) Electron support, and command line builds - essential for our release build machine…

Windows build is essential for me as I have many clients using it on Surface and other ruggedized tablets (as well as sometimes desktop to compliment the ios and Andorid builds), so I really can’ take it away now (at the time had no idea the “UWP rug” would be pulled from under our feet).

Anyway, I started a new Ionic test app, and added Cordova Electron following this

cordova platform add cordova-electron

I then did a build

ionic build
cordova build electron

And I ended up with a run able Electron app with Ionic inside, so all good (slower to launch than UWP which was always almost instant, but can live with that)

So, now, I need to be able to call native code (the whole point of being wrapped in a native app) from the “web app”, and the way appears to be via the ipcRenderer.

However, I just cannot seem to get a reference to this.

First following another post, I have the nodeIntegration included in the Election Browser window options.

{
 "browserWindow": {
  "autoHideMenuBar": true,
  "plugins": true,
  "webPreferences": {
    "nodeIntegration": true
   }
  }
}

After this, I have gone through many other posts (for example this one or this one, but none work at all.

Any attempt to get to require either by itself or on the window object, I always get require is not defined.

Or, another example, if I have the following…

import { Component } from '@angular/core';
declare function require(name: string);
....

 onClick(): void {
    try {      
        const ipc = require('electron').ipcRenderer;      
        console.log('sending');
        ipc.send('test', 'google');
        console.log('sent');
    } catch (error) {
        console.error(error);
    }
}

I get errors such as

 Warning: D:\dev\ionic\electron-ionic\src\app\tab1\tab1.page.ts depends on 'electron'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

    ./node_modules/electron/index.js:1:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\dev\ionic\electron-ionic\node_modules\electron'

    ./node_modules/electron/index.js:2:13-28 - Error: Module not found: Error: Can't resolve 'path' in 'D:\dev\ionic\electron-ionic\node_modules\electron'

I also tried the “more natural” importing of ipcRenderer as following…

    import { ipcRenderer } from 'electron';
    ...
    ipcRenderer.send('test', 'google')

But same errors as above (fs and path modules) when doing the ionic build

I then did an

    npm i fs --save-dev
    npm i path --save-dev

and now down to one error when doing the ionic build

./node_modules/electron/index.js:1:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'D:\dev\ionic\electron-ionic\node_modules\electron'

Strangely I don’t see either fs or path folder in node_modules.

I really have tried every combination I can find, but nothing works.

ionic info is

$ ionic info

Ionic:

   Ionic CLI                     : 5.4.16 (C:\Users\peter\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 6.0.1
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Cordova:

   Cordova CLI       : 10.0.0 (cordova-lib@10.1.0)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.15.3
   native-run  : 0.2.9

System:

   Android SDK Tools : 26.1.1 (C:\Users\peter\AppData\Local\Android\sdk)
   NodeJS            : v14.17.0 (C:\Program Files\nodejs\node.exe)
   npm               : 7.21.1
   OS                : Windows 10

Does anyone have the correct syntax to get to the ipcRenderer in this context (ie an Ionic Angular Cordova Electron application)?

Thanks in advance

First have a look at this repository which is an Angular - Electron template.

In my component I then add

import { ElectronService } from ‘./core/services’;

in constructor:

private electronService: ElectronService

then you can for example send a message to electron with

electronService.ipcRenderer.send(‘hello’, ‘from Angular’);

Thanks for that. I ran up that app and it seems to work. I could make a call to this.electron.ipcRenderer.send('hello', 'from Angular'); and it executes with no errors.

Seeing this, I tried adding the following to the Ionic/Cordova electron app…

get isElectron(): boolean {
    console.log(`process: ${window.process}`);
    if (window.process) {
      console.log(`process.type: ${window.process.type}`);
    }

    return !!(window && window.process && window.process.type);
  }
...
if (this.isElectron) {
        console.log('isElectron');
        
      } else {
        console.log('is NOT Electron');
      }

      const ipcRenderer = window.require('electron').ipcRenderer;
      ipcRenderer.send('test', 'google');

Now in my output, I get

sending
tab1.page.ts:39 process: undefined
tab1.page.ts:23 is NOT Electron
tab1.page.ts:34 TypeError: window.require is not a function
    at Tab1Page.onClick (tab1.page.ts:26)

So can see I have neither process nor require hanging off of my window object,

In the example Angular app there is the following comment in electron.service.ts…

// Notes : 
// * A NodeJS's dependency imported with 'window.require' MUST BE present in `dependencies` of both `app/package.json` 
// and `package.json (root folder)` in order to make it work here in Electron's Renderer process (src folder)
// because it will loaded at runtime by Electron.

but I see nothing like this in either package.json, so I am mystified why in the example window.require exists, but it does not in my case (ie I wonder how he got this to be attached to window)?

Unfortunately I don’t know much more. I have struggled myself adding electron to an existing project and then found this repo which worked. So I will use this as a base for a new project and then add Ionic to that. I have not done that yet, so I hope adding Ionic to this repo will be easier to do than the other way around.