Angular SSR 17 in Firebase - listen EADDRINUSE: address already in use 8080 Fix

In your server.ts file, you can adjust how the port variable is set. It appears that the PORT environment variable is already being utilized, causing conflicts.

🟣 Here's the solution:

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';
// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();
  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
  const browserDistFolder = resolve(serverDistFolder, '../browser');
  const indexHtml = join(serverDistFolder, 'index.server.html');
  const commonEngine = new CommonEngine();
  server.set('view engine', 'html');
  server.set('views', browserDistFolder);
  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(browserDistFolder, {
    maxAge: '1y'
  }));
  // All regular routes use the Angular engine
  server.get('*', (req, res, next) => {
    const { protocol, originalUrl, baseUrl, headers } = req;
    commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
      })
      .then((html) => res.send(html))
      .catch((err) => next(err));
  });
  return server;
}
function run(): void {
  const port = process.env['NG_SSR_PORT'] || 4000; // Updated to use NG_SSR_PORT or hardcoded value
  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}
run();

While the exact root cause of this issue isn't clear, adjusting the environment variable name or directly setting the port value can often resolve the "address already in use" error. This tweak ensures your Angular SSR application runs smoothly on Firebase without port conflicts.

If you're facing similar deployment challenges with Angular SSR 17 in Firebase, give this workaround a try and streamline your development process.

Thanks to 9kubczas4 for the solution! ❤️