error TS2307: Cannot find module 'fs' or its corresponding type declarations

Question

I'm tring to import fs module in my ts component with

import * as fs from 'fs';

I need them for use method writeFile , because I want take data from HTML form and write it in to a JSON file. But the console throw me that error:

error TS2307: Cannot find module 'fs' or its corresponding type declarations.

new-card.component.ts

import { Component, OnInit } from '@angular/core';
import jCardList from '../mock-cards.json';
import { Card } from '../ICard';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import * as fs from 'fs';


@Component({
  selector: 'app-new-card',
  templateUrl: './new-card.component.html',
  styleUrls: ['./new-card.component.css']
})

export class NewCardComponent implements OnInit {
  fg: FormGroup;

  constructor(private fb:FormBuilder) { 

    this.fg = this.fb.group({
    id: [{value: 1, disabled: true},[Validators.required]], 
    nome: [{value: null, disabled: false},[Validators.required]],
    manaCost:[{value: null, disabled: false},[Validators.required]],
    colorIdentity:[{value: null, disabled: false},[Validators.required]], 
    type:[{value: null, disabled: false},[Validators.required]],
    subType:[{value: null, disabled: false}],
    effect:[{value: null, disabled: false}],
    att:[{value: null, disabled: false}],
    def:[{value: null, disabled: false}],
    price:[{value: null, disabled: false}],
    });

  }

new-card.component.html

<div>
  <form [formGroup]="fg" (ngSubmit)="onClick(fg)" > 
    <table>
      <tr>
        <td>Id !:</td>
        <td><input type="number" id="Id" formControlName="id"></td>
      </tr>
      <tr>
        <td>Nome !:</td>
        <td><input formControlName="nome"></td>
      </tr>
      <tr>
        <td>Costo in mana !:</td>
        <td><input type="number" id="manaCost" formControlName="manaCost"></td>
      </tr>
      <tr>
        <td>Colore !:</td>
        <td><input id="colorIdentity" formControlName="colorIdentity"></td>
      </tr>
      <tr>
        <td>Tipo !:</td>
        <td><input id="tipe" formControlName="type"></td>
      </tr>
      <tr>
        <td>Sottotipo:</td>
        <td><input id="subTipe" formControlName="subType"></td>
      </tr>
      <tr>
        <td>Effetto:</td>
        <td><input id="effect" formControlName="effect"></td>
      </tr>
      <tr>
        <td>Forza:</td>
        <td><input type="number" id="att" formControlName="att"></td>
      </tr>
      <tr>
        <td>Costituzione:</td>
        <td><input type="number" id="def" formControlName="def"></td>
      </tr>
      <tr>
        <td>Prezzo:</td>
        <td><input type="number" id="price" formControlName="price"></td>
      </tr>
    </table> 
    <button type="submit" [disabled]="fg.invalid" >Conferma</button>
  </form>
 
</div>

I have already tried to use npm install @types/node --save-dev and add in to the file tsconfig.json inside compilerOptions "types": ["node"],"typeRoots": ["node_modules/@types"], So, if someone can give me an help to troubleshooting this error or give me a different solution I will be glad.

Answer 1

fs it's a built-in package in Node.js, which is server side. Your code is client-side, you can't use it.