web-dev-qa-db-ja.com

Angular v6への更新-モジュールが見つかりません：エラー： 'fs'を解決できません

Angular UniversalプロジェクトをAngular v5からv6に移行しようとしています

fsを使用してサーバー側で翻訳をロードするサービスがあります。すべてがAngular v5でうまく機能します。

Angular v6では、npm run start aka ng serve --proxy-config proxy.conf.jsonを実行すると、次のエラーが発生します

./src/providers/core/translate/translate-universal-loader.service.tsのエラー：モジュールが見つかりません：エラー： '/ Users/me/Documents/projects/myproject/src/providersの' fs 'を解決できません/ core/translate '

私のサービスでは、次のようにfsを宣言しています。

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

また、次のように宣言しようとしましたが、助けにはなりませんでした

import * as fs from 'fs';

Fsを無視するようにwebpackに指示するために、成功せずにwebpack.server.config.jsに以下を追加しようとしました

node: {
    fs: 'empty'
}

また、webpackプラグインで試しましたが、どちらも成功しませんでした

new webpack.IgnorePlugin(/fs/)

しかし、実際にはng serveが使用する設定ではないかもしれませんが、v6でまだ設定をイジェクトでき​​るかどうかわかりませんか？

誰もがアイデアを持っていますか？

UPDATE

Fsをanyとして宣言すると、ng serveの問題は解決しますが、残念ながらnpm run build:ssrの後にサーバー側では機能せず、npm run serveを実行します。サーバー側では、次のエラーに直面します

エラーReferenceError：fsが定義されていません

p.s .:私のプロジェクトは https://github.com/angular/universal-starter 構造、構成、依存関係に従います

angularwebpackangular-universalangular6
12
David Dal Busco

数時間後、私は、本当の答えは次のとおりであるという答えを集めて結論に達しました。

Angular v6ではfsを使用できなくなりました

さらに、webpack構成をイジェクトすることはもうできないため、fsが必要とするものを無視するようwebpackに指示する方法はありません。

この件に関して未解決の問題があります： https://github.com/angular/angular-cli/issues/10681

PS：私はfsを使用してサーバー側で翻訳をロードしていました。@ xuhccの解決策に従って問題を解決しました。 https://github.com/ngx-translate/core/issues/754 を参照してください=

2019年更新

コメントを参照してください、@ Tahlilによると、それは現在可能です。私は試しませんでした。

14
David Dal Busco

まだ答えを探している人のために、私のangular 7アプリでrequire（ 'fs'）をどうやって管理するかを以下に示します。またはそのことについては、他のノードモジュール。

バージョン

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. @ types/nodeをインストールします

npm install --save-dev @types/node

2. tsconfig.jsonを変更します

「allowSyntheticDefaultImports」フラグに注意してください。 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. 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']);
    }
  }
}

注：ファイルの先頭にあるインポート文は、タイプ情報を提供するためのものです。変数値は、ノードrequireを使用して設定されます。

アップデートについては、ここで問題を追跡してください

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

編集：

プロジェクトにrequire'fs', 'path', 'child_process'などの依存関係がある場合、angularコンパイラーはコードのコンパイルに失敗します。これを回避するには、誰かがすでに提案しているように、(window as any).global = window;をpolyfills.tsに追加します。

私の場合、依存関係として chokidar 、 node-pty 、および electron がありました。私にとってこの労働者。

7
Nishkal Kashyap

追加してこれを修正しました

"types": [
  "node"
]

tsconfig.app.json内

1
Ebram

受け入れられた答えは正しいです。 Angular v6 +ではfsを使用できなくなりました。

ただし、この代替ビルダー（Angular CLIの拡張機能）を使用すると、Electron環境をターゲットにして、Electronの機能に完全にアクセスできます。

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

1
adamup

declare var fs: any;を実行することでも、fsを宣言できます

1
John Velasquez

どうやらadvanced-json-pathは、誰かがfsを使用している場合、Angular 6以降でこの問題を解決します

だから、やらなければならない

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

このメッセージインスタンスの時点では（少なくとも私の場合は）dev依存関係であるため、バージョン1.0.8です。その後、モジュール 'fs'が見つかりません。

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

このアプリケーションでは、モジュール「fs」が見つからないというエラーを取り除きました。

0
user428602

Angular 8では、 Angular Builders を使用して、Angularによって生成された仮想構成を拡張するweb.config.jsを指定できます。

このブログ投稿 は非常によく説明しています。

tldr：

  1. npm i -D @angular-builders/custom-webpackを実行します
  2. angular.jsonファイルを編集して、architect.serveおよびarchitect.buildを使用して、custom-webpackモジュールを使用してwebpack.config.jsファイルで仮想構成を拡張するように指示します。
  3. カスタムwebpack.config.jsを作成します-この場合、次のようになります。
module.exports = {
    node: {
        fs: 'empty'
      }
};
0
bighairdave

あるいは、NativeScriptファイルは、ファイルシステムモジュールの一部として実装されます。使用するには、コードビハインドファイルにインポートする必要があります。例えば.

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