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"]
  }
}

Answer 1

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

Answer 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