2016-04-16 70 views
6

我很新的角度,使用Javascript等電子,Angular2,「FS」

我嘗試寫一(打字稿)應訪問文件系統Angular2,電子申請的話題。每個人都只是說要求「fs」模塊,一切都很好,但這對我不起作用......。

如果我做這樣的事情:var fs = require('fs');

我可以看到我的應用程序試圖從我的應用程序的根文件夾加載「FS」模塊: ..myapp /距離/ FS網:: ERR_FILE_NOT_FOUND

我所有的其他外部模塊中的index.html文件引用:

<!-- build:js app/scripts/combined.js --> 
 
    <script src="../node_modules/jquery/dist/jquery.js"></script> 
 
    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script> 
 
    <script src="../node_modules/systemjs/dist/system.js"></script> 
 
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> 
 
    <script src="../node_modules/angular2/bundles/http.js"></script> 
 
    <script src="../node_modules/angular2/bundles/router.js"></script> 
 
    <script src="../node_modules/rxjs/bundles/Rx.js"></script> 
 
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script> 
 
    <script src="../node_modules/pdfjs-dist/build/pdf.combined.js"></script> 
 
    <script src="boot.js" type="text/javascript"></script> 
 
    <!-- endbuild -->

因此我認爲它們可以被發現,但是「fs」屬於存在於電子中的node.js?或者我在思考中犯了些大錯誤?

非常感謝,
克里斯

+0

當你說它不起作用會發生什麼?當您嘗試在瀏覽器中訪問本地主機時(假設您正在爲本地主機服務)究竟發生了什麼? –

+0

如果我使用服務器(並不使用任何包含「fs」)的應用程序工作正常,但我編譯與電子我的角應用程序創建一個桌面應用程序。我認爲在電子應用程序中,節點模塊已經「存在」,但似乎不起作用。如上所述,應用程序嘗試從我的應用程序文件夾中加載「fs」模塊。我是否需要在我的電子應用程序中安裝任何附加依賴以使用節點模塊? –

+0

Hhhhhmmmm,我發現了一個可能與問題有關的問題。做的答案http://stackoverflow.com/questions/30664111/how-to-use-node-modules-within-electron-formerly-atom-shell幫助你呢? –

回答

4

的問題似乎是,我在角應用使用SystemJS。 SystemJS嘗試從我自己的應用程序加載模塊。

我現在已經添加此所以我的index.html這似乎工作:

<script> 
    if (require) { 
     window.$ = window.jQuery = require('./app/assets/js/jquery.min.js'); 
     window.fs = require('fs'); 
     window.path = require('path'); 
    } 
</script> 
+1

這是可行的,儘管將任何模塊添加到窗口以便能夠使用它都感覺很奇怪。感覺就像是必須有另一種解決方案... – mvermand

+0

@mvermand有同樣的感覺,並提出了恕我直言,更好的方法。看到我的答案。 – Monsignor

2

讓我舉meltedspark's answer一個類似的問題:

System.js覆蓋Node.jsrequire方法使用它自己的解析機制。

這是我解決這個問題:

  1. 創建轉口每個Node.js模塊要使用:

    // scripts/node-re-exports/fs.ts 
    declare const System: any; 
    const fs = System._nodeRequire('fs'); 
    export = fs; 
    
    // scripts/node-re-exports/electron.ts 
    declare const System: any; 
    const electron = System._nodeRequire('electron'); 
    export = electron; 
    
  2. systemjs.config.js知道去哪裏尋找這些再出口。

    map: { 
        ... 
    
        // Re-exports of Node.js modules. 
        fs: 'compiled/node-re-exports/fs.js', 
        electron: 'compiled/node-re-exports/electron.js' 
    } 
    
  3. 導入這些模塊在Angular2成分,像往常一樣:

    import { Component } from '@angular/core'; 
    import { clipboard } from 'electron'; 
    import { existsSync } from 'fs'; 
    
    @Component({ 
        selector: 'my-app', 
        template: `<h1>Hello {{name}}</h1>`, 
    }) 
    export class AppComponent { 
        name = 'Angular'; 
    
        constructor() { 
         const text = existsSync("c:\\boot.txt") ? "exists" : "does not exist"; 
         clipboard.write({ text: text }); 
        }; 
    } 
    
1

使用 「FS」:在systemjs 「@節點/ FS」 地圖就可以完全解決的問題。 然後,您可以照常導入本地節點模塊:

從'fs'導入{existsSync};

3

有一個githubproject我管理,其中涵蓋甚至不僅僅是Angular 2electron(它還涉及本地庫)。
我遇到了很多類似於你的問題,特別是從electron應用程序訪問node.js模塊的問題。
也許有必要將它作爲一個起點,而不是試圖從頭開始寫所有東西。

至於你的問題,你應該使用System._nodeRequire('fs')而不是require('fs')作爲SystemJS查找機制是有點不同於node的一個。