版本

Question

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

我有一个服务，我使用fs在服务器端加载翻译。一切都适用于Angular v5。

使用Angular v6，当我运行npm run start又名ng serve --proxy-config proxy.conf.json时，我遇到以下错误

错误 ./src/providers/core/translate/translate-universal-loader.service.ts 找不到模块：错误：无法解析'fs' '/用户/我/文档/项目/ myproject的/ SRC /提供商/型芯/翻译'

在我的服务中，我声明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弹出配置？

有人有个主意吗？

更新

如果我将fs声明为any，则会解决ng serve的问题，但不幸的是，在npm run build:ssr之后它将无法在服务器端运行并运行npm run serve。在服务器端，我将面临以下错误

ERROR ReferenceError：未定义fs

p.s。：我的项目遵循https://github.com/angular/universal-starter结构，配置和依赖

Answer 1

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

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

这对我来说很好。作为参考，我在tensorflow / tfjs Github页面here上找到了此解决方案。

Answer 2

好几个小时后，我得出的结论是我收集的答案，真正的答案是：

你不能再在Angular v6中使用fs

了

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

关于此主题有一个未解决的问题：https://github.com/angular/angular-cli/issues/10681

P.S。：我使用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语句仅用于提供类型信息。变量值是使用节点 require 设置的。

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

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

编辑：

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

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

Answer 4

您也可以通过执行此fs

来声明declare var fs: any;

Answer 5

接受的答案是正确的；您将无法再在Angular v6 +中使用fs。

但是，此替代生成器（它是Angular CLI的扩展）使您可以定位到Electron环境并完全访问Electron的功能：

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

Answer 6

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

This blogpost解释得很好。

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

Answer 7

或者在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.
    });

Answer 8

如果有人使用fs，显然 advanced-json-path 可以在Angular 6及更高版本中解决此问题

所以必须要做一个

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

，因为它是开发人员依赖项（至少在我的情况下）截至此消息实例，它是版本1.0.8 然后，找不到“ fs”模块。

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

在我们的应用程序中，它消除了模块“ fs”未找到错误。

Answer 9

我通过添加

来解决此问题

"types": [
  "node"
]

在tsconfig.app.json中

Answer 10

我正在Nx schematics的帮助下在Angular CLI monorepo中运行Angular应用程序。我是sharing code from a lib directory。

当尝试从Angular应用程序内的共享库中使用Typescript枚举时，我得到了：

关键依赖项：依赖项的请求是一个表达式

无法解析“ fs”

涉及的错误堆栈：

这很奇怪，因为从表面上看，枚举是否与type-graphql无关。

事实证明，该问题与在同一库中定义type-graphql模式和Typescript枚举有关。将枚举提取到自己的lib中可以解决此问题。我尚不清楚错误发生的原因，但无论如何该解决方案都可以。

编辑

所以问题是，每个this nx issue和this type-graphql issue在某个点上包含来自带有TypeGraphQLL的库中的内容，最终都试图将整个TypeGraphQL捆绑到浏览器应用程序中（{{1 }装饰器似乎是另一个这样的触发器。

如果要在前端包含TypeGraphQL类，则解决方案是update the webpack config。可以在AngularCLI应用involves quite a few steps中进行。

Answer 11

如果您已在规格文件中导入了茉莉花以避免\0错误，则应执行以下操作：

从规格文件中删除tslint。
在import jasmine;中添加jasmine

tsconfig.json

Answer 12

在package.json中添加以下行

“浏览器”：{ “ fs”：否， “ os”：错误， “ path”：false}

Click here to see sample image

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

12 个答案:

版本

1。安装@ types / node

2。修改tsconfig.json

3。需要fs

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

编辑：