Accediendo al sistema de archivos en la aplicación Angular 2 usando Electron

Sé que Angular 2 se ejecuta en un navegador web, que no tiene acceso al sistema de archivos.

Sin embargo, estoy usando Electron como mi interfaz y también ejecutando la aplicación a través de electron:

"build-electron": "ng build --base-href . && cp src/electron/* dist", "electron": "npm run build-electron && electron dist" 

Por lo tanto, lo ejecuto con npm run electron que al final ejecuta electron dist .

Ya que estoy pasando por electron y no por ng , creo que debería poder acceder al sistema de archivos. Sin embargo, cuando lo hago:

import * as fs from 'fs'

Me sale un error:

ng:///AppModule/AppComponent_Host.ngfactory.js:5 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_0_fs__.readFileSync is not a function(…)

De manera similar, cuando bash: var fs = require('fs');

Yo obtengo:

ng:///AppModule/AppComponent_Host.ngfactory.js:5 ERROR TypeError: fs.readFileSync is not a function

Esta es la llamada que resulta en el error:

this.config = ini.parse(fs.readFileSync('../../CONFIG.ini', 'utf-8'))

¿Alguien tiene alguna idea de lo que está causando esto?

Gracias.

Resuelto por:

1) Expulsar paquete web: ng eject

2) Agregar target: 'electron-renderer' a la matriz webpack.config.js dentro de webpack.config.js

3) Requiere control remoto, ya que estamos en el renderer , pero fs solo está disponible en el main process ( Leer más ): var remote = require('electron').remote;

4) Requerir fs (esta vez usando la implementación var fs = remote.require('fs'); de require): var fs = remote.require('fs');

¡Y ahora funciona!

Como yo lo entiendo, construyes la aplicación con Webpack.

Puede exponer todos los módulos de Node a través de la matriz externa en la configuración de su paquete web.

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

Dado que se proporcionan a través de los paquetes externos de Webpack, uno no tiene que exigirlos sino usarlos con las importaciones.

 import * as fs from 'fs' 

Puedes leer más sobre este problema en mi artículo .

Llegué tarde a la fiesta, pero también me topé con este problema recientemente. Para los que llegan tarde, puedes usar ngx-fs

https://github.com/Inoverse/ngx-fs

Uso:

 const fs = this._fsService.fs as any; fs.readdir("\\", function (err, items) { if (err) { return; } for (let i = 0; i < items.length; i++) { console.log(items[i]); } }); 

Tuve el mismo problema y pude resolverlo de una manera más fácil:

  1. Simplemente descargue este proyecto como inicio, los ‘require’-s ya están en el archivo webpack.config.js (junto con la integración de angular, electron, etc.): https://github.com/maximegris/angular-electron

  2. importe ‘fs’ en home.ts (o en cualquier otro componente) como lo mencionó @Matthias Sommer arriba:

import * as fs from 'fs'

  1. Utilice ‘fs’ 🙂