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

Question

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

在电子文档中 - https://www.electronjs.org/docs/tutorial/process-model#preload-scripts 我找到了一个示例，如何将主进程中的变量附加到渲染器进程中的 window，但是当我尝试使用附加变量时，我得到 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);

preload.js

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

电子服务（angular代码）

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ElectronService {

  constructor() { }

  getIpcRenderer(){
    return (<any>window).ipcRenderer;
  }
}

angular分量

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 他们说

This feature is incredibly useful for two main purposes:

By exposing ipcRenderer helpers to the renderer, you can use inter-process communication (IPC)
to trigger main process tasks from the renderer (and vice-versa).

[...]

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

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

我构建 angular 代码 (ng build --prod)
我通过运行ning electron . 启动电子应用程序（main.js 是入口点）

Answer 1

万一有人犯同样的错误：

preload 应该在 webPreferences 而不是直接在 BrowserWindow
错误

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

正确

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

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

How to add ipcRenderer from Electron to Angular? Attached variables from preload script are undefined

javascript

ipc

typescript

electron

angular