5

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

enter image description here

how can i fix this?

10
  • Are you using webpack? If so, add the following to your config. node: { fs: "empty" }
    – Eric Yang
    Jun 29, 2018 at 4:55
  • no.. am not using. i used angular cli for setup
    – VIK6Galado
    Jun 29, 2018 at 4:57
  • can you post the content of your package.json?
    – Eric Yang
    Jun 29, 2018 at 5:25
  • @EricYang I posted
    – VIK6Galado
    Jun 29, 2018 at 5:37
  • 1
    Adding "browser": { "fs": false } in package.json solved the issue for me.
    – Mandakh
    Jan 23, 2019 at 4:05

1 Answer 1

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

1
  • 3
    i tried to add the above browser object to package.json but no luck! Feb 24, 2021 at 18:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.