Electron + Ionic + child_process - ionic-framework

Question

I'm building an electron app to run on Windows to move a robot. (The controlling device must be windows as requested by the customer) It's built in Ionic with typescript and I'm attempting to create a desktop solution with a feature that runs some .exe files to move the robot in some predefined movements. They are a group of .exe files made by another guy, and they work fine when run from the shell. Those exe files do turn off/on lights, move an arm, etc... Right now those exe files work and they are all in a C:\botcontrol\ folder.
I've been struggling with node's child_process to be able to run all those exe files from a simple interface. My problem is that I'm not able to include child_process in any manner without getting the console error t(...).execFile is not a function.
I've been digging two days through the internet in various languages on how to include the child_process node module in a typescript angular 7 app, but I'm really stuck with this and I don't know how to solve it without getting the cursed error above. I tried adding to tsconfig:
"map": {
"child_process": "#node/child_process"
}
and many other webpack config attempts, but none of them worked for me.
Right now what I need is to add 'child_process' so when I run a service I can import it like:
import { exec,execFile} from "child_process";
...
or
import * as cp from "child_process";
...
I read somehwere that I need to add the module to be exported at SystemJS, or at the webpack config, but I don't find any config like that in my project.
My dependencies are these in the package.json:
...
"dependencies": {
"#angular/common": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/forms": "~8.1.2",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#ionic-native/core": "^5.14.0",
"#ionic-native/splash-screen": "^5.14.0",
"#ionic-native/status-bar": "^5.14.0",
"#ionic/angular": "^4.9.1",
"#ionic/storage": "^2.2.0",
"#ngx-translate/core": "^11.0.1",
"#ngx-translate/http-loader": "^4.0.0",
"cordova-sqlite-storage": "^3.3.0",
"core-js": "^2.5.4",
"electron-json-storage": "^4.1.8",
"ng-connection-service": "^1.0.4",
"rxjs": "^6.5.3",
"simple-keyboard": "^2.26.4",
"tslib": "^1.9.0",
"wine": "^0.9.8",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#ionic/angular-toolkit": "~2.0.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.10.54",
"codelyzer": "^5.1.1",
"electron": "^6.0.10",
"electron-installer-dmg": "^3.0.0",
"electron-packager": "^14.0.6",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
...
Can anyone help me, please? It would be much appreciated :)

Answer 1

If you're using the #capacitor-community/electron platform to build your app you must consider the following:
Electron works with two process types, the main process and the renderer process (find more info here)
The renderer process is basically a web browser, that cannot use native capabilities such as child_process while the main process can
The renderer process can communicate with the main process, more info here
Your ionic/angular app is built to run as a renderer process
A possible solution:
Send a message from the renderer process (angular) to the main process (electron) in order to make the main process run the executable file and get back the output to the renderer process (aka black magic).
How?
Create the main process handler
Modify the file YOUR_PROJECT_DIR/electron/src/index.ts
add the import:
import {ipcMain} from 'electron';
import {execFileSync} from 'child_process';
add the event handler at the and of the file:
ipcMain.handle('execCommand', (event, arg) => {
//this will handle an event called 'execCommand' triggered from the renderer process
let cmdRes = execFileSync("./path-to-file.exe", [], {encoding: 'utf8'});
//cmdRes contains the file execution output
return cmdRes;
});
Expose ipcRenderer to the main context of the ionic/angular application
Modify the file YOUR_PROJECT_DIR/electron/src/preload.ts
add this:
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
ipc: { ...ipcRenderer }
});
A security concern: a user could open the developer tools and modify the javascript code to invoke events with malicious content, it's not a real problem in a local environment but it could be with remote resources.
Communicate with the main process from the angular app
Let's say you're inside a ionic/angular page:
callExecutable() {
(<any>window).electron.ipc.invoke('execCommand').then(
res=>console.log(res) //res contains the command output from the main process
);
}
In this way you can create an event handler for each .exe files you have to call and create an angular service to .invoke() each handler.
Just tested and it's working with ionic version 6.18.1 and #capacitor-community/electron version 7.5.6