Angular+Electron集成使用ipcRenderer时出现__dirname未定义错误求助

这个错误不是Electron运行环境的问题，是Angular打包阶段的webpack配置导致的。你直接在Angular组件中导入electron模块时，webpack会尝试将Electron的Node侧代码打包进前端产物，Electron内部依赖__dirname这个Node.js全局变量，但Angular默认的webpack配置没有注入这类Node全局变量，因此运行时就会抛出未定义错误。哪怕你打开了nodeIntegration，打包阶段缺失的变量也不会被补全，所以配置不生效。

不需要开启高危的nodeIntegration，用Electron官方推荐的预加载脚本+上下文隔离方案即可解决：

步骤1：修改Electron主进程的BrowserWindow配置 #

const path = require('path')
win = new BrowserWindow({ 
 width: 800,
 height: 600,
 webPreferences: {
  nodeIntegration: false, // 关闭不安全的node集成
  contextIsolation: true, // 开启上下文隔离，Electron 12+ 默认开启
  preload: path.join(__dirname, 'preload.js') // 配置预加载脚本路径
 }
});

步骤2：编写预加载脚本preload.js #

在Electron主进程同级目录新建preload.js，通过contextBridge将需要的IPC能力暴露给渲染进程：

const { contextBridge, ipcRenderer } = require('electron')

// 将需要的方法暴露到渲染进程的window对象上
contextBridge.exposeInMainWorld('electronAPI', {
  openDevTools: () => ipcRenderer.send('open-dev-tools')
  // 后续需要其他IPC方法也可以在这里扩展
})

步骤3：添加TypeScript类型声明（可选，解决TS类型报错） #

在Angular项目的src目录下新建global.d.ts文件，添加全局类型声明：

declare interface Window {
  electronAPI: {
    openDevTools: () => void
    // 这里和preload里暴露的方法保持同步即可
  }
}

然后在tsconfig.app.json的include数组中添加"src/global.d.ts"确保类型生效。

步骤4：修改Angular组件代码 #

删除原来的Electron导入语句，直接调用暴露的全局方法：

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

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

  tempButton(): void {
    console.log('pressed!');
    window.electronAPI.openDevTools(); // 直接调用预加载脚本暴露的方法
  }
}

如果一定要直接在Angular中导入Electron模块，可以通过修改webpack配置解决：

1. 安装@angular-builders/custom-webpack
2. 新增自定义webpack配置文件，添加以下配置：

module.exports = {
  externals: {
    electron: 'require("electron")' // 告诉webpack不要打包electron模块，运行时从Node环境取
  },
  node: {
    __dirname: true,
    __filename: true
  }
}

3. 修改angular.json配置，将build和serve的builder替换为custom-webpack的对应builder，关联自定义配置文件
4. 同时Electron的BrowserWindow配置要开启nodeIntegration: true、关闭contextIsolation: false，该方案会大幅降低应用安全性，不建议生产环境使用。

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