fix(@angular-devkit/build-angular): dev-server port number mismatches in logs when using port=0

Fixes #14499

Author: Alan

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -195,10 +195,9 @@ export function serveWebpackBrowser(
 
           if (first) {
             first = false;
-
             context.logger.info(tags.oneLine`
               **
-              Angular Live Development Server is listening on ${options.host}:${options.port},
+              Angular Live Development Server is listening on ${options.host}:${buildEvent.port},
               open your browser on ${serverAddress}
               **
             `);

packages/angular_devkit/build_angular/test/dev-server/works_spec_large.ts

@@ -67,4 +67,29 @@ describe('Dev Server Builder', () => {
     expect(res).not.toContain('This file is automatically generated during release.');
     expect(res).toContain('<title>HelloWorldApp</title>');
   });
+
+  it('works with port 0', async () => {
+    const logger = new logging.Logger('');
+    const logs: string[] = [];
+    logger.subscribe(e => logs.push(e.message));
+
+    const run = await architect.scheduleTarget(target, { port: 0 }, { logger });
+    runs.push(run);
+    const output = await run.result as DevServerBuilderOutput;
+    expect(output.success).toBe(true);
+
+    const groups = logs.join().match(/\:(\d+){4,6}/g);
+    if (!groups) {
+      throw new Error('Expected log to contain port number.');
+    }
+
+    // tests that both the ports in the logs are the same.
+    const [firstPort, secondPort] = groups;
+    expect(firstPort).toBe(secondPort);
+
+    expect(output.baseUrl).toBe(`http://localhost${firstPort}/`);
+    const response = await fetch(`http://localhost${firstPort}/index.html`);
+    expect(await response.text()).toContain('<title>HelloWorldApp</title>');
+  });
+
 });