使用电子访问角2应用程序中的文件系统

Question

我知道Range2是在web浏览器上运行的，它没有访问文件系统的权限。

然而，我使用电子作为我的前端，并通过电子运行应用程序：

"build-electron": "ng build --base-href . && cp src/electron/* dist",
"electron": "npm run build-electron && electron dist"

因此，我使用npm run electron运行它，它在最后运行electron dist。

由于我正在运行electron，而不是ng，所以我认为我应该能够访问文件系统。然而，当我这样做时：

import * as fs from 'fs'

我收到一个错误：

ng:///AppModule/AppComponent_Host.ngfactory.js:5 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_0_fs__.readFileSync is not a function(…)

类似地，当我尝试：var fs = require('fs');

我得到：

ng:///AppModule/AppComponent_Host.ngfactory.js:5 ERROR TypeError: fs.readFileSync is not a function

这是导致错误的调用：

this.config = ini.parse(fs.readFileSync('../../CONFIG.ini', 'utf-8'))

有人知道是什么原因造成的吗？

谢谢。

Answer 1

解决办法是：

1)弹出webpack：ng eject

2)将target: 'electron-renderer'添加到module.exports数组中的webpack.config.js中

3)要求远程，因为我们在renderer中，但是fs只在main process (阅读更多)：var remote = require('electron').remote;中可用

4)要求fs (这次使用Require的远程实现)：var fs = remote.require('fs');

现在起作用了！

Answer 2

我在用

Angular CLI: 7.0.7
Node: 8.12.0
OS: win32 x64
Angular: 7.0.4

我尝试了ng eject方法--它在我的情况下不起作用，它在默认情况下是禁用的，并且将在角8.0中完全删除

错误消息：The 'eject' command has been disabled and will be removed completely in 8.0.

它通过在native.js文件夹中创建一个名为src的文件并插入以下内容为我工作：

`window.fs = require('fs');

将此文件添加到angular-cli.json脚本数组中：

"scripts": [
    "native.js"
]

将下列行添加到polyfills.ts

`declare global {
    interface Window {
        fs: any;
    }
}`

之后，您可以使用以下方法访问文件系统：

`window.fs.writeFileSync('sample.txt', 'my data');`

学分

Answer 3

据我所知，你和Webpack一起建立了这个应用程序。

您可以通过webpack配置中的外部数组公开所有节点模块。

module.exports = {
   "externals": {
      "electron": "require('electron')",
      "child_process": "require('child_process')",
      "fs": "require('fs')",
      "path": "require('path')",
      ...
   }
}

由于它们是通过Webpack外部提供的，所以人们不必要求它们，而是在进口的情况下使用它们。

import * as fs from 'fs'

您可以在我的文章中阅读有关此问题的更多信息。