Universal: ECONNREFUSED 127.0.0.1:53233 when running "serve-ssr" from @nguniversal/builders

[mmeylan]

We are using Angular Universal in production and are very happy with it. We want to work with server side rendering all the way down to our day-to-day development lifecycle and have chosen to use the @nguniversal/builders package to do that.

Unfortunately, since upgrading to Angular 10.x and @nguniversal/builders 10.x, the schematic serve-ssr from @nguniversal/builders fails with the following error:

connect ECONNREFUSED 127.0.0.1:55304

🐞 Bug report

What modules are related to this issue?

• [ ] aspnetcore-engine
• [x] builders
• [ ] common
• [ ] express-engine
• [ ] hapi-engine

Is this a regression?

Yes, this did not happen with Angular 9.x and @nguniversal/builders 9.x but it now happens with version 10.x.

Description

After a lot of debugging, I've found a curious behavior: It seems as though the node net server created by @nguniversal/builders succesfully starts to listen, but after a few seconds shuts down silently. I've recorded this behavior and it can be seen in this short video.

Context:

• Right-side terminal is watching all ports being listened to locally
• Left side terminal is the server-ssr command being executed
• At the beginning of the build, a port is opened by node (55304)
• After a few seconds, node stops listening on 55304 silently
• Once the build (browser and server) succeeds, my SSR server successfully starts on 4200
• The "builder process" now tries to connect to 55304 but it's no longer there, thus failing the command with connect ECONNREFUSED 127.0.0.1:55304

Curiously, the command works when setting "inspect": true in the config of @nguniversal/builders (angular.json). This forces us to connect a debugger to the process though, and isn't very developer friendly.

🔬 Minimal Reproduction

Unfortunately, I don't have a reproduction environment.

🔥 Exception or Error

connect ECONNREFUSED 127.0.0.1:55304

🌍 Your Environment

Angular CLI: 10.1.2
Node: 12.18.2
OS: darwin x64

Angular: 10.1.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.2
@angular-devkit/build-angular   0.1001.2
@angular-devkit/core            10.1.2
@angular-devkit/schematics      10.1.2
@nguniversal/builders           10.1.0
@nguniversal/express-engine     10.1.0
@schematics/angular             10.1.2
@schematics/update              0.1001.2
rxjs                            6.6.3
typescript                      4.0.2

This is maybe related to https://github.com/angular/universal/issues/1796

[danieldanielecki]

Hey, you're not alone. I can confirm that when upgrading Angular 8 to 10 I could face exactly same issue once trying to run with the new server-ssr schematic.

[fischermatte]

This is indeed a very annoying bug: It makes local development with SSR almost impossible since one has to rebuild the full prod bundle on each change.

[Avcajaraville]

I stumbled upon this issue while having the same error. Then what I did was to follow this project which showcases an integration between universal and angular 9 (though, I'm using angular 10).

Anyway, as I was coming from angular 7 (maybe you are migrating as well), I notice a quite dramatic change inside angular.json, architect server, the options.main property now points to the actual express server, before angular 9, I believe the setup was to point to src/main.server.ts, the file that exposes the AppServerModule.

This fixed my issue, maybe it helps as well :)

[vmasek]

As @Avcajaraville written, I also recommend checking your project against the universal starter.

This is an error related to bad SSR setup/structure.

My flow was to check (Yours can be different, but in general it should match):

• "architect"."server" angular.json
  
  
  
  • "main" has to be "server.ts" not "src/main.server.ts"
  
  
• ngExpressEngine server.ts
  
  
  
  • get rid of the require for ngExpressEngine, AppServerModuleNgFactory, LAZY_MODULE_MAP orprovideModuleMap. It should not be "required" anymore. It has different syntax now.
  
  
  • your ngExpressEngine should bootstrap: AppServerModule with module imported from server main.server file import { AppServerModule } from './src/main.server';
  
  
• main.server.ts shouldn't contain unnecessary stuff but it should export the AppServerModule
• your [tsconfig.server.json]https://github.com/Angular-RU/universal-starter/blob/master/src/tsconfig.server.json should have server.ts in the "files"