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

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

Handles issue #32236.

Author: hawkgs

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

@@ -93,6 +93,16 @@ websocket connection issues.
     `);
   }
 
+  // Overwrite port, if process.env.PORT is available.
+  if (process.env.PORT) {
+    const envPort = Number(process.env.PORT);
+
+    if (!isNaN(envPort)) {
+      normalizedOptions.port = envPort;
+      context.logger.info('process.env.PORT detected. Port set to ' + envPort);
+    }
+  }
+
   normalizedOptions.port = await checkPort(normalizedOptions.port, normalizedOptions.host);
 
   return {

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 () => {
+      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>');
+
+      expect(1).toEqual(2);
+
+      delete process.env.PORT;
+    });
   });
 });