fix(@angular-devkit/build-angular): ensure correct dev server path with public host option

If a custom path is provided the webpack dev server client drops the sockjs-node segment. This adds it back so that behavior is consistent when using a custom URL path.

Fixes angular#13627

Author: clydin

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

@@ -73,15 +73,14 @@ export class DevServerBuilder implements Builder<DevServerBuilderSchema> {
         }
 
         // Resolve public host and client address.
-        let clientAddress = `${options.ssl ? 'https' : 'http'}://0.0.0.0:0`;
+        let clientAddress = url.parse(`${options.ssl ? 'https' : 'http'}://0.0.0.0:0`);
         if (options.publicHost) {
           let publicHost = options.publicHost;
           if (!/^\w+:\/\//.test(publicHost)) {
             publicHost = `${options.ssl ? 'https' : 'http'}://${publicHost}`;
           }
-          const clientUrl = url.parse(publicHost);
-          options.publicHost = clientUrl.host;
-          clientAddress = url.format(clientUrl);
+          clientAddress = url.parse(publicHost);
+          options.publicHost = clientAddress.host;
         }
 
         // Resolve serve address.
@@ -233,7 +232,7 @@ export class DevServerBuilder implements Builder<DevServerBuilderSchema> {
     options: DevServerBuilderSchema,
     browserOptions: NormalizedBrowserBuilderSchema,
     webpackConfig: any, // tslint:disable-line:no-any
-    clientAddress: string,
+    clientAddress: url.UrlWithStringQuery,
   ) {
     // This allows for live reload of page when changes are made to repo.
     // https://webpack.js.org/configuration/dev-server/#devserver-inline
@@ -243,7 +242,14 @@ export class DevServerBuilder implements Builder<DevServerBuilderSchema> {
     } catch {
       throw new Error('The "webpack-dev-server" package could not be found.');
     }
-    const entryPoints = [`${webpackDevServerPath}?${clientAddress}`];
+
+    // If a custom path is provided the webpack dev server client drops the sockjs-node segment.
+    // This adds it back so that behavior is consistent when using a custom URL path
+    if (clientAddress.pathname) {
+      clientAddress.pathname += path.posix.join(clientAddress.pathname, 'sockjs-node');
+    }
+
+    const entryPoints = [`${webpackDevServerPath}?${url.format(clientAddress)}`];
     if (options.hmr) {
       const webpackHmrLink = 'https://webpack.js.org/guides/hot-module-replacement';