在 Angular 2 和 Webpack 中加载电子模块答案

【问题标题】：Load electron modules in Angular 2 and Webpack在 Angular 2 和 Webpack 中加载电子模块
【发布时间】：2016-12-08 15:40:08
【问题描述】：

我正在使用this starter kit 创建一个电子应用程序。当我尝试将电子模块导入到这样的 Angular 2 组件中时：

const electron = require('electron');

我从初学者工具包中的这个文件中得到这个错误fs.readFileSync is not a function：

var fs = require('fs')
var path = require('path')

module.exports = path.join(__dirname, fs.readFileSync(path.join(__dirname, 'path.txt'), 'utf-8'))

当我不在组件中使用require 时，一切正常。这就像使用require 改变了在其他地方使用的require 的类型，但我真的不知道发生了什么。我尝试过将电子模块导入角度组件的其他方法，但我得到了：

Cannot find module 'electron'.

【问题讨论】：

标签： javascript node.js angular typescript electron

【解决方案1】：

Electron 需要 NodeJS，浏览器无法访问文件系统，只有服务器可以。

但 Electron 使用 node 呈现 index.html 文件，因此使用以下内容将适用于您的 Angular 应用程序。

您应该在 Angular 的 index.html 文件中放置

  <script>
    window.electron = require("electron");
  </script>

在 Angular 应用中使用 Electron 其他部分的示例。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular App</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">


</head>
<body>
  <app-root></app-root>


  <script>
    window.electron = require("electron");
    window.ipcRenderer = require("electron").ipcRenderer;
    window.electronRemote = require("electron").remote;
  </script>


</body>
</html>

【讨论】：