33

我正在尝试将我的 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 弹出配置？

有人有想法吗？

更新

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

错误 ReferenceError: fs 未定义

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

4

12 回答 12

40

由于以前的答案已经很老了，这里可能有助于强调 Angular9 的解决方法是在你的 package.json 中添加以下内容：

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

这对我来说非常有效。作为参考，我在官方 tensorflow/tfjs Github 页面上找到了这个解决方案。

于 2020-08-15T15:35:32.690 回答
33

2020 年更新

请参阅Marc 对 Angular v9 的回答。

2019 年更新

请参阅评论，根据@Tahlil 现在可以。这适用于 Angular v8（Ivy 编译器）请参阅此答案。它将特定模块设置为 false，以便在 package.json 中的浏览器中使用。

原始答案

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

您不能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

于 2018-05-07T10:24:50.857 回答
14

对于仍在寻找答案的任何人，这是我设法在我的 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”标志。它必须设置为真。

{
  "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和electron作为依赖项。这个工人对我来说。

于 2018-11-02T12:23:25.547 回答
5

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

这篇博文很好地解释了这一点。

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'
      }
};
于 2019-09-13T10:02:13.483 回答
1

我通过添加解决了这个问题

"types": [
  "node"
]

在 tsconfig.app.json

于 2019-07-23T22:38:32.477 回答
1

在您的 package.json 中添加以下行

  1. “浏览器”：{“fs”：假，“os”：假，“路径”：假}

单击此处查看示例图像

于 2020-10-02T19:05:44.473 回答
1

接受的答案是正确的；你不能fs再在 Angular v6+ 中使用了。

但是，这个替代构建器（它是 Angular CLI 的扩展）允许您以 Electron 环境为目标并完全访问 Electron 的功能：

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

于 2018-11-06T20:09:01.250 回答
0

或者在 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.
    });
于 2018-11-26T10:58:15.583 回答
0

您也可以fs通过这样做来声明declare var fs: any;

于 2018-05-06T18:38:44.473 回答
0

如果您在规范文件中导入了 jasmine 以避免tslint错误，您应该遵循：

  1. import jasmine;从规范文件中删除。
  2. 加入jasmine_tsconfig.json
...
...
"compilerOptions": {
  ...
  ...
  "types": [
      "webpack-env",
      "jasmine"
  ]
  ...
  ...
}
...
...
于 2020-05-11T04:15:34.350 回答
0

我在 Angular CLI monorepo 中运行一个 Angular 应用程序，在Nx 示意图的帮助下设置。我正在共享 lib 目录中的代码。

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

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

无法解析“fs”

涉及的错误堆栈：

这很奇怪，因为从表面上看，如果包含 Enum 与 type-graphql 无关。

事实证明，这个问题与 type-graphql 模式和 Typescript 枚举是在同一个库中定义的事实有关。将枚举提取到他们自己的库中解决了这个问题。我不清楚为什么会发生错误，但无论如何解决方案都有效。

编辑

所以问题是，根据这个 nx 问题和这个 type-graphql 问题，在某个点上，包括来自带有 TypeGraphQL 的库的内容最终会尝试将整个 TypeGraphQL 捆绑到浏览器应用程序中（@Input()装饰器似乎是另一个这样的触发器）。

如果你想在前端包含 TypeGraphQL 类，解决方案是更新 webpack 配置。在 AngularCLI 应用程序中执行此操作涉及相当多的步骤。

于 2020-02-07T12:01:57.370 回答
-3

显然，如果有人使用 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",
}

在我们的应用程序中，它消除了 Module 'fs' not found 错误。

于 2019-01-11T21:40:04.220 回答