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

3 posts - 2 participants

Read full topic