如何在 Angular 5 中使用 Electron 的 Node.js 模块 "fs"

Question

我尝试使用Electron和Angular5编写我的第一个桌面应用程序，但不幸的是，在使用fs模块时卡住了。看起来我已经正确导入了fs模块（在Visual Studio Code中没有错误和代码完成），但当我尝试使用“fs.readFile”时，控制台会打印出以下错误：

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_fs__.readFile is not a function

这是目前我服务的代码：

这是我的服务目前的代码：

import { Injectable } from '@angular/core';
import { ElectronService } from 'ngx-electron';
import * as fs from 'fs';
import { OpenDialogOptions } from 'electron';

@Injectable()
export class FileService {

  dialog = this._electronService.remote.dialog;
  window = this._electronService.remote.getCurrentWindow();

  constructor(private _electronService: ElectronService) { }

  loadFileContent(): void{
    this.dialog.showOpenDialog(this.window, {},(fileNames) => {
      if(fileNames === undefined){
        console.error("no files selected!");
        return;
      }

      fs.readFile(fileNames[0], "utf-8", (err, data) => {
        if(err){
          console.error("Cannot read file ",err);
          return;
        }

        console.log("The content of the file is : ");
        console.log(data);
      });

    });
  }
}

我有点不明白，似乎fs没有加载或者出了什么问题？谢谢大家的帮助！

- sonnenpriester

Answer 1

你可以使用remote.require从ngx-electron加载本机的Node模块。

fs;

constructor(private _electronService: ElectronService) { 
    this.fs = this._electronService.remote.require('fs');
}

- Ben Burnett

Answer 2

我在kimy82的评论帮助下找到了答案！

首先，我需要简单地使用以下命令获取Angular5 webpack.config.js：

ng eject

之后我打开了 webpack.config.js 并添加了以下内容：

"target": "node-webkit"

对我来说，“node”并不起作用，而由于Electron使用Chromium，这应该没问题。

谢谢大家！

- sonnenpriester

---

很遗憾，angular6上的解决方案已不再可用：https://github.com/angular/angular-cli/issues/10681 - Marinos An

这不是一个好的建议，除非你知道弹出的后果。 - paddotk

Answer 3

你的浏览器无法访问服务器上的文件系统。浏览器不应加载 fs。

- kimy82

---

有没有其他方法可以在Electron中访问文件系统？它是为桌面应用程序而设计的，而不是用于服务器使用。根据此帖子，可以访问文件系统，但它并不是使用Angular或TypeScript制作的，因此我无法复制它：https://ourcodeworld.com/articles/read/106/how-to-choose-read-save-delete-or-create-a-file-with-electron-framework - sonnenpriester

根据您使用的Angular版本，您可以访问webpack配置。如果您可以更改它，请将目标设置为node。可能会起作用。target: 'node'， - kimy82

我在我的项目上运行了ng eject，以获取webpack配置，但这破坏了一些构建文件。出现错误：Uncaught ReferenceError：exports未定义...用于polyfills.bundle.js，styles.bundle.js，vendor.bundle.js和main.bundle.js...我查找了网上的帮助，但也许你们知道更好的方法？ - sonnenpriester