Angular-cli: Won't compile throwing errors about graceful-fs and node-localstorage

[astr0sl0th]

Versions

Angular CLI: 6.0.0
Node: 8.11.1
OS: darwin x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

• Update from Angular 5 to 6 using ng update following official docs
• Run ng serve

Observed behavior

** Angular Live Development Server is listening on localhost: 4200, open your browser on http://localhost:4200/ **
                                                                              u Date: 2018-05-08T15:54:59.281Z
Hash: da671adf478a1eedee6e
Time: 10345ms
chunk {main} main.js, main.js.map (main) 74.1 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.4 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 59.7 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.86 MB [initial] [rendered]

ERROR in ./node_modules/graceful-fs/polyfills.js
Module not found: Error: Can't resolve 'constants' in '/Users/joe/projects/verado/node_modules/graceful-fs'
ERROR in ./node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in '/Users/joe/projects/verado/node_modules/graceful-fs'
ERROR in ./node_modules/graceful-fs/fs.js
Module not found: Error: Can't resolve 'fs' in '/Users/joe/projects/verado/node_modules/graceful-fs'
ERROR in ./node_modules/node-localstorage/LocalStorage.js
Module not found: Error: Can't resolve 'fs' in '/Users/joe/projects/verado/node_modules/node-localstorage'
ERROR in ./node_modules/node-localstorage/LocalStorage.js
Module not found: Error: Can't resolve 'path' in '/Users/joe/projects/verado/node_modules/node-localstorage'
ERROR in ./node_modules/graceful-fs/legacy-streams.js
Module not found: Error: Can't resolve 'stream' in '/Users/joe/projects/verado/node_modules/graceful-fs'
ℹ ｢wdm｣: Failed to compile.

Desired behavior

It should compile successfully

Mention any other details that might be useful (optional)

I am currently talking with @SanderElias and both agree this is a cli issue as I don't have any external deps that use graceful-fs or node-localstorage

[clydin]

Closing as this has been resolved offline.

[SanderElias]

As an addendum, the source of the problem came out of an API that loaded a node library. This was working in the previous version, but the new version doesn't support the node globals anymore, because those can lead to hard to trace problems.

We agreed that the CLI could have provided a better error message, so it would be easier to find the real problem that is causing this issue.

[mahmudulshuvo]

I don't get the solution. @clydin

I'm actually having similar types of problem.

ERROR in ./node_modules/graceful-fs/polyfills.js
Module not found: Error: Can't resolve 'constants' in 'C:\Users\Shuvo\Desktop\Angular-6\node_modules\graceful-
fs'
ERROR in ./node_modules/graceful-fs/graceful-fs.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Shuvo\Desktop\Angular-6\node_modules\graceful-fs'
ERROR in ./node_modules/graceful-fs/fs.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Shuvo\Desktop\Angular-6\node_modules\graceful-fs'
ERROR in ./node_modules/jsonfile/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Shuvo\Desktop\Angular-6\node_modules\jsonfile'
ERROR in ./node_modules/graceful-fs/legacy-streams.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\Shuvo\Desktop\Angular-6\node_modules\graceful-fs'

My angular version

Node: 8.11.2
OS: win32 x64
Angular: 6.0.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

#### Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.3.0
@angular/cli 6.0.8
@angular/flex-layout 6.0.0-beta.16
@angular/language-service 6.0.3
@angular/material 6.3.0
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2
webpack 4.8.3

[RichardJJacobs]

I'm getting the same error. Is there a fix for this?

[mamayadi]

Closing as this has been resolved offline.

If you solved offline how we could know the solution!!!

[clydin]

see the next comment in the thread: https://github.com/angular/angular-cli/issues/10730#issuecomment-387818455

If you are getting these errors, the application is trying to use a node library in a web application. If a library is not designed to be cross platform (a browser and node are different platforms that happen to share a language), then it shouldn't be used outside its chosen platform.

[ali-hasani]

I didn't understand what should i exactly do to solve the problem.

[SanderElias]

@ali-hasani Check your 3rth party libraries, Probably one of those is not suited to work in the browser. Contact the vendors of those libraries to get a solution.

Or declare the needed globals as properties of the windows object, you might add that to the polyfills. .ts. The exact solution is highly depended on what you want to link in.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}