Beginner angular project not working: ERR_CONNECTION_REFUSED

[awn70]

Describe the bug
I'm trying to set up a project with an angular ui. When I try to start the app with nx serve be I get electron: Failed to load URL: http://localhost:4200/ with error: ERR_CONNECTION_REFUSED

To Reproduce
Steps to reproduce the behavior:

1. Create workspace: npx create-nx-workspace@15

   Package based monorepo

2. Install Angular: npm install -D @nrwl/angular@15
3. Create UI: nx g @nrwl/angular:app ui

   With routing

4. Install Electron: npm install -D nx-electron
5. Create backend: nx g nx-electron:app be --frontendProject=ui
6. Change href to ./ in ./packages/ui/src/index.html
7. Add useHash: true to RouterModule configuration in ./packages/ui/src/app/app.module.ts
8. Remove line 36 from ./packages/be/src/app/events/update.events.ts, incompatible types. (type: 'info' is not supported)
9. Build UI: nx build ui
10. Build backend: nx build be
11. Start app: nx serve be

asset main.js 17.4 KiB [compared for emit] (name: main) 1 related asset
asset main.preload.js 3.8 KiB [compared for emit] (name: main.preload) 1 related asset
asset assets/gitkeep_tmpl_ 13 bytes [compared for emit] [from: packages/be/src/assets/gitkeep_tmpl_] [copied]
runtime modules 1.83 KiB 8 modules
built modules 8.59 KiB [built]
  cacheable modules 8.42 KiB
    modules by path ./packages/be/src/app/ 7.44 KiB
      modules by path ./packages/be/src/app/events/*.ts 2.63 KiB 2 modules
      modules by path ./packages/be/src/app/*.ts 4.61 KiB 2 modules
      ./packages/be/src/app/api/main.preload.ts 206 bytes [built] [code generated]
    ./packages/be/src/main.ts 918 bytes [built] [code generated]
    ./packages/be/src/environments/environment.ts 91 bytes [built] [code generated]
  external "electron" 42 bytes [built] [code generated]
  external "child_process" 42 bytes [built] [code generated]
  external "path" 42 bytes [built] [code generated]
  external "url" 42 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 721 ms
Type-checking in progress...

Debugger listening on ws://127.0.0.1:5858/a38d5b07-aba8-4350-983b-b4b6f55e1f0c
For help, see: https://nodejs.org/en/docs/inspector

No errors found.
(node:4940) electron: Failed to load URL: http://localhost:4200/ with error: ERR_CONNECTION_REFUSED
(Use electron --trace-warnings ... to show where the warning was created)

The Electron window shows an empty white page.
Something must be wrong but I don't know what. I hope somebody can help me.

Expected behavior
Electron window shows Angular starter page.

Desktop (please complete the following information):

• OS: Windows 10
• Nx Electron Version 15.0.0
• Nrwl Angular Version 15.9.4
• Nx Version 15.9.4
• NodeJS Version 18.16.0

Additional context
Folder structure:

[andyImatest]

I've noticed this same issue recently after upgrading to Node v18. I get around it by trapping uncaught exceptions and carrying on, and eventually the browser window loads, but it is annoying!

I set up this handler before creating the BrowserWindow instance:

    process.on('uncaughtException', function (err) {
        console.error(err);
    });

This never happened with Node 14 or 16.

[awn70]

I'm on Node 18.16.0.
The problem is still the same, no console output.
I'm thinking about my project setup steps 1-5 and the folder structure. Is this the right way or is something wrong with it?

[bennymeg]

If you can help with a solution or some more information about this issue on node 18 that would help a lot.

[awn70]

I can't do more than describe how to reproduce the error. I don't have a solution for it. :-( This should be my first nx/angular project.

[MrTob]

you have to start the frontend-app then start the electron instance