使用 Electron 在 Angular 2 应用程序中访问文件系统

Question

我知道 Angular 2 在网络浏览器上运行，它无法访问文件系统。

但是，我使用 Electron 作为前端，并且还通过 electron 运行应用程序：

"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

我正在使用

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

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

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

通过在 src 文件夹中创建一个名为 native.js 的文件并插入以下内容，这对我有用：

`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');`

credits

Answer 2

我遇到了同样的问题，可以用更简单的方法解决它：

1. 只需下载这个项目作为开始，'require'-s已经在webpack.config.js文件中（以及angular，electron等的集成）： https://github.com/maximegris/angular-electron

2. 如上面@Matthias Sommer 所述，将“fs”导入 home.ts（或任何其他组件）：

import * as fs from 'fs'

1. 使用“fs”:)

Answer 3

我迟到了，但我最近也偶然发现了这个问题。对于后来者，你可以使用 ngx-fs

https://github.com/Inoverse/ngx-fs

用法：

const fs = this._fsService.fs as any;
fs.readdir("\\", function (err, items) {
   if (err) {
      return;
   }
   for (let i = 0; i < items.length; i++) {
     console.log(items[i]);
   }
});

Answer 4

通过以下方式解决它：

1) 弹出 webpack：ng eject

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

3) 需要远程，因为我们在renderer，但fs 仅在main process (Read more) 中可用：var remote = require('electron').remote;

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

现在它可以工作了！

Answer 5

据我了解，您使用 Webpack 构建应用程序。

您可以通过 webpack 配置中的 externals 数组公开所有 Node 模块。

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

由于它们是通过 Webpack 外部提供的，因此不必要求它们，而是将它们与导入一起使用。

import * as fs from 'fs'

您可以在my article 中阅读有关此问题的更多信息。