Electron, Angular2, "fs"

Question

I am very new to Angular, Javascript, etc.

I am trying to write an Angular2 -Electron (TypeScript) application that should access the file system. Everyone says the "fs" module is required, and everything is fine, but this does not work for me ....

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

I see that my application is trying to download this "fs" module from my application root folder: ..myapp / dist / fs net :: ERR_FILE_NOT_FOUND

All my other external modules reference 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 --> 

And so I think they can be found, but does "fs" belong to node.js, which is present in the electron? Or did I make some big mistakes in my thoughts?

Thank you very much,
Chris

Answer 1

The problem is that I am using SystemJS in my Angular application. SystemJS is trying to load modules from my own application.

Now I will add it like this: index.html, which works:

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

Answer 2

There is a github project that covers even more than just Angular 2 and electron (it also includes native libraries).
I ran into a lot of problems that are similar to yours, in particular the problem of accessing the node.js module from the electron application.
It is probably worth using it as a starting point, rather than trying to write everything from scratch.

As for your problem, you should use System._nodeRequire('fs') instead of require('fs') , since the SystemJS search engine is slightly different from node one.

Answer 3

Let me bring meltedspark's answer to a similar question:

System.js overrides the Node.js require method and uses its own resolution mechanism.

Here is my solution to this problem:

• Create a re-export 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 look 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 into your Angular2 components, as usual:

   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 }); }; } 

Answer 4

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

import {existsSync} from 'fs';