Angular SSR 17 in Firebase : listen EADDRINUSE: address already in use :::8080 #6651

alexcibotari · 2023-12-29T20:30:30Z

[REQUIRED] Environment info

firebase-tools: 13.0.2

Platform: Windows, Linux

[REQUIRED] Test case

I deploy a fully workable version from the emulator in Firebase Functions of the Angular SSR application.

[REQUIRED] Steps to reproduce

Enabled experiment webframeworks.
Create an application angular ssr from cli with standalone componenet
run it locally
deploy it in the firebase.
During Local build I have next warning

▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/auth/dist/node-esm/index.js' is not ESM
▲ [WARNING] Module '@grpc/grpc-js' used by 'node_modules/@firebase/firestore/dist/index.node.mjs' is not ESM
▲ [WARNING] Module '@grpc/proto-loader' used by 'node_modules/@firebase/firestore/dist/index.node.mjs' is not ESM
▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/functions/dist/esm-node/index.node.esm.js' is not ESM
▲ [WARNING] Module 'undici' used by 'node_modules/@firebase/storage/dist/node-esm/index.node.esm.js' is not ESM
  CommonJS or AMD dependencies can cause optimization bailouts.
  For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies

[REQUIRED] Expected behavior

Should work exactly as in the emulator.

[REQUIRED] Actual behavior

SSR Page returns: Service Unavailable

Logs

Default STARTUP TCP probe succeeded after 1 attempt for container "ssr-project-name-1" on port 8080.

Uncaught exception

