Getting error while ng serve. Using mapbox/mapbox-gl-draw

Question

Have following versions:

"angular": 6.0.3 
"rxjs": "^6.2.0",
"@mapbox/mapbox-gl-draw": "^1.0.4",

While ng serve Getting error:

Could anyone help me out, will be appreciated..

Adding ```node: { fs: 'empty'}```to webpack config file maybe helps. — Fateme Fazli, May 25 '18 at 12:53
@fatemefazli could you tell me where and in which file should place this code? — Ketan Akbari, May 25 '18 at 12:54
@KetanAkbari if you don't have ```webpack.config.js``` in your root dirctory, you can eject ```webpack.config.js``` from angular-cli by running ```$ ng eject``` and then add ```node: { fs: 'empty'}``` to your ```webpack.config.js``` file. — Fateme Fazli, May 25 '18 at 13:36
@fatemefazli i'm using angular cli-6.0.3, and in it `ng eject` is temp. disabled due to new `angular.json` format. could you suggest any other way. — Ketan Akbari, May 26 '18 at 04:29

score 2 · Answer 1 · answered Sep 13 '19 at 08:55

2

This seems to have something to do with angular-cli. Try adding this to the package.json

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

Git issue for further details

answered Sep 13 '19 at 08:55

Anand A.S

87
7

score 0 · Answer 2 · answered May 25 '18 at 12:38

0

The issue here is that Angular CLI v6 no longer ships with support for node built-in modules, see here. This fix is outlined in a comment further down the issue thread here:

In polyfills.ts add:

(window as any).fs = window;

answered May 25 '18 at 12:38

p4r1

2,490
16
18

Sorry, turns out that only works with `global`. There are [multiple](https://github.com/angular/angular-cli/issues/8272) [issues](https://github.com/angular/angular-cli/issues/5324) in the angular-cli repo for this problem, but the answer seems to be "working as indended". – p4r1 May 25 '18 at 13:06

score 0 · Answer 3 · answered May 26 '18 at 05:47

0

actually a way to resolve this issue was ignoring the fs require in webpack.config.js but in angular-cli version 6 and upper we can't eject webpack.config.js based on this issue and issue.so we can't say webpack to ignore fs.it seems we can't use fs anymore in Angular-cli 6 and upper.You can declare the fs also by doing declare var fs: any;this solves ng serve but if you build the project then run npm run serve, will face the error:

'fs' is not defined.

answered May 26 '18 at 05:47

Fateme Fazli

11,582
2
31
48

in which file `declare var fs: any;` should be placed? – Ketan Akbari May 26 '18 at 06:17
1

@KetanAkbari i'm not sure but you can try adding index.html: `````` Then in TS you can declare fs and access any method/property: ```declare var fs: any;``` – Fateme Fazli May 26 '18 at 06:27
Thanks for your efforts and helps but these solutions not working – Ketan Akbari May 26 '18 at 06:56
1

@KetanAkbari your welcome, we are trying to find the best solution and would be good mention me if you found any update on this question. – Fateme Fazli May 26 '18 at 06:58

Getting error while ng serve. Using mapbox/mapbox-gl-draw

3 Answers3