Angular 15 + Electron 22项目中使用ipcRenderer遭遇构建及运行时错误的解决咨询

兄弟，我之前在Angular+Electron的项目里也踩过几乎一模一样的坑，给你分享几个亲测有效的解决思路，按优先级推荐：

最推荐：用预加载脚本+ContextBridge安全暴露ipcRenderer #

这个方法完全规避了在Angular代码里直接导入Electron模块的问题，既符合Electron的安全规范，又能彻底解决构建报错。

步骤1：配置Electron主进程的预加载脚本 #

在你的Electron主进程文件（比如main.js/main.ts）里，创建BrowserWindow时指定预加载文件路径，同时开启上下文隔离（必须开，这是Electron的安全要求）：

const { BrowserWindow, app } = require('electron');
const path = require('path');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 替换成你的预加载脚本实际路径
      preload: path.join(__dirname, '../preload.js'),
      contextIsolation: true, // 强制开启，安全必备
      nodeIntegration: false // 建议关闭，避免Node.js环境直接暴露给渲染进程
    }
  });

  mainWindow.loadURL('http://localhost:4200'); // 本地开发地址，打包时换为dist路径
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

步骤2：编写预加载脚本暴露ipcRenderer #

在preload.js里，用contextBridge把需要的ipcRenderer方法暴露给Angular所在的渲染进程，别全暴露，按需提供最安全：

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

// 只暴露你实际需要用到的方法
contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => ipcRenderer.send(channel, data),
  listenMessage: (channel, callback) => {
    // 包装一下，避免回调里的this指向问题
    const wrappedCallback = (event, ...args) => callback(...args);
    ipcRenderer.on(channel, wrappedCallback);
    // 可以返回一个取消监听的方法，方便Angular组件销毁时清理
    return () => ipcRenderer.removeListener(channel, wrappedCallback);
  }
});

步骤3：在Angular服务里使用暴露的API #

首先给window对象加个类型声明，避免TypeScript报错，你可以在项目根目录新建typings.d.ts文件：

declare global {
  interface Window {
    electronAPI: {
      sendMessage: (channel: string, data: any) => void;
      listenMessage: (channel: string, callback: (...args: any[]) => void) => () => void;
    };
  }
}

export {};

然后在你的Angular服务里直接通过window访问这个API就行：

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

@Injectable({ providedIn: 'root' })
export class IpcService implements OnDestroy {
  private cleanupFns: (() => void)[] = [];

  send(channel: string, data: any) {
    window.electronAPI.sendMessage(channel, data);
  }

  listen(channel: string, callback: (...args: any[]) => void) {
    const cleanup = window.electronAPI.listenMessage(channel, callback);
    this.cleanupFns.push(cleanup);
  }

  ngOnDestroy() {
    // 组件销毁时取消所有监听，避免内存泄漏
    this.cleanupFns.forEach(fn => fn());
  }
}

这样操作后，Angular代码里完全没有直接导入Electron模块，构建时自然不会去打包fs、path这些Node.js核心模块，之前的构建报错就消失了。

备选：强行修改Angular构建配置（不推荐，不安全） #

如果你非要在Angular代码里直接导入electron模块，那得修改Webpack/esbuild的配置来屏蔽Node.js模块的打包：

针对标准Webpack构建器 #

1. 安装自定义Webpack构建器：npm install @angular-builders/custom-webpack --save-dev
2. 项目根目录新建custom-webpack.config.js：

module.exports = {
  resolve: {
    fallback: {
      "fs": false,
      "path": false,
      "os": false
      // 把所有报错的Node.js模块都设为false
    }
  },
  node: {
    __dirname: false,
    __filename: false
  }
};

3. 修改angular.json里的构建配置，替换为自定义Webpack构建器：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 保留你原来的其他配置，比如outputPath、index、main等
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server"
  }
}

针对esbuild构建器 #

esbuild本身是为浏览器优化的，强行指定platform: 'node'会和Angular的浏览器构建逻辑冲突，不建议这么做。如果一定要试，可以在angular.json的build.options里加：

"esbuildOptions": {
  "platform": "node"
}

但大概率会出现其他兼容性问题，还是推荐第一种预加载脚本的方式。

为什么你之前的方法会报错？ #

你在package.json里加browser字段屏蔽fs、path后出现__dirname未定义的错误，是因为Electron的模块代码本身就用到了__dirname这个Node.js环境变量，但浏览器环境里根本没有这个变量，所以即使你屏蔽了fs、path，Electron模块的代码还是会在浏览器环境里报错。而预加载脚本的方式是把ipcRenderer的方法通过安全桥暴露给渲染进程，完全不需要在Angular代码里导入Electron模块，自然就不会碰这个问题。

备注：内容来源于stack exchange，提问作者Igino Boffa