Error: listen EADDRINUSE: address already in use :::8080
    at Server.setupListenHandle [as _listen2] (node:net:1872:16)
    at listenInCluster (node:net:1920:12)
    at Server.listen (node:net:2008:7)
    at te.listen (file:///workspace/dist/ssr-project-name/server/server.mjs:81:3210)

at $k (file:///workspace/dist/ssr-project-name/server/server.mjs:99:5579)
at file:///workspace/dist/ssr-project-name/server/server.mjs:99:5665
at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
 at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)

Error: Process exited with code 16
    at process.<anonymous> (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:92:22)
    at process.emit (node:events:514:28)
    at process.emit (node:domain:488:12)
    at process.exit (node:internal/process/per_thread:193:15)
    at sendCrashResponse (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/logger.js:44:9)
    at process.<anonymous> (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:84:44)
    at process.emit (node:events:526:35)
    at process.emit (node:domain:488:12)
    at process._fatalException (node:internal/process/execution:159:25)

hittten · 2024-01-02T20:57:42Z

I have the same problem, I have published a repo with the minimum to recreate the SSR problem with angular 17: https://github.com/hittten/angularSSR17

Clone & Setup:

git clone https://github.com/hittten/angularSSR17
npm install
npx firebase init hosting

Logs:

=== Account Setup

Which account do you want to use for this project? Choose an account or add a new one now

? Please select an option: xxx@xxx.com

✔  Using account: xxx@xxx.com

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: xxxxxxx(xxxxxxx)
i  Using project xxxxxxx (xxxxxxx)

=== Hosting Setup
? Detected an existing Angular codebase in the current directory, should we use this? Yes
? In which region would you like to host server-side content, if applicable? europe-west1 (Belgium)
? Set up automatic builds and deploys with GitHub? No

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

Deploy to firebase hosting with SSR function

npx firebase deploy

Server logs:

Error: listen EADDRINUSE: address already in use :::8080
    at Server.setupListenHandle [as _listen2] (node:net:1872:16)
    at listenInCluster (node:net:1920:12)
    at Server.listen (node:net:2008:7)
    at te.listen (file:///workspace/dist/angular-ssr17/server/server.mjs:81:3210)

Error: Process exited with code 16
    at process.<anonymous> (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:92:22)
    at process.emit (node:events:514:28)
    at process.emit (node:domain:488:12)
    at process.exit (node:internal/process/per_thread:193:15)
    at sendCrashResponse (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/logger.js:44:9)
    at process.<anonymous> (/layers/google.nodejs.functions-framework/functions-framework/node_modules/@google-cloud/functions-framework/build/src/invoker.js:84:44)
    at process.emit (node:events:526:35)
    at process.emit (node:domain:488:12)
    at process._fatalException (node:internal/process/execution:159:25)

{
  "textPayload": "The request failed because either the HTTP response was malformed or connection to the instance had an error. Additional troubleshooting documentation can be found at: https://cloud.google.com/run/docs/troubleshooting#malformed-response-or-connection-error",
  "insertId": "659475b700062cb90f40d1e3",
  "httpRequest": {
    "requestMethod": "GET",
    "requestUrl": "https://fh-8d3e45905df6630b---ssrfirebase-project-ou4f5ridea-ew.a.run.app/home",
    "requestSize": "1456",
    "status": 503,
    "responseSize": "896",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
    "remoteIp": "xx.xx.xx.xx",
    "serverIp": "xx.xx.xx.xx",
    "latency": "0.003751506s",
    "protocol": "HTTP/1.1"
  },
  "resource": {
    "type": "cloud_run_revision",
    "labels": {
      "revision_name": "ssrfirebase-project-00049-suv",
      "service_name": "ssrfirebase-project",
      "location": "europe-west1",
      "configuration_name": "ssrfirebase-project",
      "project_id": "firebase-project"
    }
  },
  "timestamp": "2024-01-02T20:44:39.398780Z",
  "severity": "ERROR",
  "labels": {
    "instanceId": "0087599d42b9441d6d09db1939ddd4cf4272e2926a4f28f80a4a7435e09c496814eec2631eed5c4f41d11da415f43dbdd4584eebf9300d2775bc6e376358218de7",
    "goog-managed-by": "cloudfunctions"
  },
  "logName": "projects/firebase-project/logs/run.googleapis.com%2Frequests",
  "trace": "projects/firebase-project/traces/2cbddcb349eb67f0b870211ea2050942",
  "receiveTimestamp": "2024-01-02T20:44:39.688582619Z",
  "spanId": "15678518055140550732"
}

Info

basically I have created a project like this:

npx @angular/cli@17.0.8 new angularSSR17 --ssr --routing --scss --skip-tests
cd angularSSR17
npm i -D firebase-tools@13.0.2
ng g c pages/homePage
ng g c pages/aboutPage
ng g c pages/notFoundPage

I also disable pre-render in angular.json:

{
    "scripts": [],
    "server": "src/main.server.ts",
    "prerender": false,
    "ssr": {
      "entry": "server.ts"
    }
}

and I have done the settings of the routes for lazy load. I have not installed @angular/fire because it is not necessary to recreate the SSR error.

ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.0.8
Node: 20.10.0
Package Manager: npm 10.2.5
OS: darwin arm64

Angular: 17.0.8
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.8
@angular-devkit/build-angular   17.0.8
@angular-devkit/core            17.0.8
@angular-devkit/schematics      17.0.8
@schematics/angular             17.0.8
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

firebase-tools version:

13.0.2

9kubczas4 · 2024-01-08T18:53:41Z

Hi @hittten,

I discovered a workaround that can be applied to the code of an Angular application.
For example in the server.ts, https://github.com/hittten/angularSSR17/blob/2ed948581d32b20b45c66e8c4f4f72046d9a5cf4/server.ts#L46-L54 adjust a way of setting port variable. It looks like the PORT environment variable is already used. The solution could be:

const port = process.env['NG_SSR_PORT'] || 4000; // change the environment variable name
const port = 4000; // hardcode the port value without using environment variable

I don't know what exactly is the root cause, but as I mentioned it looks like PORT environment variable is already used.

mvergarair · 2024-01-12T17:20:00Z

Getting the same error:

Error: listen EADDRINUSE: address already in use :::8080
    at Server.setupListenHandle [as _listen2] (node:net:1817:16)
    at listenInCluster (node:net:1865:12)
    at Server.listen (node:net:1953:7)
    at te.listen (file:///workspace/dist/lucas-app/server/server.mjs:81:3210)
    at Mk (file:///workspace/dist/lucas-app/server/server.mjs:99:5579)
    at file:///workspace/dist/lucas-app/server/server.mjs:99:5665
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:336:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:429:15)

rdlabo · 2024-01-19T09:34:03Z

const port = process.env['NG_SSR_PORT'] || 4000; // change the environment variable name

const port = 4000; // hardcode the port value without using environment variable

I don't know what exactly is the root cause, but as I mentioned it looks like PORT environment variable is already used.

@9kubczas4 Thanks for information. This works well!

Add info:

If you deploy index.html, Functions will not work and must be IGNORED.

  {
    "source": ".",
    "frameworksBackend": {
      "region": "asia-east1"
    },
    "ignore": [
+    "index.html",

JGSolutions · 2024-01-21T14:17:47Z

@rdlabo thanks. Removing this process.env['NG_SSR_PORT'] worked

But will this be fixed in future releases in angular

MoCodeCom · 2024-01-26T12:29:46Z

Thank you for your comment, but in which file can I find it?

{
"source": ".",
"frameworksBackend": {
"region": "asia-east1"
},
"ignore": [

"index.html",

MoCodeCom · 2024-01-26T12:30:27Z

const port = process.env['NG_SSR_PORT'] || 4000; // change the environment variable name

const port = 4000; // hardcode the port value without using environment variable

I don't know what exactly is the root cause, but as I mentioned it looks like PORT environment variable is already used.

@9kubczas4 Thanks for information. This works well!

Add info:

If you deploy index.html, Functions will not work and must be IGNORED.
  {
    "source": ".",
    "frameworksBackend": {
      "region": "asia-east1"
    },
    "ignore": [
+    "index.html",

Thank you for your comment, but in which file can I find it? to make an addition

gguy0406 · 2024-02-20T02:56:45Z

Reserved environment variables are listed here: https://firebase.google.com/docs/functions/config-env?gen=2nd#reserved-names

gguy0406 · 2024-02-20T03:10:21Z

// In cloud functions bootstrap.js
const app = import(`./dist/project/server/server.mjs`).then(server => server.app());
exports.handle = (req, res) => app.then(it => it(req, res));

It appears that the run() function generated by Angular CLI is unnecessary. I use an firebase instance in my backend, it seems to execute firebase initializeApp() twice, leading to an error.

hittten · 2024-02-22T20:44:34Z

@9kubczas4 your workaround works perfectly.

Any update about this? this issue doesn't happen in angular 16.

makss68 · 2024-03-11T20:29:40Z

Same problem here. Any news ?

Rename the SSR port env variable to SSR_PORT. It could help to resolve this firebase issue: firebase/firebase-tools#6651 (comment), cause PORT is reserved environment variable: https://firebase.google.com/docs/functions/config-env?gen=2nd#reserved-names.

9kubczas4 · 2024-03-22T16:48:27Z

Please for now try to apply this workaround for Angular 17: #6651 (comment).

I created a fix in angular-cli - angular/angular-cli#27333, once it's merged then it'll be available in one of the future Angular releases.

Rename the SSR port env variable to SSR_PORT. It could help to resolve this firebase issue: firebase/firebase-tools#6651 (comment), cause PORT is reserved environment variable: https://firebase.google.com/docs/functions/config-env?gen=2nd#reserved-names.

Rename the SSR port env variable to SSR_PORT. It could help to resolve this firebase issue: firebase/firebase-tools#6651 (comment), cause PORT is reserved environment variable: https://firebase.google.com/docs/functions/config-env?gen=2nd#reserved-names. (cherry picked from commit 950a445)

alexcibotari added the type: bug label Dec 29, 2023

aalej added the integration: web frameworks label Jan 1, 2024

leoortizz mentioned this issue Mar 1, 2024

Firebase Functions Don't Work With Angular Deployment #6829

Closed

DimitriTsikaridze mentioned this issue Mar 3, 2024

2 subdomains which use web frameworks will cause Error: listen EADDRINUSE: address already in use :::8080 #6760

Closed

9kubczas4 self-assigned this Mar 21, 2024

alan-agius4 mentioned this issue Mar 22, 2024

fix(@schematics/angular): rename SSR port env variable angular/angular-cli#27333

Merged

13 tasks

9kubczas4 mentioned this issue Apr 9, 2024

fix: throw an error when server.ts calls run function #6977

Closed

9kubczas4 mentioned this issue Aug 13, 2024

fix: temporary change the PORT in Angular server.ts #7556

Merged

rlueder mentioned this issue Aug 25, 2024

Error: listen EADDRINUSE: address already in use :::5000 #2585

Closed

9kubczas4 closed this as completed in #7556 Sep 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular SSR 17 in Firebase : listen EADDRINUSE: address already in use :::8080 #6651

Angular SSR 17 in Firebase : listen EADDRINUSE: address already in use :::8080 #6651

alexcibotari commented Dec 29, 2023 •

edited

Loading

hittten commented Jan 2, 2024

9kubczas4 commented Jan 8, 2024

mvergarair commented Jan 12, 2024

rdlabo commented Jan 19, 2024

JGSolutions commented Jan 21, 2024 •

edited

Loading

MoCodeCom commented Jan 26, 2024

MoCodeCom commented Jan 26, 2024

gguy0406 commented Feb 20, 2024

gguy0406 commented Feb 20, 2024 •

edited

Loading

hittten commented Feb 22, 2024

makss68 commented Mar 11, 2024

9kubczas4 commented Mar 22, 2024

Angular SSR 17 in Firebase : listen EADDRINUSE: address already in use :::8080 #6651

Angular SSR 17 in Firebase : listen EADDRINUSE: address already in use :::8080 #6651

Comments

alexcibotari commented Dec 29, 2023 • edited Loading

[REQUIRED] Environment info

[REQUIRED] Test case

[REQUIRED] Steps to reproduce

[REQUIRED] Expected behavior

[REQUIRED] Actual behavior

hittten commented Jan 2, 2024

Clone & Setup:

Logs:

Deploy to firebase hosting with SSR function

Server logs:

Info

ng version

firebase-tools version:

9kubczas4 commented Jan 8, 2024

mvergarair commented Jan 12, 2024

rdlabo commented Jan 19, 2024

JGSolutions commented Jan 21, 2024 • edited Loading

MoCodeCom commented Jan 26, 2024

MoCodeCom commented Jan 26, 2024

gguy0406 commented Feb 20, 2024

gguy0406 commented Feb 20, 2024 • edited Loading

hittten commented Feb 22, 2024

makss68 commented Mar 11, 2024

9kubczas4 commented Mar 22, 2024

alexcibotari commented Dec 29, 2023 •

edited

Loading

JGSolutions commented Jan 21, 2024 •

edited

Loading

gguy0406 commented Feb 20, 2024 •

edited

Loading