Angular 5+Electron项目外部库导入异常：浏览器正常Electron报错

我之前开发Angular + Electron应用时也碰到过一模一样的问题——开启nodeIntegration: true后，通过.angular-cli.json的scripts字段导入的全局库（比如toastr、jQuery）在Electron里找不到，浏览器环境却正常。这是因为Electron开启Node集成后，渲染进程的全局作用域和纯浏览器环境有差异，导致脚本加载的库没有正确挂载到Angular能访问的全局对象上。下面给你几个可行的解决办法，按推荐程度排序：

方案一：改用ES6模块导入（推荐） #

这种方式完全避开全局变量的问题，符合Angular的模块化设计，同时兼容浏览器和Electron环境：

1. 安装类型定义文件（让Angular识别库的类型）：

   npm install @types/toastr @types/jquery --save-dev
   

2. 移除.angular-cli.json中对应库的脚本配置：
   删掉scripts数组里的"../node_modules/toastr/build/toastr.min.js"和"../node_modules/jquery/dist/jquery.min.js"这两行。

3. 在代码中直接导入模块：

   • 在需要使用toastr的组件里：

     import * as toastr from 'toastr';
     import 'toastr/build/toastr.min.css'; // 同时导入样式
     
     // 调用示例
     showSuccessToast() {
       toastr.success('操作成功！');
     }
     

   • 对于Bootstrap，因为它依赖jQuery，你可以在polyfills.ts里导入：

     import * as $ from 'jquery';
     window['$'] = $;
     import 'bootstrap/dist/js/bootstrap.bundle.min.js';
     

     或者更推荐使用ng-bootstrap这类专为Angular封装的Bootstrap组件库，彻底摆脱全局依赖。

4. 添加样式到.angular-cli.json（如果需要）：
   在styles数组里加入Bootstrap和toastr的样式：

   "styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
     "../node_modules/toastr/build/toastr.min.css",
     "styles.css"
   ],
   

方案二：手动声明全局变量并挂载到window #

如果你坚持要保留.angular-cli.json的scripts配置，可以通过声明全局变量并显式挂载到window的方式解决：

1. 创建/修改src/typings.d.ts文件，添加全局变量声明：

   declare var toastr: any;
   declare var $: any;
   

2. 在polyfills.ts里显式将库挂载到window：

   // 确保脚本加载后，把变量绑定到window
   import 'toastr/build/toastr.min.js';
   (window as any).toastr = toastr;
   
   import 'jquery/dist/jquery.min.js';
   (window as any).$ = $;
   import 'bootstrap/dist/js/bootstrap.bundle.min.js';
   

   这样Angular就能在Electron环境下正确访问到全局变量了。

方案三：调整Electron的webPreferences配置 #

如果上面两种方式都不适用，你可以尝试调整Electron的窗口配置，确保全局作用域的一致性：

mainWindow = new BrowserWindow({ 
  width: 1280, 
  height: 800, 
  backgroundColor: '#ffffff', 
  webPreferences: { 
    nodeIntegration: true,
    contextIsolation: false, // 关闭上下文隔离，让渲染进程能直接访问Node全局变量
    enableRemoteModule: true // 如果需要远程模块的话可选
  } 
})

不过这个方案会带来一定的安全风险，只适合内部使用的桌面应用，不推荐用于涉及敏感数据的场景。

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