Ionic Capacitor Electron - IPC Renderer in Angular, Unable to Build

Stack Overflow - IPC Renderer

I am using Electron via Angular Ionic (8) Capacitor 5. I am trying to setup access to the IPC Renderer within my angular app but keep getting below error when running npm run build. In short I have extended window in my angular typescript to include electron functions. My IDE is correctly recognising the extended window typescript. Its only when i try to run ionic build i get the error. Note I am running ionic build within my angular app then will sync to capacitor electron.

Also I have installed electron through the recommend instructions. https://capacitor-community.github.io/electron/docs/gettingstarted

Can anyone please advise what am I doing wrong?

Error:
src/app/pages/login/login.page.ts:1195:10 - error TS2551: Property 'electron' does not exist on type 'Window & typeof globalThis'. Did you mean 'electrons'?

1195 window.electron.ipcRenderer.send('my-channel', { message: 'Hello, Main Process!' });
~~~~~~~~

src/app/pages/login/login.page.ts:48:4
48 electron: {
~~~~~~~~~
'electrons' is declared here.


Angular App

src/custom-electron-typings.d.ts

export {};

declare global {
interface Window {
electron: {
ipcRenderer:{
send: (channel:string, ...args:any[])=>void;
on: (channel:string, listener: (event: any, ...args: any[])=>void)=>void;
// add other electron apis you need here
}
}
}
}


tsconfig.app.json

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"baseUrl": "./"
},
"files": [
"main.ts",
"polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}


login.page.ts

test() {
window.electron.ipcRenderer.sendMessage('my-channel', { message: 'Hello, Main Process!' });
}


electron /src/index.ts

function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // Keep Node.js integration disabled
contextIsolation: true, // Enable context isolation
preload: path.join(__dirname, 'preload.js'), // Path to your preload script
},
});

if (electronIsDev){
win.loadURL('http://localhost:8100'); // Adjust to your Angular app's URL
} else {
win.loadURL('https://client.ourmanagement.com'); // Adjust to your Angular app's URL
}

}


/src/preload.ts

require('./rt/electron-rt');
//////////////////////////////
// User Defined Preload scripts below
console.log('User Preload!');

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
sendMessage: (channel, data) => {
ipcRenderer.send(channel, data);
},
onMessage: (channel, callback) => {
ipcRenderer.on(channel, (event, ...args) => callback(...args));
},
});

Continue reading...