web-dev-qa-db-ja.com

Electronを使用してAngular 2アプリでファイルシステムにアクセスする

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_で実行し、最後に_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'))

誰かがこれを引き起こしているものを知っていますか？

ありがとう。

node.jsangularelectronfs
8
Kevin

解決方法：

1）webpackを取り出します：_ng eject_

2）_target: 'electron-renderer'_を_module.exports_内の_webpack.config.js_配列に追加します

3）rendererにいるので、リモートが必要ですが、fsは_main process_（ 続きを読む ）でのみ使用できます：var remote = require('electron').remote;

4）Require fs（今回はrequireのリモート実装を使用）：var fs = remote.require('fs');

そして今、それは機能します！

8
Kevin

私はパーティーに遅れていますが、最近この問題にも遭遇しました。後発者には、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]);
   }
});
2
jokab

私が理解しているように、あなたは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'

この問題の詳細については、 私の記事 を参照してください。

2
MatthiasSommer

使ってます

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');`

クレジット

2
Visar Hyseni

私は同じ問題を抱えていて、より簡単な方法でそれを解決することができました：

  1. このプロジェクトを開始時にダウンロードするだけで、「require」-sはすでにwebpack.config.jsファイルにあります（angular、electronなどの統合とともに）： https://github.com/maximegris/angular-electron

  2. 上記の@MatthiasSommerで説明されているように、「fs」をhome.ts（またはその他のコンポーネント）にインポートします。

import * as fs from 'fs'

  1. 'fs'を使用します:)
0
slashpm