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

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.

37 Answers

✔️Accepted Answer

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.

Other Answers:

@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?

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: angular/devkit@8e7658a#diff-085e357d25d94ae495a662c157178fb0L103

More Issues: