Angular+Ionic8+Capacitor5集成Electron IPC Renderer构建失败求助

我在基于Angular的Ionic 8 + Capacitor 5环境中使用Electron，尝试配置IPC Renderer供Angular应用访问，但执行npm run build时一直报类型错误。我已经在Angular的TypeScript中扩展了Window接口，添加了Electron相关方法，IDE能正确识别类型，但执行ionic build就报错。流程是先执行Angular应用的ionic build，再同步到Capacitor Electron。

错误信息 #

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 应用文件 #

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

问题原因及解决办法 #

1. 类型定义与实际暴露API不匹配 #

你在类型文件里定义的是electron.ipcRenderer.send/on，但preload脚本里通过contextBridge暴露的是electron.sendMessage/onMessage，没有ipcRenderer嵌套层级。同时代码里的调用写法既不符合类型定义，也不符合实际暴露的API结构，直接导致类型校验失败。

修复步骤：

• 修改src/custom-electron-typings.d.ts，让类型和暴露的API结构一致：

export {};

declare global {
    interface Window {
     electron: {
        sendMessage: (channel:string, data: any)=>void;
        onMessage: (channel:string, callback: (...args: any[])=>void)=>void;
     }
    }
  }

• 修改login.page.ts里的调用代码，匹配暴露的API：

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

2. 局部变量命名冲突 #

错误提示里提到'electrons' is declared here，检查login.page.ts第48行的electron局部变量，它和全局window.electron重名，导致TypeScript混淆。如果存在这个局部变量，直接重命名即可避免冲突。

3. 类型文件识别排查（备选） #

如果修改后还是无法识别类型，可检查：

• 确保custom-electron-typings.d.ts在src目录下，没有被tsconfig排除
• 可将类型定义合并到项目已有的src/typings.d.ts文件中，提升识别优先级

内容的提问来源于stack exchange，提问作者Ka Tech