Protractor builder should use dev server supplied baseUrl when available

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

@@ -81,7 +81,6 @@ export function serveWebpackBrowser(
   const browserTarget = targetFromTargetString(options.browserTarget);
   const root = context.workspaceRoot;
   let first = true;
-  let openAddress: string;
   const host = new NodeJsSyncHost();
 
   const loggingFn = transforms.logging
@@ -152,15 +151,6 @@ export function serveWebpackBrowser(
         options.publicHost = clientAddress.host;
       }
 
-      // Resolve serve address.
-      const serverAddress = url.format({
-        protocol: options.ssl ? 'https' : 'http',
-        hostname: options.host === '0.0.0.0' ? 'localhost' : options.host,
-        // Port cannot be undefined here since we have a step that sets it back in options above.
-        // tslint:disable-next-line:no-non-null-assertion
-        port: options.port !.toString(),
-      });
-
       // Add live reload config.
       if (options.liveReload) {
         _addLiveReload(options, browserOptions, webpackConfig, clientAddress, context.logger);
@@ -193,24 +183,34 @@ export function serveWebpackBrowser(
         `);
       }
 
-      context.logger.info(tags.oneLine`
-        **
-        Angular Live Development Server is listening on ${options.host}:${options.port},
-        open your browser on ${serverAddress}${webpackDevServerConfig.publicPath}
-        **
-      `);
-
-      openAddress = serverAddress + webpackDevServerConfig.publicPath;
-
-      return runWebpackDevServer(webpackConfig, context, { logging: loggingFn });
-    }),
-    map(buildEvent => {
-      if (first && options.open) {
-        first = false;
-        open(openAddress);
-      }
-
-      return { ...buildEvent, baseUrl: openAddress } as DevServerBuilderOutput;
+      return runWebpackDevServer(webpackConfig, context, { logging: loggingFn }).pipe(
+        map(buildEvent => {
+          // Resolve serve address.
+          const serverAddress = url.format({
+            protocol: options.ssl ? 'https' : 'http',
+            hostname: options.host === '0.0.0.0' ? 'localhost' : options.host,
+            pathname: webpackDevServerConfig.publicPath,
+            port: buildEvent.port,
+          });
+
+          if (first) {
+            first = false;
+
+            context.logger.info(tags.oneLine`
+              **
+              Angular Live Development Server is listening on ${options.host}:${options.port},
+              open your browser on ${serverAddress}
+              **
+            `);
+
+            if (options.open) {
+              open(serverAddress);
+            }
+          }
+
+          return { ...buildEvent, baseUrl: serverAddress } as DevServerBuilderOutput;
+        }),
+      );
     }),
   );
 }

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

@@ -140,6 +140,8 @@ async function execute(
       }
       const clientUrl = url.parse(publicHost);
       baseUrl = url.format(clientUrl);
+    } else if (typeof result.baseUrl === 'string') {
+      baseUrl = result.baseUrl;
     } else if (typeof result.port === 'number') {
       baseUrl = url.format({
         protocol: serverOptions.ssl ? 'https' : 'http',

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

@@ -81,4 +81,20 @@ describe('Protractor Builder', () => {
     await run.stop();
   }, 30000);
 
+  it('supports dev server builder with browser builder base HREF option', async () => {
+    host.replaceInFile(
+      'angular.json',
+      '"main": "src/main.ts",',
+      '"main": "src/main.ts", "baseHref": "/base/",',
+    );
+    // Need to reset architect to use the modified config
+    architect = (await createArchitect(host.root())).architect;
+
+    const run = await architect.scheduleTarget(protractorTargetSpec);
+
+    await expectAsync(run.result).toBeResolvedTo(jasmine.objectContaining({ success: true }));
+
+    await run.stop();
+  }, 30000);
+
 });