Angular 7 how to use fs module?

Question

I'm using Angular 7.

I tried to use fs module on Typescript for open a directory. I always have this error: "Module not found: Error: Can't resolve fs" types@node and file-system are installed.

My code:

import {Component, OnInit} from '@angular/core';
import * as fs from 'file-system';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit  {
  title = 'my-app';

  constructor() {

  }

  ngOnInit() {
    console.log(fs);
  }
}

Can you help me ?

Node : v10.14.0 Npm: v6.4.1 Angular CLI: v7.1.1

Angular applications run in the browser. Not in NodeJS on the server. There is no access to the file system in the browser, and you can't use NodeJS-specific modules there. — JB Nizet, Dec 06 '18 at 17:25
I update my question. I thought that angular could call nodejs function :/ — Eng, Dec 06 '18 at 18:32
You can, in the compile step you are free to access the filesystem and involve files from other places. When the application is compiled and/or build, you no longer can. There is no access to the filesystem from the client as JB said. — Bjorn 'Bjeaurn' S, Jun 05 '19 at 08:53
Does this answer your question? [Node JS fs module inside browser](https://stackoverflow.com/questions/27019242/node-js-fs-module-inside-browser) — Heretic Monkey, Aug 10 '20 at 13:37

score 1 · Accepted Answer · answered Aug 10 '20 at 13:13

'fs' is a library for NodeJS runtime, but the end product of the Angular pipeline bundler is a frontend SPA client which runs in a browser. If you need to load a file into the client from the user's local filesystem then you need to use browser native variant e.g. take a look at handling <input type="file"> elements.

score 1 · Answer 2 · answered Feb 09 '21 at 09:08

fs module is not available in Angular. Use the below package to use fs module.

npm install file-system --save

Example:

var fs = require('file-system');
 
fs.mkdir('1/2/3/4/5', [mode], function(err) {});
fs.mkdirSync('1/2/3/4/5', [mode]);
fs.writeFile('path/test.txt', 'aaa', function(err) {})

Reference: https://www.npmjs.com/package/file-system

score 0 · Answer 3 · answered Mar 03 '20 at 06:31

0

The 'fs' module is a node module which is not available in Angular (or any other framework for that matter). What happens is that the Angular code is transpiled and minified and runs in the browser context, not in the node context. Browsers are sandboxed and cannot access the client file system. If this were possible than the web would be a lot more dangerous :).

answered Mar 03 '20 at 06:31

Vlad Gheorghita

80
2

1

I'm afraid this isn't true. You can use webpack to allow file-stream to access files uploaded by a user, as long as permissions are granted. You can build this manually. Or use any of a number of module wrappers. – Jamie Nicholl-Shelley Apr 08 '20 at 11:42

score 0 · Answer 4 · answered Aug 10 '20 at 13:21

file-system API is used for back-end JavaScript/TypeScript frameworks for file manipulation. Due to security reasons any JavaScript front-end library/framework cannot be used for file manipulation as browsers are not allowed to modify client's files. So it is only be accessible by back-end frameworks as Node, Loopback, NestJs etc.

Angular 7 how to use fs module?

4 Answers4

Linked