Accessing filesystem in Angular 2 app using Electron

As I understand it, you build the application with Webpack.

You can expose all Node modules via the externals array in your webpack config.

module.exports = {
   "externals": {
      "electron": "require('electron')",
      "child_process": "require('child_process')",
      "fs": "require('fs')",
      "path": "require('path')",
      ...
   }
}

Since they are provided through the Webpack externals, one does not have to require them but use them with imports.

import * as fs from 'fs'

You can read more about this problem in my article.

I am using

Angular CLI: 7.0.7
Node: 8.12.0
OS: win32 x64
Angular: 7.0.4

I tried the ng eject method it didn't work in my case, it is disabled by default and will be removed completely in Angular 8.0

Error message: The 'eject' command has been disabled and will be removed completely in 8.0.

It worked for me by creating a file called native.js in the src folder and insert the following:

`window.fs = require('fs');

Add this file to the angular-cli.json scripts array:

"scripts": [
    "native.js"
]

Add the following lines to polyfills.ts:

`declare global {
    interface Window {
        fs: any;
    }
}`

After that you can access the filesystem with:

`window.fs.writeFileSync('sample.txt', 'my data');`

credits

Solved it by:

1) Eject webpack: ng eject

2) Add target: 'electron-renderer' to the module.exports array inside webpack.config.js

3) Require remote, since we're in the renderer, but fs is only available in the main process (Read more): var remote = require('electron').remote;

4) Require fs (this time using remotes implementation of require): var fs = remote.require('fs');

And now it works!