diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts index aab9fee8fb..ff7bf625e0 100644 --- a/packages/angular_devkit/build_angular/src/dev-server/index.ts +++ b/packages/angular_devkit/build_angular/src/dev-server/index.ts @@ -144,15 +144,14 @@ export function serveWebpackBrowser( options.port = port; // 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. @@ -338,7 +337,7 @@ function _addLiveReload( options: DevServerBuilderSchema, browserOptions: BrowserBuilderSchema, webpackConfig: webpack.Configuration, - clientAddress: string, + clientAddress: url.UrlWithStringQuery, logger: logging.LoggerApi, ) { if (webpackConfig.plugins === undefined) { @@ -353,7 +352,14 @@ function _addLiveReload( } 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';