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'))
誰かがこれを引き起こしているものを知っていますか?
ありがとう。
解決方法:
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');
そして今、それは機能します!
私はパーティーに遅れていますが、最近この問題にも遭遇しました。後発者には、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]);
}
});
私が理解しているように、あなたは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'
この問題の詳細については、 私の記事 を参照してください。
使ってます
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');`
私は同じ問題を抱えていて、より簡単な方法でそれを解決することができました:
このプロジェクトを開始時にダウンロードするだけで、「require」-sはすでにwebpack.config.jsファイルにあります(angular、electronなどの統合とともに): https://github.com/maximegris/angular-electron
上記の@MatthiasSommerで説明されているように、「fs」をhome.ts(またはその他のコンポーネント)にインポートします。
import * as fs from 'fs'