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

Question

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

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

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

因此，我运行它与 npm run electron 在最后运行s 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

据我了解，您使用 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 2

通过以下方式解决：

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) 需要 fs（这次使用远程实现 require）：var fs = remote.require('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

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

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

import * as fs from 'fs'

使用'fs' :)

Answer 5

我正在使用

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

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

Accessing filesystem in Angular 2 app using Electron

fs

node.js

electron

angular