使用Electron訪問Angular 2應用程序中的文件系統

我知道Angular 2運行在無法訪問文件系統的Web瀏覽器上。使用Electron訪問Angular 2應用程序中的文件系統

不過，我使用電子作爲我的前端，並通過電子運行的應用程序：

"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'))

沒有人有任何的想法是什麼引起的？

謝謝。

來源

2017-08-15 Kevin

通過解決它ng eject

2）添加target: 'electron-renderer'到module.exports陣列內webpack.config.js

3）需要遠程的，因爲我們在renderer，但fs僅適用於main process（Read more）：var remote = require('electron').remote;

4）需要fs（這次使用remotes實現require）：var fs = remote.require('fs');

現在它的工作原理！

來源

2017-08-15 11:44:59 Kevin

據我所知，你用Webpack構建應用程序。

您可以通過您的webpack配置中的externals數組公開所有節點模塊。

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：

來源

2017-08-15 10:27:32 MatthiasSommer

嗨，我不得不'彈出'來訪問'webpack.config.js' - 'module.exports'中沒有'externals'數組。我已經添加了它，以及上面列出的4個外部參數（我當然刪除了'...'）。但是，當我輸入fs或電子到控制檯時，我會得到'fs' | '電子'是未定義的。有什麼想法？ – 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]); 
    } 
});

來源

2018-01-15 09:37:34 jokab

我有同樣的問題，可以在一個更簡單的方法解決這個問題：

只需下載該項目作爲開始，「require」-s已經在webpack.config.js文件中（以及角度，電子等的集成）： https://github.com/maximegris/angular-electron
進口 'FS' 到home.ts（或成任何其他成分）如上所述由@Matthias Sommer的：

import * as fs from 'fs'

使用'fs':)

來源

2018-02-08 15:11:17 slashpm

使用Electron訪問Angular 2應用程序中的文件系統

回答

相關問題