Question

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

然而，我正在使用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

通过以下方式解决：

1）弹出webpack：ng eject

2）将target: 'electron-renderer'添加到module.exports

中的webpack.config.js数组

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

4）需要fs（这次使用需要的遥控器实现）：var fs = remote.require('fs');

现在它有效！

Answer 2

据我了解，您使用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中了解有关此问题的更多信息。

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

我正在使用

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.

它为我工作，方法是在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');`

credits

Answer 5

我遇到了同样的问题，可以通过更简单的方式解决问题：

只需下载此项目作为开始，'require'-s已经在webpack.config.js文件中（以及角度，电子等的集成）： https://github.com/maximegris/angular-electron
将'fs'导入home.ts（或任何其他组件），如@Matthias Sommer所述：

std::numeric_limits

使用'fs'：）

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

5 个答案: