feat(@angular/build): add process.env.PORT support to the dev server

Make possible to set the dev server port via `process.env.PORT`.

BREAKING CHANGE: The `@angular/build:dev-server (ng serve)` now assigns the highest priority to the `PORT` environment variable. This value will override any port configurations specified in `angular.json` or via the `--port` command-line flag. This includes the default port 4200.

Resolves #32236

Author: hawkgs

packages/angular/build/src/builders/dev-server/options.ts

@@ -86,10 +86,20 @@ export async function normalizeOptions(
     }
   }
 
+  let port = options.port ?? 4200;
+  // Overwrite port, if process.env.PORT is available.
+  if (process.env.PORT) {
+    const envPort = Number(process.env.PORT);
+
+    if (!isNaN(envPort)) {
+      port = envPort;
+      logger.info(`Environment variable "PORT" detected. Using port ${envPort}.`);
+    }
+  }
+
   // Initial options to keep
   const {
     host,
-    port,
     poll,
     open,
     verbose,
@@ -111,7 +121,7 @@ export async function normalizeOptions(
   return {
     buildTarget,
     host: host ?? 'localhost',
-    port: port ?? 4200,
+    port,
     poll,
     open,
     verbose,

packages/angular/build/src/builders/dev-server/tests/options/port_spec.ts

@@ -42,7 +42,7 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
         port: undefined,
       });
 
-      const { result, response, logs } = await executeOnceAndFetch(harness, '/');
+      const { result, response } = await executeOnceAndFetch(harness, '/');
 
       expect(result?.success).toBeTrue();
       expect(getResultPort(result)).toBe('4200');
@@ -55,7 +55,7 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
         port: 0,
       });
 
-      const { result, response, logs } = await executeOnceAndFetch(harness, '/');
+      const { result, response } = await executeOnceAndFetch(harness, '/');
 
       expect(result?.success).toBeTrue();
       const port = getResultPort(result);
@@ -73,11 +73,30 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
         port: 8000,
       });
 
-      const { result, response, logs } = await executeOnceAndFetch(harness, '/');
+      const { result, response } = await executeOnceAndFetch(harness, '/');
 
       expect(result?.success).toBeTrue();
       expect(getResultPort(result)).toBe('8000');
       expect(await response?.text()).toContain('<title>');
     });
+
+    it('should be overwritten by process.env.PORT if it exists', async () => {
+      try {
+        harness.useTarget('serve', {
+          ...BASE_OPTIONS,
+          port: 8000,
+        });
+
+        process.env.PORT = '4201';
+
+        const { result, response } = await executeOnceAndFetch(harness, '/');
+
+        expect(result?.success).toBeTrue();
+        expect(getResultPort(result)).toBe('4201');
+        expect(await response?.text()).toContain('<title>');
+      } finally {
+        delete process.env.PORT;
+      }
+    });
   });
 });