Module not found: Error: Can't resolve 'fs' angular

Question

I am implementing Mapbox in angular application and am doing as follows

added css into angular-cli.json

"../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css"

Component

import { Component } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import * as MapboxDraw from '@mapbox/mapbox-gl-draw';

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

export class AppComponent {
  static t;
  ngOnInit() {
    mapboxgl.accessToken = 'Token';
    AppComponent.t.map= new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      zoom: 5,
      center: [-78.880453, 42.897852]
    });

     const draw = new MapboxDraw({
        displayControlsDefault: false,
        controls: {
            polygon: true,
            trash: true
        }
    });
    AppComponent.t.map.addControl(draw);
  }
}

Its displaying Failed to compile

./node_modules/jsonlint-lines/lib/jsonlint.js Module not found: Error: Can't resolve 'fs' in 'C:\angular\mapboxdemo\node_modules\jsonlint-lines\lib'

Below is my package.json

{
  "name": "mapboxdemo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cli": "^1.7.4",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "@mapbox/mapbox-gl-draw": "^1.0.9",
    "core-js": "^2.5.4",
    "mapbox-gl": "^0.46.0",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  }
}

I tried to executing ng eject command to generate webpack.config file and tried to add { fs: "empty" } but throwing below error

how can i fix this?

Are you using webpack? If so, add the following to your config. node: { fs: "empty" } — Eric Yang, Jun 29 '18 at 04:55
Do you have an angular.json or an angular-cli.json file in your directory? — Eric Yang, Jun 29 '18 at 05:46
i had latest version of angular cli and i uninstalled it and installed `1.7.4`.. i have `angular.json` — VIK6Galado, Jun 29 '18 at 05:53
Copy to angular.json to angular-cli.json and see if you can eject — Eric Yang, Jun 29 '18 at 05:54
not able to eject `Unable to find any apps in `.angular-cli.json`.` — VIK6Galado, Jun 29 '18 at 06:01
Adding "browser": { "fs": false } in package.json solved the issue for me. — Mandakh, Jan 23 '19 at 04:05

score 3 · Answer 1 · edited Feb 10 '21 at 05:26

3

Open package.json file, add this into browser object.

  "browser": {
     "fs": false,
     "path": false,
     "os": false}

If your module is meant to be used client-side the browser field should be used instead of the main field. This is helpful to hint users that it might rely on primitives that aren't available in Node.js modules.

Source: npm Docs | package.json

edited Feb 10 '21 at 05:26

Shayan Shafiq

1,447
5
18
25

answered Jan 26 '21 at 12:32

Mirza Setiyono

181
3
10

3

i tried to add the above browser object to package.json but no luck! – AnilkumarReddy Feb 24 '21 at 18:13

Module not found: Error: Can't resolve 'fs' angular

1 Answers1