Angular+Electron项目中直接使用ipcRenderer编译报错求助

开发基于Angular与Electron的应用，核心逻辑为用户输入姓名和活动名称后，通过Playwright模拟浏览器爬取对应活动的姓名数据。目前直接在Angular组件中引入ipcRenderer导致编译时出现fs/path模块无法解析的错误，此前将IPC调用放在独立renderer.js中可正常编译，但不清楚如何在Angular组件中调用该文件。

编译错误信息 #

[ERROR] Could not resolve "fs"

    node_modules/electron/index.js:1:19:
      1 │ const fs = require('fs');
        ╵                    ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


X [ERROR] Could not resolve "path"

    node_modules/electron/index.js:2:21:
      2 │ const path = require('path');
        ╵                      ~~~~~~

  The package "path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

解决方案 #

1. 正确配置preload.js，封装IPC通信接口 #

通过preload脚本向渲染进程暴露安全的IPC接口，而非直接挂载ipcRenderer到window（建议开启Electron默认推荐的contextIsolation: true，提升安全性）：

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 暴露安全的IPC方法到渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
  checkName: (name, event) => ipcRenderer.send('checkName', { name, event })
});

// 版本信息替换逻辑保留
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
})

2. 修改Angular组件，使用全局暴露的API #

移除组件中对ipcRenderer的直接导入，使用preload暴露的electronAPI，同时修正组件中变量与模板绑定不匹配的问题：

// name.component.ts
import { Component } from '@angular/core';

// 声明全局electronAPI类型，避免TypeScript报错
declare global {
  interface Window {
    electronAPI: {
      checkName: (name: string, event: string) => void;
    };
  }
}

@Component({
  selector: 'app-name',
  templateUrl: './name.component.html',
  styleUrl: './name.component.css'
})
export class NameComponent { // 类名遵循大驼峰规范
  firstName: string = ''; // 修正变量名，匹配模板中的[(ngModel)]="firstName"
  event: string = '';

  submitForm() {
    console.log('Name:', this.firstName);
    console.log('Event:', this.event);

    // 使用全局暴露的electronAPI发送IPC消息
    window.electronAPI.checkName(this.firstName, this.event);
  }
}

3. 修正Main.js中的IPC监听事件名 #

组件发送的是checkName事件，但原Main.js中监听的是checkNames，名称不匹配，修改如下：

// main.js
// ... 其他代码保持不变
// Listen for the 'checkName' event from the renderer process
ipcMain.on('checkName', async (event, data) => {
    console.log('Name:', data.name); // 注意属性名是小写name，与组件传参一致
    console.log('Event:', data.event);
    try {
        // 确保getNameData函数已正确实现
        const result = await getNameData(data.name, data.event, true, true);
        console.log(result);
    } catch (error) {
        console.error('Error fetching Name data:', error);
    }
});

4. 可选：调整Angular打包配置 #

若仍存在模块解析问题，在Angular的自定义Webpack配置文件中添加外部化配置：

module.exports = {
  externals: {
    'electron': 'commonjs electron',
    'fs': 'commonjs fs',
    'path': 'commonjs path'
  }
};

注：通过preload方式避免直接引入electron模块后，该错误通常会自动消失，此步骤为兜底方案。

额外注意事项 #

• 组件类名需遵循大驼峰命名规范，避免Angular编译潜在问题。
• 确保Main.js中的getNameData函数已正确实现，否则会出现未定义错误。
• 保持contextIsolation: true是Electron的安全最佳实践，不要随意关闭。

内容的提问来源于stack exchange，提问作者noob-on-rails