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

Question

我不确定如何在电子应用程序的“前端”代码中使用ipcRenderer。 在文档中，我找到了使用 require 的示例，但我在前端没有 require 可用。 （我正在使用 Angular 创建“前端”端）

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

ma​​in.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);

preload.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 代码？在doc linked above 他们说

此功能对两个主要目的非常有用：

1. 通过将 ipcRenderer 助手暴露给渲染器，您可以使用进程间通信 (IPC)
   从渲染器触发主进程任务（反之亦然）。
2. [...]

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

---

我如何运行我的电子应用程序

1. 我构建了 Angular 代码 (ng build --prod)
2. 我通过运行electron . 启动电子应用程序（ma​​in.js 是入口点）

Answer 1

万一有人犯了同样的错误：

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

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

正确

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