如何将ipcRenderer从Electron添加到Angular?预加载脚本中附加的变量未定义

Question

我不知道如何在电子应用程序的"前端"代码中使用ipcRenderer。在文档中，我发现了使用require的示例，但前端没有可用的require。(我正在使用angular创建"前端"侧(

在电子文档中——https://www.electronjs.org/docs/tutorial/process-model#preload-脚本我已经找到了一个如何在渲染器进程中将主进程中的变量附加到窗口的示例，但当我尝试使用附加的变量时，我会得到undefined。

main.js

function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
backgroundColor: "#ffffff",
preload: './preload.js'
});
win.loadFile('dist/foobar/index.html') // I get index.html after building angular code
win.on("closed", () => {
win = null;
});
}
app.on("ready", createWindow);

预加载.js

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

contextBridge.exposeInMainWorld("ipcRenderer", {ipcRenderer}); //exposing ipcRenderer to the window in renderer process 

电子服务(角码(

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ElectronService {
constructor() { }
getIpcRenderer(){
return (<any>window).ipcRenderer;
}
}

角分量

export class FoobarComponent {
constructor(private es: ElectronService) {}
test(){
console.log(this.es.getIpcRenderer()); // this logs as undefined
}
}

我的问题
在上面的代码中，您可以看到test()打印的是未定义的。为什么window.ipcRenderer未定义？我也运行了console.log(window)，但在属性列表中找不到ipcRenderer

有没有更好的方法将ipcRenderer公开给我的angular代码？在上面链接的文档中，他们说

此功能非常有用，主要有两个用途：

1. 通过向渲染器公开ipcRenderer助手，您可以使用进程间通信(IPC(
   从渲染器触发主进程任务(反之亦然(
2. […]

我认为contextBridge.exposeInMainWorld是最好的方法，因为它在文档中，但请告诉我这是否过时，或者是否有更好的方法。

---

我如何运行电子应用程序

1. 我构建角度代码(ng build --prod(
2. 我通过运行electron .启动电子应用程序(main.js是切入点(

Answer 1

如果有人犯了同样的错误：

预加载应在webPreferences中，而不是直接在BrowserWindow中
错误

win = new BrowserWindow({
preload: './preload.js'
});

正确

win = new BrowserWindow({
webPreferences:{
preload: './preload.js'
}
});