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!