如何在角度 5 内的电子中使用节点“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 没有加载或什么？感谢大家的帮助！

Answer 1

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

首先我需要通过简单地使用来获取 Angular5 webpack.config.js：

ng eject

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

"target": "node-webkit"

简单的“节点”对我来说不起作用，因为电子使用铬，这应该没问题。

谢谢大家！

Answer 2

您还可以使用 remote.require 从 ngx-electron 加载本机节点模块。

fs;

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

Answer 3

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