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

Question

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