I have two electron angular applications. One is angular-electron-master from GitHub, the other is a legacy application I've inherited, based on material-dashboard-angular2-master. Both projects are angular 7 hosted in electron.
I've experimented with angular-electron-master and added @openid/appauth to it. It builds fine. When I take my changes and add them to the legacy application it doesn't build. I get these errors:
ERROR in ./node_modules/@openid/appauth/node_modules/opener/lib/opener.js Module not found: Error: Can't resolve 'child_process' in 'Z:\TheApp\angular-electron\node_modules@openid\appauth\node_modules\opener\lib' ERROR in ./node_modules/@openid/appauth/built/node_support/crypto_utils.js Module not found: Error: Can't resolve 'crypto' in 'Z:\TheApp\angular-electron\node_modules@openid\appauth\built\node_support' ERROR in ./node_modules/@openid/appauth/built/node_support/node_request_handler.js Module not found: Error: Can't resolve 'http' in 'Z:\TheApp\angular-electron\node_modules@openid\appauth\built\node_support' ERROR in ./node_modules/@openid/appauth/node_modules/follow-redirects/index.js Module not found: Error: Can't resolve 'http' in 'Z:\TheApp\angular-electron\node_modules@openid\appauth\node_modules\follow-redirects' ERROR in ./node_modules/@openid/appauth/node_modules/follow-redirects/index.js Module not found: Error: Can't resolve 'https' in 'TheApp\angular-electron\node_modules@openid\appauth\node_modules\follow-redirects' ERROR in ./node_modules/@openid/appauth/node_modules/opener/lib/opener.js Module not found: Error: Can't resolve 'os' in 'Z:\TheApp\angular-electron\node_modules@openid\appauth\node_modules\opener\lib' ERROR in ./src/app/services/auth.service.ts Module not found: Error: Can't resolve 'os' in 'Z:\TheApp\angular-electron\src\app\services' ERROR in ./node_modules/@openid/appauth/node_modules/follow-redirects/index.js Module not found: Error: Can't resolve 'stream' in 'Z:\TheApp\angular-electron\node_modules@openid\appauth\node_modules\follow-redirects'
I can resolve the os dependency by npm install os I can resolve the other dependencies by doing editing node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js as suggested at Angular 6 many Can't resolve errors (crypto, fs, http, https, net, path, stream, tls, zlib)
I feel uncomfortable with the fixes because angular-electron-master project doesn't have them and builds successfully. Also I'm not sure if browser.js is appropriate given I'm packaging as electron standalone app.
Even if I include these fixes, I'm still left with 'child_process'.
Looking for missing modules, both projects include node_modules@types\node\index.d.ts which contains a declarations for
declare module "http" {…}
declare module "https" {…}
declare module "stream" {…}
declare module "crypto" {…}
declare module "os" {…}
declare module "child_process" {…}
I don't know why this isn't proving useful in resolving the http module
I'm quite new to the intricacies of node module resolution. There seem to be so many settings that could be influential.
Is there some way to know where and why a module is being resolved? a bit like fusionlog for .net assembly resolution. It looks like tsc has an option --traceResolution that might be useful. I just need to find the equivalent tsconfig.json setting. Adding
"traceResolution": true,
to compilerOptions section of tsconfig.json produces masses of output. I piped it to a log file. Searching that file (76,000 lines), I see entries like this
Module 'http' was resolved as locally declared ambient module in file 'Z:/Application/MDBApp/angular-electron/node_modules/@types/node/index.d.ts'.
Not as useful as I'd hoped. Except it tells me at one level the module is resolving.
Now I have installed angular-cli globally.
if I run
ng build --verbose
I get useful information that I will look at tomorrow....
Tomorrow: The verbose info details different files the considered for resolution. the message
Field 'browser' doesn't contain a valid alias configuration
Keeps coming up.
So now I'm looking at that... and this link.
Field 'browser' doesn't contain a valid alias configuration
With the project that builds (angular-electron-master) verbose output includes
[child_process] external "child_process" 42 bytes {main} [built] cjs require child_process [./node_modules/opener/lib/opener.js] 2:19-43 [crypto] external "crypto" 42 bytes {main} [built] cjs require crypto [./node_modules/@openid/appauth/built/node_support/crypto_utils.js] 16:13-30
I can't find lines like that in the output of the failing project.
So, I've simplified the failing project somewhat - not completely. And read some more. I currently believe the issue is a webpack resolution, so going to look at that next...
I appreciate this isn't the clearest scenario. Hopefully my thought processes will help some people.
Disappointed someone voted this question down. I think a bit more tolerance would be nice. Everything is easy when you know how. ;-)
I've tried installing the nodejs lte (version 10.15.3) with nvm I've tried deleting node_modules directory and package-lock.json file and re-running npm install
Some dev dependencies include
"@angular-devkit/build-angular": "^0.13.8",
"@angular/cli": "7.3.3",
"@angular/compiler-cli": "7.2.15",
"typescript": "3.2.4"
Thanks Martin
