it-swarm.com.de

Update auf Angular v6 - Modul nicht gefunden: Fehler: 'fs' kann nicht aufgelöst werden

Ich versuche, mein Angular Universal-Projekt von Angular V5 auf V6 zu migrieren

Ich habe einen Dienst, bei dem ich fs verwende, um die Übersetzung auf der Serverseite zu laden. Alles funktioniert gut mit Angular v5.

Wenn ich mit Angular v6 npm run start aka ng serve --proxy-config proxy.conf.json starte, tritt der folgende Fehler auf

Fehler in ./src/providers/core/translate/translate-universal-loader.service.ts Modul nicht gefunden: Fehler: 'fs' kann nicht in .__ aufgelöst werden. '/ Benutzer/ich/Dokumente/Projekte/meinprojekt/src/provider/core/translate'

In meinem Dienst erkläre ich fs wie folgt:

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

Ich habe auch versucht, es wie folgt zu erklären, half aber nicht

import * as fs from 'fs';

Um webpack anzuweisen, fs zu ignorieren, habe ich versucht, Folgendes in meinem webpack.server.config.js ohne Erfolg hinzuzufügen

node: {
    fs: 'empty'
}

auch mit einem Webpack-Plugin ausprobiert, war auch nicht erfolgreich

new webpack.IgnorePlugin(/fs/)

aber eigentlich ist es vielleicht nicht die config von ng serve, aber ich weiß nicht, ob ich die Konfiguration mit v6 noch auswerfen könnte?

hat jemand eine Idee?

UPDATE

Wenn ich fs als any deklariere, wird das Problem für ng serve gelöst, jedoch funktioniert es auf der Serverseite nach npm run build:ssr nicht und führt npm run serve aus. Auf der Serverseite werde ich dann mit dem folgenden Fehler konfrontiert

ERROR ReferenceError: fs ist nicht definiert

p .: mein Projekt folgt https://github.com/angular/universal-starter - struktur, config und Abhängigkeiten

5
David Dal Busco

Ok, nach Stunden komme ich zu dem Schluss mit den Antworten, die ich gesammelt habe, dass die wirkliche Antwort lautet: 

Sie können fs in Angular v6 nicht mehr verwenden

Da es außerdem nicht mehr möglich ist, die Webpack-Konfiguration auszuwerfen, gibt es keine Möglichkeit, dem Webpack mitzuteilen, dass es die fs-Anforderungen ignoriert

Es gibt eine offene Frage zu diesem Thema: https://github.com/angular/angular-cli/issues/10681

P.S .: Ich habe fs verwendet, um die Übersetzungen auf der Serverseite zu laden. Ich überwinden das Problem, indem ich die Lösung von @xuhcc befolge, siehe https://github.com/ngx-translate/core/issues/754

9
David Dal Busco

Für jeden, der immer noch nach einer Antwort sucht, ist Folgendes in meiner Winkel-7-App ("fs") erforderlich. Oder für jedes andere Knotenmodul.

Versionen

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. Installieren Sie @ types/node

npm install --save-dev @types/node

2. Ändern Sie tsconfig.json

Beachten Sie das Flag "allowSyntheticDefaultImports". Es muss auf true gesetzt sein.

{
  "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. Erfordert 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: Die Importanweisungen oben in der Datei dienen nur zur Typinformation. Die Variablenwerte werden über den Knoten require festgelegt.

Aktualisierungen finden Sie hier

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

Bearbeiten:

Stellt sich heraus, dass, wenn Ihr Projekt Abhängigkeiten hat, require'fs', 'path', 'child_process' usw. Der Winkelcompiler den Code nicht kompilieren kann. Um dies zu umgehen, fügen Sie, wie bereits jemand vorgeschlagen hat, (window as any).global = window; zu Ihrer polyfills.ts hinzu.

In meinem Fall hatte ich chokidar , node-pty und electron als Abhängigkeit. Dieser Arbeiter für mich.

3
Nishkal Kashyap

Ich habe das durch Hinzufügen behoben

"types": [
  "node"
]

in tsconfig.app.json

1
Ebram

Die akzeptierte Antwort ist korrekt. Sie können fs in Angular v6 + nicht mehr verwenden.

Mit diesem alternativen Builder (eine Erweiterung der Angular-CLI) können Sie jedoch auf eine Electron-Umgebung zugreifen und vollen Zugriff auf die Electron-Funktionen haben:

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

1
adamup

Sie können die fs auch mit diesem declare var fs: any; deklarieren.

1
John Velasquez

Offensichtlich löst advanced-json-path dieses Problem in Angular 6 oder höher, wenn jemand fs verwendet 

Also muss man eine machen

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

da es sich um eine dev-Abhängigkeit handelt (zumindest in meinem Fall) Ab dieser Nachrichteninstanz ist es Version 1.0.8 Dann tritt das Modul 'fs' nicht gefunden auf.

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

In unserer Anwendung wurde der Modul 'fs' nicht gefunden 'gefunden.

0
user428602

In Angular 8 können Sie jetzt Angular Builders verwenden, um einen web.config.js Anzugeben, der die von Angular erstellte virtuelle Konfiguration erweitert.

Dieser Blogpost erklärt es recht gut.

tldr:

  1. führe npm i -D @angular-builders/custom-webpack aus
  2. bearbeiten Sie Ihre angular.json - Datei architect.serve und architect.build, um sie anzuweisen, das Modul custom-webpack zu verwenden, um die virtuelle Konfiguration mit Ihrer webpack.config.js - Datei zu erweitern
  3. Erstellen Sie Ihre eigene webpack.config.js - in diesem Fall würde es so aussehen:
module.exports = {
    node: {
        fs: 'empty'
      }
};
0
bighairdave

Alternativ In NativeScript File ist als Teil des Dateisystemmoduls ..__ implementiert. Um es zu verwenden, müssen Sie es in den Code hinter der Datei ..__ importieren.

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