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

Question

Angular 2は、ファイルシステムにアクセスできないWebブラウザで実行されることがわかりました。

しかし、私は私のフロントエンドとして電子を使用していますし、また電子を経由してアプリを実行している：

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

。したがって、私は一番最後にelectron distを実行しますnpm run electronでそれを実行します。

私は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

は、ことによってそれを解決ng eject

2）私たちはrendererにしているので、

3）は、リモート要求webpack.config.js内module.exports配列にtarget: 'electron-renderer'を追加しますが、 fsは、main process（Read more）でのみ利用できます。var remote = require('electron').remote;

4） fsを必要とする（今回はrequireのリモート実装を使用しています）：var fs = remote.require('fs');

そして今は動作します！

Answer 2

私が理解しているように、あなたはWebpackでアプリケーションを構築します。

すべてのノードモジュールは、webpack configの外部アレイ経由で公開できます。

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で、この問題についての詳細を読むことができます。

1）イジェクトのWebPACK：

Answer 3

私はパーティーに遅れていますが、私は最近この問題に遭遇しました。私は同じ問題を抱えていたし、簡単な方法でそれを解決することができ

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

：

1. 後半隅に、あなたは、NGX-FS

   https://github.com/Inoverse/ngx-fs

   使用法を使用することができますこのプロジェクトを最初にダウンロードしてください。 'require'はwebpack.config.jsファイルに既にあります（角度、電子などの統合とともに）： 上方@Matthiasソマーによって述べたよう

2. インポートhome.tsに 'FS'（または任意の他の成分へ）：

import * as fs from 'fs'

'fs'を使用してください：