如何解决无法找到模块'fs'的问题

3
当我尝试使用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"]
  }
}

2
fs 是一个 NodeJS 库。它需要访问操作系统,这是浏览器 JavaScript 所不具备的。你不能在 Angular 中使用它。 - user4676340
Angular 应用程序在浏览器中运行,而不是在 NodeJS 服务器中运行。您无法在 Angular 应用程序中使用文件系统。 - JB Nizet
@JBNizet 从技术上讲,如果你正在使用Electron,你可以在浏览器实例中使用fs。不过这是稍微不同的情况。 - briosheje
@briosheje技术上讲,Electron不是一个浏览器,而是一个完整的桌面应用程序,具有访问操作系统的权限! - user4676340
@Maryannah 是的,虽然浏览器实例实际上是一个浏览器,但我只是想明确一下,因为原帖没有说明 Angular 应用程序是在浏览器上运行还是在基于 Electron 的 Chromium 上运行 ;)。 - briosheje
@briosheje,不过实际上使用FS的并不是浏览器部分,而是NodeJS后端。你的评论有误导性,因为Electron的浏览器实际上无法使用FS,所以我进行了更正! - user4676340
2个回答

4

您是指NodeJS模块fs吗?如果是的话,那么该模块仅在NodeJS运行时可用。

我假设您正在为Web编译您的Angular应用程序。 如果是这种情况,请记住浏览器没有fs或任何其他Node模块; 与此类似,Node没有fetchwindow对象或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。 - Syler
当然,或者是一个 NodeJS 应用程序……但是如果您需要低级别地访问磁盘和文件系统,那么您需要一些“后端”运行时/SDK/语言。您可以在客户端 Javascript 中处理文件。您只需要在浏览器允许的范围内工作:例如,您可以使用 <input type="file"> 标签来访问文件的内容,然后处理 FileList 对象(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)。同样,您可以开始客户端“下载”(https://www.npmjs.com/package/file-saver)。 - Arash Motamedi

1

我本来想写入文件而不是读取,但我可以通过使用“fetch”轻松地读取文件。 - Syler
你可以使用那个示例来读取和写入。 - Jithin Zacharia

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接