How to fix cannot find module 'fs'

Question

When I try using writeFile angular imports it from fs, then i try to run ng serve and i get ERROR in src/app/app.component.ts(2,27): error TS2307: Cannot find module 'fs'.

I am guessing that I am missing a simple option somewhere like when you want to use ng-model you need to import the formsModule in app.modules.ts.

I am Using:

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

My tsconfig looks like this:

{
  "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` is a **NodeJS** libary. It requires access to the OS, something which browser Javascript has not. You can't use it in Angular. — , Jun 04 '19 at 06:32
Angular applications run in the browser, not in the server in NodeJS. You can't use the file system in an Angular application. — JB Nizet, Jun 04 '19 at 06:33
@JBNizet technically, if you're using electron, you can use fs in the browser instance. That's a slightly different case, though. — briosheje, Jun 04 '19 at 06:34
@briosheje and technically, electron isn't a browser but a full desktop application, which has access to the OS ! — , Jun 04 '19 at 06:41
@Maryannah yup, though the browser instance is effectively a browser, just wanted to specify this since the OP didn't specify whether the angular application is running on a browser or on chromium over electron ;). — briosheje, Jun 04 '19 at 06:59
@briosheje still, it's not the browser part that uses FS but the NodeJS backend. Your comment was very misleading, because electron's browser can't actually use FS, so I corrected it ! — , Jun 04 '19 at 07:01

Arash Motamedi · Accepted Answer · 2019-06-04T06:47:07.320

Are you referring to the NodeJS module fs? If so, then that module is only available at NodeJS runtime.

I assume you're compiling your Angular application for the web. If that's the case, then keep in mind that browsers do not have fs nor any other Node module; the same way that Node doesn't have a fetch or window object or API.

As part of the bundling process for your application, the Angular compiler is unable to resolve fs to a referenced package or a known Web API, leading to the message you see.

If you need client-side file-like capabilities, consider using a similar Web API such as localStorage.

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

If you need low-level access to the disk and the file-system, then you're in need of some "back-end" runtime/SDK/language, such as NodeJS, Python, etc.

You can process files in client-side Javascript. You just need to work within the boundaries of what the browser allows. For example, you can get access to the content of a file by using an <input type="file"> tag and then processing the FileList object.

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

Similarly, you can initiate a client-side "download" to let the user save the file.

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

thanks , i guess i need another way to write to a file, i just want to sort a file ill have to use python. — Syler, Jun 04 '19 at 06:38
Sure, or a NodeJS app... But yes, if you need low-level access to the disk and the filesystem, then you're in need of some "back-end" runtime/SDK/language. You can process files in client-side Javascript. You just need to work within the boundaries of what the browser allows: for example, you can get access to the content of a file by using an `` tag, and then processing the `FileList` object (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). Similarly, you can initiate a client-side "download" (https://www.npmjs.com/package/file-saver) — Arash Motamedi, Jun 04 '19 at 06:43

score 1 · Answer 2 · answered Jun 04 '19 at 06:37

1

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

answered Jun 04 '19 at 06:37

Jithin Zacharia

341
1
3
17

im was trying to write to a file not read, i can read a file by simply using fetch. – Syler Jun 04 '19 at 06:41
You can Read and write using that example. – Jithin Zacharia Jun 04 '19 at 06:46

How to fix cannot find module 'fs'

2 Answers2

Linked

Related