Angular Universal dev:ssr doesn't work after upgrade to v12.3.5

[maxisam]

Current Behavior

showing error like

E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:159518
                        throw error;
                        ^

Error: listen EADDRINUSE: address already in use :::26745
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)
    at listenInCluster (net.js:1366:12)
    at Server.listen (net.js:1452:7)
    at Function.listen (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:126804:24)
    at run (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:162510:12)
    at E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:162517:5
    at E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:162521:3
    at Object.<anonymous> (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:162526:12)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1345:8)
    at ZoneDelegate.invokeTask (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:159742:31)
    at Zone.runTask (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:159514:47)
    at invokeTask (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:159823:34)
    at ZoneTask.invoke (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:159812:48)
    at data.args.<computed> (E:\repo\oss\nx-angular-universal\dist\my-app\server\main.js:160283:25)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'EADDRINUSE',
  errno: -4091,
  syscall: 'listen',
  address: '::',
  port: 26745
}

A server error has occurred.
node exited with 1 code.

Steps to Reproduce

demo repo : https://github.com/maxisam/nx-ng-ssr-12

If you revert it back to 11. (7f8d5ab17448a015ecfd4249f9f52a744d3fd871) it works.

Environment

node 14.16.1
windows: 10

[maxisam]

It works with 12.2.0

https://github.com/maxisam/nx-ng-ssr-12/tree/nx-12.0.0

I think it somehow run node server twice or something. The good thing is it is easy to workaround this issue.

Just change something, it will trigger rebuild again and serve correctly.

[leosvelperez]

Thanks for reporting this!

Could you please retry with the latest version? There was an issue with the Angular CLI and Windows causing the build to trigger multiple times. That was resolved in version 12.0.2 of the Angular CLI. Make sure you have your Angular dependencies on 12.0.2 or later to get the fix.

[maxisam]

nope. It doesn't work in 12.0.4. I have checked that thread. The symptoms is just like what they said.

The worse part is the workaround doesn't work with 12.0.5. I have to revert back to 12.0.4

[maxisam]

Well, guess what it is fixed by Angular 12.1.0
But I think there is still an issue.

It still throws an error like this

"payload":{"code":"EADDRINUSE","errno":-4091,"syscall":"listen","address":"::","port":15196},"msg":"error caused exit"

However, everything works as far as I know

[leosvelperez]

@maxisam I've been unable to reproduce this issue. I set up a VM with Windows to test it and I did see the immediate rebuild after the initial build, but I didn't get the error you're showing as you can see in the following screenshot:

I tested it with this environment:

Node : 14.17.1
OS : win32 x64
yarn : 1.22.10

I used the repo you shared https://github.com/maxisam/nx-ng-ssr-12 on the branch nx-12.3.5. One thing I noticed (though it didn't have an impact on this issue) is that the @nguniversal/* packages are on version ^11.1.0 and they should be on the same major version as the rest of the angular packages.

[maxisam]

Well, I am on Node 14.17.1 / Win10 x64 / yarn 1.22.5 with fresh yarn install. I use the nx-12.3.5 branch and update nguniversal to 12. (I just update the repo) And I still see the same error.

[leosvelperez]

I don't doubt you're facing the issue, but I'm unable to reproduce it. As I shared in my previous comment, I used that branch with a fresh yarn install as well as updating the @nguniversal/* deps and the result was what I shared above.

The only differences from what you're saying are that my Yarn version is a 1.22.10 vs 1.22.5 and that I'm running a VM with Windows 10, but that should be the same as using an actual Windows laptop.

Unfortunately without a way to reproduce it, I can't do much more.

I guess one thing we can try to discard is if this happens in an Angular CLI workspace or if it's only on an Nx workspace.

To do that, please use the failing branch in the provided repo and replace the following in the package.json:

"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",

with:

"postinstall": "ngcc --properties es2015 browser module main",

Then, delete your node_modules and install them again.

Now you can run using the Angular CLI instead of Nx. Please run yarn dev:ssr or ng run my-app:serve-ssr and see if you still get the issue.

[maxisam]

I update the repo and use npm 7.19.0 https://github.com/maxisam/nx-ng-ssr-12/tree/nx-12.3.5. The error is still there.

[leosvelperez]

The npm version shouldn't be a factor here unless it resolves different packages versions which I don't think is the case. Can you stay with yarn and do the steps I outlined in the previous comment to see if the error happens with the Angular CLI?

[maxisam]

I was afraid different version of yarn might resolve different package, that is why I switch to npm. (I don't want to update yarn right now.) It does show the error with your step. The worse part., it doesn't work with 12.1.0. in that example repo. (But it works on my real one.) I think I probably will create another repo to test this.

[leosvelperez]

It's fine, I don't think the package manager matters here. I wanted to discard if this was an Nx specific issue or if it's something that happens with the Angular CLI. If I understood correctly, you are saying the error still happens when running with just the Angular CLI. If that's the case and you can put together a minimal repro with the Angular CLI (ng new <name>), the better place to get this solved would be in the Angular CLI repo.

[maxisam]

@leosvelperez I think you are right

https://github.com/maxisam/NG12-SSR-TEST

When I run this repo which is brand new ng new + ssr, it shows alright first but as soon as you change something, it throws error.

I think the bug is from Angular.

[leosvelperez]

I see, at least we were able to determine that, I'm sorry I couldn't help more, it's difficult without being able to reproduce it. You can create an issue on the Angular CLI repo posting that reproduction and you can update this thread with a link to that issue so anyone encountering this one can follow it for updates.

I'm closing this one since it doesn't seem to be an Nx issue. If you still think it is, please feel free to reopen it.

[adeprez]

@maxisam I am facing the same issue. Do you have any workaround? Or were you able to find a couple of versions working well together? (12 <= ng < 13)

If you created an issue in a Angular repo, can you paste a link to it?

[maxisam]

@adeprez The workaround is using Linux environment to run it. I kinda lost track on this one. Sorry about that.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.