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 構造、構成、依存関係に従います
数時間後、私は、本当の答えは次のとおりであるという答えを集めて結論に達しました。
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によると、それは現在可能です。私は試しませんでした。
まだ答えを探している人のために、私の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"
npm install --save-dev @types/node
「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
}
}
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 がありました。私にとってこの労働者。
追加してこれを修正しました
"types": [
"node"
]
tsconfig.app.json内
受け入れられた答えは正しいです。 Angular v6 +ではfs
を使用できなくなりました。
ただし、この代替ビルダー(Angular CLIの拡張機能)を使用すると、Electron環境をターゲットにして、Electronの機能に完全にアクセスできます。
declare var fs: any;
を実行することでも、fs
を宣言できます
どうやら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」が見つからないというエラーを取り除きました。
Angular 8では、 Angular Builders を使用して、Angularによって生成された仮想構成を拡張するweb.config.js
を指定できます。
このブログ投稿 は非常によく説明しています。
tldr:
npm i -D @angular-builders/custom-webpack
を実行しますangular.json
ファイルを編集して、architect.serve
およびarchitect.build
を使用して、custom-webpack
モジュールを使用してwebpack.config.js
ファイルで仮想構成を拡張するように指示します。webpack.config.js
を作成します-この場合、次のようになります。module.exports = {
node: {
fs: 'empty'
}
};
あるいは、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.
});