Electron, Angular2, “fs”

I am very new to the topic of Angular, Javascript etc.

I try to write a (TypeScript) Angular2-Electron application which should access the file-system. Everyone just says to require the “fs” module and all is fine, but that doesn’t work for me… .

If I do something like: var fs = require('fs');

I can see that my app tries to load that “fs” module from my app root folder:
..myapp/dist/fs net::ERR_FILE_NOT_FOUND

All my other external modules are referenced in the 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 -->

Leave a Reply

4 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

The problems seems to be that i use SystemJS in my Angular Application. SystemJS tries to load the modules from my own application.

I now have add this so my index.html which seems to work:

    if (require) {
        window.$ = window.jQuery = require('./app/assets/js/jquery.min.js');
        window.fs = require('fs');
        window.path = require('path');


There is a github project I manage, which covers even more than just Angular 2 and electron (it also involves native libraries).
I encountered a lot of problems that are similar to yours, in particular the issue of accessing node.js modules from electron application.
Probably it’s worth to use it as a starting point, instead of trying to write everything from scratch.

As for your problem, you should use System._nodeRequire('fs') instead of require('fs') as SystemJS lookup mechanism is a bit different than node‘s one.


Let me cite the meltedspark’s answer to a similar question: System.js overrides Node.js‘s require method and uses it’s own resolution mechanism. Here is my solution to this problem: Create re-exports for each Node.js module you want to use: // 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; Let systemjs.config.js know where to search for these re-exports. map: { ... // Re-exports of Node.js modules. fs: 'compiled/node-re-exports/fs.js', electron: 'compiled/node-re-exports/electron.js' } Import these modules in your Angular2 components, as usual: import { Component } from… Read more »


Using "fs" : "@node/fs" in the systemjs map you can solve the problem completely.
Then you can import the native node modules as usual:

import {existsSync} from 'fs';