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

I’m sorry to say that we do not have support for the Electron platform currently in Angular CLI. We only support building browser apps, and while building browser apps the node native imports (like fs) are not available. You can read more about why we disabled these imports in https://github.com/angular/angular-cli/issues/9827.

We do not need support for Electron. We only need the compiler to not fail when we include libraries which have been badly written to require fs for some marginal functionality which we wont be using from them. When you started enforcing this in 6 you made a serious breaking change which could be easily avoided if you allowed us to go around this and avoid the compiler error.

@smoke I completely understand the reasoning behind the change. But I don’t understand why the Angular-CLI team did not provide a workaround (like an override option for example). We have 10 dependencies that rely on node modules (fs, path etc). How are we supposed to do? Fix all the dependencies ourselves? Staying on Angular CLI 1.7? Waiting an eject option?

I am very thankful to the Angular team to provide us an awesome framework with helpful tools (❤️), but I spent many hours of my free time just to upgrade 1 element (Angular) of our application… and finally realize that we are at a dead end.

Maybe going back to Angular CLI 1.7 is the best solution for now, but please think about developers that just want to upgrade their application without running into a wall 😃

@filipesilva isn’t the CLI supposed to support angular universal, which could use the same node APIs that electron uses?

My problem was the same:

ERROR in ./node_modules/....js
Module not found: Error: Can't resolve 'os' in '.../node_modules/...'

It helps me: https://github.com/browserify/browserify-handbook#browser-field

We’ve added browser field in package (fortunately it was our package) that causes an error

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

just like here https://github.com/Microsoft/TypeScript/blob/master/package.json

By the way this is the reasoning behind this change https://github.com/angular/angular-cli/issues/9827#issuecomment-369578814 and the relevant PR https://github.com/angular/angular-cli/pull/9812 that is later ported in https://github.com/angular/devkit/commit/8e7658aabc71829153e0dfccf60cc526142a16dd#diff-085e357d25d94ae495a662c157178fb0L103

I really hope there would be a reasonable solution - for now the best I can figure out is an option to override / supplement webpack configuration so that nodejs shimming can be defined per project.

Workaround (the best one I found, thanks @niespodd): https://gist.github.com/niespodd/1fa82da6f8c901d1c33d2fcbb762947d

This should be address as soon as possible. It blocks many people on ng6 upgrade. In my case with handlebarjs, I imported handlebarjs.js in angular.json instead of using an import in my code. Not very sexy but at least it works.

Same here with path or fs and other node modules for a browser application. Some external dependencies require these modules (and check they exist at runtime) so we cannot upgrade our application to Angular 6.

These changes in this commit seem to be responsible for it: https://github.com/angular/devkit/commit/8e7658aabc71829153e0dfccf60cc526142a16dd#diff-085e357d25d94ae495a662c157178fb0L103

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

I cannot use handlebarjs for the same reason 😦 It’s a blocker to upgrade to ng6

Just found this https://github.com/angular-guru/electron-builder (not tested but looks great)

Workaround: I’ve found a workaround that works for me: I downgraded angular-cli to version 1.7.4 and use there ng eject (which works for Angular 6 surprisingly). and then adjust webpack.config.js accordingly.

Why are people patching node_modules? This can be solved using tsconfig paths instead. Please see my PR to PeerTube for an example: https://github.com/Chocobozzz/PeerTube/pull/742

EDIT: OK this has problems with the final build, even though it works for dev build :-
EDIT 2: Never mind, the production build succeeds, I was on the wrong branch. This appears to be a good solution to this issue.

I have placed one good workaround in my post https://github.com/angular/angular-cli/issues/10681#issuecomment-389160125

I’ve found a “temporary” hack to make this work here: https://github.com/angular/angular-cli/issues/4227#issuecomment-310811078

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

Try ngx-electron. It solved issues like this for me.

I have the same problems with electron and angular 6, I added:

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

as @slawiko suggested, on electron package.json and everything worked fine, but this is a workaround only, there should be a fix in order to solve this.

Same error here with fs and lokijs