如何修复找不到模块'fs'

Posted 2023-03-07

【中文标题】如何修复找不到模块\'fs\'

【英文标题】：How to fix cannot find module 'fs'如何修复找不到模块'fs'

【发布时间】：2019-10-19 15:57:31

【问题描述】：

当我尝试使用 writeFile angular 从 fs 导入它时，我尝试运行 ng serve 并得到 ERROR in src/app/app.component.ts(2,27): error TS2307: Cannot find module 'fs'.

我猜我错过了一个简单的选项，比如当你想使用 ng-model 时，你需要在 app.modules.ts 中导入 formsModule。

我正在使用：

vscode: 1.34

Angular CLI: 8.0.1
Node: 10.15.3
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

我的tsconfig 看起来像这样：

  "compileOnSave": false,
  "compilerOptions": 
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "types": ["node"]
  

【问题讨论】：

fs 是一个 NodeJS 库。它需要访问操作系统，而浏览器 javascript 则没有。你不能在 Angular 中使用它。

Angular 应用程序在浏览器中运行，而不是在 NodeJS 中的服务器中。您不能在 Angular 应用程序中使用文件系统。

@JBNizet 从技术上讲，如果您使用的是电子，则可以在浏览器实例中使用 fs。不过，情况略有不同。

@briosheje 从技术上讲，electron 不是浏览器，而是一个完整的桌面应用程序，它可以访问操作系统！

@Maryannah 是的，虽然浏览器实例实际上是一个浏览器，但只是想指定这一点，因为 OP 没有指定角度应用程序是在浏览器上运行还是在电子上的铬上运行；）。

【参考方案1】：

你指的是NodeJS模块fs吗？如果是这样，那么该模块仅在 NodeJS 运行时可用。

我假设您正在为 Web 编译 Angular 应用程序。如果是这种情况，请记住浏览器没有 fs 或任何其他 Node 模块；就像 Node 没有 fetch 或 window 对象或 API 一样。

作为应用程序捆绑过程的一部分，Angular 编译器无法将 fs 解析为引用的包或已知的 Web API，从而导致您看到消息。

如果您需要类似客户端文件的功能，请考虑使用类似的 Web API，例如 localStorage。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

如果您需要对磁盘和文件系统进行低级访问，那么您需要一些“后端”运行时/SDK/语言，例如 NodeJS、Python 等。

您可以在客户端 Javascript 中处理文件。您只需要在浏览器允许的范围内工作。例如，您可以通过使用<input type="file"> 标记然后处理FileList 对象来访问文件的内容。

https://developer.mozilla.org/en-US/docs/Web/html/Element/input/file

同样，您可以启动客户端“下载”以让用户保存文件。

https://npmjs.com/package/file-saver

【讨论】：

谢谢，我想我需要另一种方式来写入文件，我只是想对文件进行排序，我不得不使用 python。

当然，或者 NodeJS 应用程序...但是，如果您需要对磁盘和文件系统进行低级访问，那么您需要一些“后端”运行时/SDK /语言。您可以在客户端 Javascript 中处理文件。您只需要在浏览器允许的范围内工作：例如，您可以通过使用<input type="file"> 标记访问文件内容，然后处理FileList 对象（developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file）。同样，您可以启动客户端“下载”（npmjs.com/package/file-saver）

【参考方案2】：

fs is only available in NodeJs runtime. If you want to read and write to a file locally using Angular please refer to 

https://github.com/NativeScript/NativeScript/issues/4465#issuecomment-311618840

【讨论】：

我正在尝试写入未读取的文件，我可以通过简单地使用 fetch 读取文件。

您可以使用该示例进行读写。