Angular & Electron：ipcRenderer - __dirname 未定义

Question

我已经建立了一个新的 Angular 项目并安装了 electron。 当我尝试在 angular 组件中使用 ipcRenderer 时，我收到如下所示的错误 (ReferenceError)。

    Uncaught ReferenceError: __dirname is not defined
     at Object.vbkW (index.js:4)
     at __webpack_require__ (bootstrap:79)
     at Module.Sy1n (app.component.ts:2)
     at __webpack_require__ (bootstrap:79)
     at Module.ZAI4 (app.module.ts:2)
     at __webpack_require__ (bootstrap:79)
     at Module.zUnb (app-routing.module.ts:8)
     at __webpack_require__ (bootstrap:79)
     at Object.0 (main.js:10)
     at __webpack_require__ (bootstrap:79)

一些版本信息：

    Angular CLI: 11.2.14
    Node: 14.16.0
    @angular-devkit/architect       0.1102.14
    @angular-devkit/build-angular   0.1102.14
    @angular-devkit/core            11.2.14
    @angular-devkit/schematics      11.2.14
    @schematics/angular             11.2.14
    @schematics/update              0.1102.14
    rxjs                            6.6.7
    typescript                      4.1.5

这是我的app.component.ts代码，仅使用ipcRenderer.send() ：

import { Component } from '@angular/core';
import { ipcRenderer } from 'electron';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'portals-new-two';

  tempButton(): void {
    console.log('pressed!');
    ipcRenderer.send('open-dev-tools');
  }

}

虽然不建议，但我尝试在我的 BroswerWindow 中设置nodeIntegration: true但仍然收到错误：

win = new BrowserWindow({ 
 width: 800,
 height: 600,
 webPreferences: {
  nodeIntegration: true,
 }
});

如果我删除ipcRenderer.send('open-dev-tools'); 行错误消失。

尝试使用remote而不是ipcRenderer/ipcMain时，我也会遇到同样的错误。

__dirname也可以从我的main.js文件记录到控制台。

任何帮助将非常感激。

Answer 1

好的，我没有找到发生这种情况的原因，但是我在这里使用了一个很棒的 Angular/Electron 入门项目来解决它：

https://github.com/maximegris/angular-electron

这利用了 Angular 服务来连接到所有 electron 的东西，似乎运作良好。