更新到Angular v6 - 找不到模块:错误:无法解析'fs'

Question

我正在尝试将Angular Universal项目从Angular v5迁移到v6

我有一个服务,我用它fs来加载服务器端的翻译.一切都适用于Angular v5.

使用Angular v6,当我运行npm run startaka ng serve --proxy-config proxy.conf.json我面临以下错误

./src/providers/core/translate/translate-universal-loader.service.ts中的错误找不到模块:错误:无法解析'/ Users/me/Documents/projects/myproject/src/providers中的'fs' /核心/翻译"

在我的服务中,我声明fs如下:

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

我也试图宣布它像跟随,但没有帮助

import * as fs from 'fs';

告诉webpack忽略fs我试图在我的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

ps:我的项目遵循https://github.com/angular/universal-starter结构,配置和依赖项

Answer 1

由于以前的答案很旧，因此在这里强调一下，Angular9 的解决方法只是在 package.json 中添加以下内容可能会有所帮助：

"browser": {
    "fs": false,
    "os": false,
    "path": false
  }

这对我来说非常有效。作为参考，我发现在官方tensorflow该解决方案/ tfjs Github的页面在这里。

Answer 2

好几个小时后,我得出了我收集到的答案的结论,真正的答案是:

你不能fs再在Angular v6中使用了

此外,由于不可能再弹出webpack配置,因此无法告诉webpack忽略fs要求

有一个关于这个主题的公开问题:https://github.com/angular/angular-cli/issues/10681

PS:我使用fs加载服务器端的翻译,我通过@xuhcc的解决方案克服了这个问题,请参阅https://github.com/ngx-translate/core/issues/754

Answer 3

对于仍在寻找答案的任何人，这是我在angular 7应用程序中如何设法要求（'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']);
    }
  }
}

注意：文件顶部的import语句仅用于提供类型信息。使用node设置变量值require。

有关更新，请在此处跟踪问题

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

编辑：

事实证明，如果您的项目具有相关性等，则角度编译器将无法编译代码。为了解决这个问题，就像有人已经建议的那样，将其添加到您的polyfills.ts中。require 'fs', 'path', 'child_process'(window as any).global = window;

就我而言，我将chokidar，node-pty和电子作为依赖项。这个工人对我来说。

Answer 4

在 Angular 8 中，您现在可以使用Angular Builders来指定web.config.js扩展 Angular 生成的虚拟配置。

这篇博文解释得很好。

总而言之：

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'
      }
};