feat(@angular-devkit/build-angular): add support for port 0 when using protractor

etc/api/angular_devkit/architect/src/index.d.ts

@@ -63,7 +63,8 @@ export interface BuilderPathsMap {
     };
 }
 
-export interface BuildEvent {
+export interface BuildEvent<BuildResultT = any> {
+    result?: BuildResultT;
     success: boolean;
 }
 

packages/angular_devkit/architect/src/architect.ts

@@ -70,8 +70,11 @@ export interface BuilderContext {
 // TODO: use Build Event Protocol
 // https://docs.bazel.build/versions/master/build-event-protocol.html
 // https://github.com/googleapis/googleapis/tree/master/google/devtools/build/v1
-export interface BuildEvent {
+// TODO: use unknown
+// tslint:disable-next-line:no-any
+export interface BuildEvent<BuildResultT = any> {
   success: boolean;
+  result?: BuildResultT;
 }
 
 export interface Builder<OptionsT> {

packages/angular_devkit/build_angular/src/protractor/index.ts

@@ -13,9 +13,10 @@ import {
   BuilderContext,
   BuilderDescription,
 } from '@angular-devkit/architect';
+import { DevServerResult } from '@angular-devkit/build-webpack';
 import { Path, getSystemPath, normalize, resolve, tags } from '@angular-devkit/core';
 import { Observable, from, of } from 'rxjs';
-import { concatMap, take, tap } from 'rxjs/operators';
+import { concatMap, map, take, tap } from 'rxjs/operators';
 import * as url from 'url';
 import { requireProjectModule } from '../angular-cli-files/utilities/require-project-module';
 import { DevServerBuilderOptions } from '../dev-server';
@@ -70,9 +71,15 @@ export class ProtractorBuilder implements Builder<ProtractorBuilderOptions> {
 
     return architect.getBuilderDescription(builderConfig).pipe(
       tap(description => devServerDescription = description),
-      concatMap(devServerDescription => architect.validateBuilderOptions(
-        builderConfig, devServerDescription)),
-      concatMap(() => {
+      concatMap(devServerDescription =>
+        architect.validateBuilderOptions(builderConfig, devServerDescription)),
+      map(() => this.context.architect.getBuilder(devServerDescription, this.context)),
+      concatMap(builder => builder.run(builderConfig)),
+      tap(buildEvent => {
+        if (!buildEvent.success) {
+          return;
+        }
+
         // Compute baseUrl from devServerOptions.
         if (options.devServerTarget && builderConfig.options.publicHost) {
           let publicHost = builderConfig.options.publicHost;
@@ -84,19 +91,18 @@ export class ProtractorBuilder implements Builder<ProtractorBuilderOptions> {
           const clientUrl = url.parse(publicHost);
           baseUrl = url.format(clientUrl);
         } else if (options.devServerTarget) {
+          const result: DevServerResult | undefined = buildEvent.result;
+
           baseUrl = url.format({
             protocol: builderConfig.options.ssl ? 'https' : 'http',
             hostname: options.host,
-            port: builderConfig.options.port.toString(),
+            port: result && result.port.toString(),
           });
         }
 
         // Save the computed baseUrl back so that Protractor can use it.
         options.baseUrl = baseUrl;
-
-        return of(this.context.architect.getBuilder(devServerDescription, this.context));
       }),
-      concatMap(builder => builder.run(builderConfig)),
     );
   }
 

packages/angular_devkit/build_angular/test/protractor/works_spec_large.ts

@@ -60,6 +60,12 @@ describe('Protractor Builder', () => {
     ).toPromise().then(done, done.fail);
   }, 60000);
 
+  it('works with port 0', (done) => {
+    runTargetSpec(host, protractorTargetSpec, { port: 0 }).pipe(
+      retry(3),
+    ).toPromise().then(done, done.fail);
+  }, 30000);
+
   // TODO: test `element-explorer` when the protractor builder emits build events with text.
   // .then(() => execAndWaitForOutputToMatch('ng', ['e2e', '--element-explorer'],
   // /Element Explorer/))

packages/angular_devkit/build_webpack/src/webpack-dev-server/index.ts

@@ -12,20 +12,27 @@ import {
   BuilderConfiguration,
   BuilderContext,
 } from '@angular-devkit/architect';
-import { Path, getSystemPath, normalize, resolve } from '@angular-devkit/core';
+import { getSystemPath, normalize, resolve } from '@angular-devkit/core';
+import * as net from 'net';
 import { Observable, from } from 'rxjs';
 import { concatMap } from 'rxjs/operators';
 import * as webpack from 'webpack';
 import * as WebpackDevServer from 'webpack-dev-server';
 import { LoggingCallback, defaultLoggingCb } from '../webpack';
 import { WebpackDevServerBuilderSchema } from './schema';
 
+export interface DevServerResult {
+  port: number;
+  family: string;
+  address: string;
+}
 
 export class WebpackDevServerBuilder implements Builder<WebpackDevServerBuilderSchema> {
 
   constructor(public context: BuilderContext) { }
 
-  run(builderConfig: BuilderConfiguration<WebpackDevServerBuilderSchema>): Observable<BuildEvent> {
+  run(builderConfig: BuilderConfiguration<WebpackDevServerBuilderSchema>)
+    : Observable<BuildEvent<DevServerResult>> {
     const configPath = resolve(this.context.workspace.root,
       normalize(builderConfig.options.webpackConfig));
 
@@ -42,11 +49,13 @@ export class WebpackDevServerBuilder implements Builder<WebpackDevServerBuilderS
     webpackConfig: webpack.Configuration,
     devServerCfg?: WebpackDevServer.Configuration,
     loggingCb: LoggingCallback = defaultLoggingCb,
-  ): Observable<BuildEvent> {
+  ): Observable<BuildEvent<DevServerResult>> {
     return new Observable(obs => {
       const devServerConfig = devServerCfg || webpackConfig.devServer || {};
       devServerConfig.host = devServerConfig.host || 'localhost';
-      devServerConfig.port = devServerConfig.port || 8080;
+      if (devServerConfig.port == undefined) {
+        devServerConfig.port = 8080;
+      }
 
       if (devServerConfig.stats) {
         webpackConfig.stats = devServerConfig.stats as webpack.Stats.ToStringOptionsObject;
@@ -56,20 +65,26 @@ export class WebpackDevServerBuilder implements Builder<WebpackDevServerBuilderS
 
       const webpackCompiler = webpack(webpackConfig);
       const server = new WebpackDevServer(webpackCompiler, devServerConfig);
+      let result: undefined | DevServerResult;
 
       webpackCompiler.hooks.done.tap('build-webpack', (stats) => {
         // Log stats.
         loggingCb(stats, webpackConfig, this.context.logger);
 
-        obs.next({ success: !stats.hasErrors() });
+        obs.next({ success: !stats.hasErrors(), result });
       });
 
       server.listen(
         devServerConfig.port,
         devServerConfig.host,
-        (err) => {
+        function (err) {
           if (err) {
             obs.error(err);
+          } else {
+            // this is ignored because of ts errors
+            // that this is overshadowed by it's outer contain
+            // @ts-ignore;
+            result = (this as net.Server).address();
           }
         },
       );