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

Posted 2023-03-07

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

【英文标题】：Accessing filesystem in Angular 2 app using Electron

【发布时间】：2018-01-23 04:03:45

【问题描述】：

我知道 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'))

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

谢谢。

【参考方案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

【参考方案2】：

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

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

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

import * as fs from 'fs'

使用“fs”:)

【参考方案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]);
   
);

【参考方案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');

现在它可以工作了！

【讨论】：

如果您使用的是ngx-electron package，您可以跳过步骤 1-3，只需通过 ElectronService.Remote.require() 函数要求它

ng eject 似乎已被删除。

【参考方案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 中阅读有关此问题的更多信息。

【讨论】：

嗨，我必须 ng eject 才能访问 webpack.config.js - module.exports 中没有 externals 数组。我已经添加了它，以及上面列出的 4 个外部组件（我当然删除了 ...）。但是，当我在控制台中输入 fs 或 electron 时，我得到 fs | electronis undefined。有什么想法吗？