web-dev-qa-db-fra.com

Accéder au système de fichiers dans Angular 2 application utilisant Electron

Je sais que Angular 2 est exécuté sur un navigateur Web, qui n'a pas accès au système de fichiers.

Cependant, j'utilise Electron comme front-end, et je lance également l'application via electron:

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

Par conséquent, je l'exécute avec npm run electron qui à la toute fin exécute electron dist.

Étant donné que je traverse electron et non ng, je pense que je devrais pouvoir accéder au système de fichiers. Cependant, quand je le fais:

import * as fs from 'fs'

Je reçois une erreur: 

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

De même, lorsque j'essaie: var fs = require('fs');

Je reçois:

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

C'est l'appel à l'origine de l'erreur:

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

Est-ce que quelqu'un a une idée de ce qui cause ça?

Merci.

node.jsangularelectronfs
5
Kevin

Résolu par:

1) Éjecter le webpack: ng eject

2) Ajoutez target: 'electron-renderer' au tableau module.exports à l'intérieur de webpack.config.js

3) Requiert Remote, car nous sommes dans la renderer, mais fs est uniquement disponible dans le main process ( Pour en savoir plus ): var remote = require('electron').remote;

4) Require fs (cette fois en utilisant l’implémentation à distance de require): var fs = remote.require('fs');

Et maintenant ça marche!

4
Kevin

Si je comprends bien, vous construisez l'application avec Webpack.

Vous pouvez exposer tous les modules Node via le tableau externals dans votre config webpack. 

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

Comme ils sont fournis via les externes Webpack, il n'est pas nécessaire de les demander, mais de les utiliser avec des imports.

import * as fs from 'fs'

Vous pouvez en savoir plus sur ce problème dans mon article .

2
MatthiasSommer

Je suis en retard à la fête, mais je suis aussi tombé sur ce problème récemment. Pour les retardataires, vous pouvez utiliser ngx-fs

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

Usage:

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]);
   }
});
1
jokab

J'ai eu le même problème et pouvais le résoudre plus facilement:

  1. Il suffit de télécharger ce projet au début. Les «require» sont déjà dans le fichier webpack.config.js (ainsi que l’intégration de angular, electron, etc.): https: // github. com/maximegris/angular-electron

  2. importer 'fs' dans home.ts (ou dans tout autre composant) comme mentionné par @Mathias Sommer ci-dessus:

import * as fs from 'fs'

  1. Utilisez 'fs' :)
0
slashpm