web-dev-qa-db-fra.com

Mise à jour vers Angular v6 - Module introuvable: Erreur: Impossible de résoudre le problème "fs"

J'essaie de migrer mon projet Angular Universal de Angular v5 à v6

J'ai un service où j'utilise fs pour charger la traduction côté serveur. Tout fonctionne bien avec Angular v5.

Avec Angular v6, quand je lance npm run start aka ng serve --proxy-config proxy.conf.json je fais face à l'erreur suivante

Erreur dans ./src/providers/core/translate/translate-universal-loader.service.ts Module introuvable: Erreur: Impossible de résoudre le problème "fs" dans '/ Users/me/Documents/projects/myproject/src/providers/core/translate'

Je déclare fs à mon service comme suit:

declare var require: any;
const fs = require('fs');

J'ai aussi essayé de le déclarer comme suit, mais je n'ai pas aidé

import * as fs from 'fs';

Pour indiquer à Webpack d’ignorer les fs, j’ai essayé d’ajouter ce qui suit dans mon webpack.server.config.js sans succès

node: {
    fs: 'empty'
}

également essayé avec un plugin webpack, n'a pas réussi non plus

new webpack.IgnorePlugin(/fs/)

mais en réalité ce n'est peut-être pas l'utilisation de la configuration par ng serve mais je ne sais pas si je pourrais toujours éjecter la configuration avec v6

quelqu'un a une idée?

METTRE À JOUR

Si je déclare fs comme étant any, le problème pour ng serve est résolu, mais malheureusement, cela ne fonctionnera pas côté serveur après npm run build:ssr et exécutera npm run serve. Du côté du serveur je vais alors faire face à l'erreur suivante

ERREUR ReferenceError: fs n'est pas défini

p.s .: mon projet suit https://github.com/angular/universal-starter structure, configuration et dépendances

angularwebpackangular-universalangular6
5
David Dal Busco

Ok après les heures, je parviens à la conclusion avec les réponses que j’ai recueillies que la vraie réponse est: 

Vous ne pouvez plus utiliser fs dans Angular v6

De plus, comme il n’est plus possible d’éjecter la configuration de WebPack, il n’existe aucun moyen d’indiquer à WebPack d’ignorer la fs requise.

Il existe un numéro en suspens à ce sujet: https://github.com/angular/angular-cli/issues/10681

P.S .: J'utilisais fs pour charger les traductions côté serveur, j'ai surmonté le problème en suivant la solution de @xuhcc, voir https://github.com/ngx-translate/core/issues/754

9
David Dal Busco

Pour ceux qui cherchent encore une réponse, voici comment j'ai réussi à exiger ('fs') dans mon application angular 7. Ou d'ailleurs, tout autre module de noeud.

Les versions

Angular CLI: 7.0.4
Node: 10.13.0
OS: win32 x64
"@angular/animations": "~7.0.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.4",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"electron": "^3.0.7",
"TypeScript": "~3.1.1"

1. Installez @ types/node

npm install --save-dev @types/node

2. Modifier tsconfig.json

Prenez note de l'indicateur "allowSyntheticDefaultImports". Il doit être défini sur true.

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "types": [
      "node"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "strict": false
  }
}

3. Requis fs

import { Component } from '@angular/core';
import { } from 'electron';
import Fs from 'fs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  constructor() {
    //check if platform is electron
    let isElectron: boolean = window && window['process'] && window['process'].type;

    if (isElectron) {
      let fs: typeof Fs = window['require']('fs');
      let app: Electron.App = window['require']('electron').remote;
      console.log(fs, app, window['process']);
    }
  }
}

Note: les instructions d'importation en haut du fichier servent uniquement à fournir des informations de type. Les valeurs de variable sont définies à l'aide du noeud require.

Pour les mises à jour, suivez le problème ici

https://github.com/angular/angular-cli/issues/9827

Modifier:

Il s'avère que si votre projet a des dépendances, require'fs', 'path', 'child_process' etc. Pour contourner ce problème, comme quelqu'un l'a déjà suggéré, ajoutez (window as any).global = window; à votre fichier polyfills.ts.

Dans mon cas, j'avais chokidar , node-pty et electron en tant que dépendance. Cet ouvrier pour moi.

3
Nishkal Kashyap

La réponse acceptée est correcte. vous ne pouvez plus utiliser fs dans Angular v6 +.

Toutefois, ce constructeur alternatif (une extension de la CLI angulaire) vous permet de cibler un environnement Electron et d’avoir un accès complet aux fonctionnalités d’Electron:

https://github.com/angular-guru/electron-builder

1
adamup

Vous pouvez aussi déclarer la fs en faisant ceci declare var fs: any;

1
John Velasquez

Apparemment advanced-json-path résout ce problème dans Angular 6 et versions ultérieures si quelqu'un utilise fs 

Alors on doit faire un

npm i advanced-json-path --save-dev

comme il s'agit d'une dépendance de dev (du moins dans mon cas) Pour cette instance de message, il s'agit de la version 1.0.8 Le module 'fs' introuvable n'a pas lieu.

package.json
{
    ....
   "advanced-json-path": "^1.0.8",
}

Dans notre application, l'erreur du module 'fs' non trouvé a été supprimée.

0
user428602

Alternativement Dans NativeScript, le fichier est implémenté dans le module de système de fichiers . Pour l'utiliser, vous devez l'importer dans votre code derrière le fichier .

import * as fs from "file-system';

var documents = fs.knownFolders.documents();
var path = fs.path.join(documents.path, "FileFromPath.txt");
var file = fs.File.fromPath(path);

// Writing text to the file.
file.writeText("Something")
    .then(function () {
        // Succeeded writing to the file.
    }, function (error) {
        // Failed to write to the file.
    });
0
Subrata Fouzdar