Angular 5导入Electron遇fs.existsSync及require未定义报错求助

你遇到的这两个错误其实都是Electron渲染进程与Angular浏览器环境的兼容性问题导致的：

错误原因分析 #

• fs.existsSync is not a function：Angular默认是构建为浏览器环境的，而fs是Node.js的核心模块，浏览器环境中不存在，直接在Angular代码里import Electron的主进程模块（比如BrowserWindow）会触发这个错误。
• require is not defined：Electron新版本默认开启了contextIsolation（上下文隔离），这个特性会阻止渲染进程直接访问Node.js的require方法，所以在index.html里直接用require会报错。

下面给你两种解决方案，按需选择：

方案一：快速启用Node.js集成（适合开发阶段） #

这种方法直接开启渲染进程的Node.js集成，让Angular代码可以直接调用Electron API：

1. 修改Electron主进程配置（main.js）
   在创建BrowserWindow时，配置webPreferences开启nodeIntegration并关闭contextIsolation：

   const { BrowserWindow, app } = require('electron');
   
   function createWindow() {
     const mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
         contextIsolation: false,
         enableRemoteModule: true // 允许渲染进程通过remote调用主进程模块
       }
     });
     mainWindow.loadURL('http://localhost:4200'); // 加载Angular开发服务地址
   }
   
   app.whenReady().then(() => {
     createWindow();
   });
   

2. 在Angular组件中正确引入Electron
   先安装Electron的TypeScript类型定义：

   npm install --save-dev @types/electron
   

   然后在组件中通过remote模块调用BrowserWindow（因为BrowserWindow是主进程专属模块，渲染进程需要通过remote访问）：

   import { Component } from '@angular/core';
   
   // 声明require避免TypeScript报错
   declare const require: any;
   const { BrowserWindow } = require('electron').remote;
   
   @Component({
     selector: 'app-invoice',
     templateUrl: './invoice.component.html'
   })
   export class InvoiceComponent {
     printInvoice() {
       const printWindow = new BrowserWindow({ width: 600, height: 800 });
       printWindow.loadURL('http://localhost:4200/invoice'); // 加载你的发票页面
       printWindow.webContents.on('did-finish-load', () => {
         printWindow.webContents.print();
       });
     }
   }
   

方案二：使用Preload脚本（安全最佳实践） #

这种方法遵循Electron的安全建议，保持contextIsolation开启，通过preload脚本暴露必要的API给Angular：

1. 创建Preload脚本（preload.js）
   在项目根目录创建preload.js，通过contextBridge暴露打印相关的API：

   const { contextBridge, ipcRenderer } = require('electron');
   
   contextBridge.exposeInMainWorld('electronAPI', {
     triggerInvoicePrint: () => ipcRenderer.send('print-invoice')
   });
   

2. 修改Electron主进程配置
   在main.js中配置preload脚本，并监听渲染进程的打印请求：

   const { BrowserWindow, ipcMain, 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');
   }
   
   // 监听打印请求，创建打印窗口并执行打印
   ipcMain.on('print-invoice', () => {
     const printWindow = new BrowserWindow({ width: 600, height: 800 });
     printWindow.loadURL('http://localhost:4200/invoice');
     printWindow.webContents.on('did-finish-load', () => {
       printWindow.webContents.print();
       printWindow.close(); // 打印完成后关闭窗口
     });
   });
   
   app.whenReady().then(createWindow);
   

3. 在Angular组件中调用暴露的API
   在组件中通过window对象访问暴露的electronAPI：

   import { Component } from '@angular/core';
   
   // 扩展Window类型，避免TypeScript报错
   declare global {
     interface Window {
       electronAPI: {
         triggerInvoicePrint: () => void;
       };
     }
   }
   
   @Component({
     selector: 'app-invoice',
     templateUrl: './invoice.component.html'
   })
   export class InvoiceComponent {
     printInvoice() {
       window.electronAPI.triggerInvoicePrint();
     }
   }
   

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