[v6] Electron: Module not found: Error: Can't resolve 'fs'

[marcj]

Versions

Angular CLI: 6.0.0
Node: 9.11.1
OS: darwin x64
Angular: 6.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, http, language-service, material, 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.3.2
@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.7.0

Repro steps

When I develop an electron app (and thus have access to Node's fs module), I can't access node modules because typescript or webpack isn't able to resolve it.

import * as fs from 'fs'

Observed behavior

I get an error while building the application ng build:

WARNING in ./node_modules/zone.js/dist/zone-mix.js
Module not found: Error: Can't resolve 'fs' in '/Users/marc/bude/project/node_modules/zone.js/dist'

ERROR in ./src/main/home.ts
Module not found: Error: Can't resolve 'os' in '/Users/marc/bude/project/src/main'

ERROR in ./src/main/home.ts
Module not found: Error: Can't resolve 'path' in '/Users/marc/bude/project/src/main'

....

Desired behavior

I'd like to be able to use Node's modules and define somewhere in the angular.json configuration to allow certain modules (in other words: exclude them from the build process, as the Node runtime provides that stuff).

Mention any other details that might be useful (optional)

In Angular 5 I was able to eject and add in the webpack.config.js following lines at the root level:

  "externals": {
      "mongodb": 'require("mongodb")',
      "fs": 'require("fs")',
  },

However since Anuglar 6 does not provide an eject anymore, I'm not able to use that old webpack.config.json from v5 anymore. To make Angular 6 workable in Electron I need to be able to use a webpack.config.js again or maybe a config option in angular.json that allows me to define webpack's externals.

[sgruhier]

I cannot use handlebarjs for the same reason :(
It's a blocker to upgrade to ng6

[jushar]

I've been running into the same problem. Actually, I only need to use ng eject though to get externals to work and would prefer using angular-cli directly rather than having to eject.
So, at least for me, an externals option for the angular-cli.json/angular.json would help a lot and might also be a quick fix for this specific problem.

[b0bi79]

I've been running into the same problem. For ng serve, I get an error:

ERROR in ./node_modules/content-disposition/index.js
Module not found: Error: Can't resolve 'path' in 'D:\Sources\SSIV\Projects\Portal\angular\node_modules\content-disposition'

As a temporary solution, I changed var basename = require('path').basename to var basename = require('path-browserify').basename in the module content-disposition.

[bufke]

I suspect I'm getting the same error using libsodium-sumo. After upgrading to angular 6 I get

ERROR in ./node_modules/libsodium-sumo/dist/modules-sumo/libsodium-sumo.js
Module not found: Error: Can't resolve 'path' in '/home/david/Projects/passit-frontend/node_modules/libsodium-sumo/dist/modules-sumo'

Should be easily reproducable on this branch.

Frustratingly, the path module isn't used at all in libsodium.js when used in a browser - it exists only when used in node. It's presence seems to trigger this error.

If I delete references to path, everything works including libsodium crypto.

[alexjlockwood]

Same issue... After attempting to upgrade to angular-cli v6, I get the following when attempting to run ng serve:

WARNING in ./node_modules/sax/lib/sax.js
Module not found: Error: Can't resolve 'stream' in '/Users/alockwood/ShapeShifter/node_modules/sax/lib'

ERROR in ./node_modules/svgo/lib/svgo/js2svg.js
Module not found: Error: Can't resolve 'os' in '/Users/alockwood/ShapeShifter/node_modules/svgo/lib/svgo'
ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in '/Users/alockwood/ShapeShifter/node_modules/jszip/lib'

[ckruhs]

Same issue here when using ng serve

WARNING in ./node_modules/xml2js/node_modules/sax/lib/sax.js
Module not found: Error: Can't resolve 'stream' in 'C:\Develop\djjb-news-reader\node_modules\xml2js\node_modules\sax\lib'

ERROR in ./node_modules/xml2js/lib/parser.js
Module not found: Error: Can't resolve 'timers' in 'C:\Develop\djjb-news-reader\node_modules\xml2js\lib'

[ocombe]

I've found a "temporary" hack to make this work here: #4227 (comment)

You can also use window.require('fs') or any other node module, that should work

[sgruhier]

Did you try it?
I tried that and I still get Module not found: Error: Can't resolve 'fs' in '..../node_modules/handlebars/lib';

[ocombe]

I guess it depends how your lib imports its dependencies, it works for electron and fs, but I just tried rxdb and the "pouchdb-adapter-localstorage" that imports "stream" fails :(

[ckruhs]

My issue was solved by using npm install events buffer stream timers --save

Tip found here: https://stackoverflow.com/questions/50234196/after-updating-from-angular-5-to-6-i-keep-getting-the-error-cant-resolve-timer

[gimox]

Same error here with fs and lokijs

[YoannBureau]

Same error with path here