feat(@angular-devkit/build-angular): update webpack-dev-server to version 4

BREAKING CHANGE:

The dev-server now uses WebSockets to communicate changes to the browser during HMR and live-reloaded. If during your development you are using a proxy you will need to enable proxying of WebSockets.

package.json

@@ -124,7 +124,7 @@
     "@types/semver": "^7.0.0",
     "@types/text-table": "^0.2.1",
     "@types/uuid": "^8.0.0",
-    "@types/webpack-dev-server": "^3.1.7",
+    "@types/webpack-dev-server": "^4.0.3",
     "@typescript-eslint/eslint-plugin": "4.29.3",
     "@typescript-eslint/parser": "4.29.3",
     "@yarnpkg/lockfile": "1.1.0",
@@ -225,7 +225,7 @@
     "verdaccio-auth-memory": "^10.0.0",
     "webpack": "5.51.1",
     "webpack-dev-middleware": "5.0.0",
-    "webpack-dev-server": "3.11.2",
+    "webpack-dev-server": "4.0.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.0.0",
     "zone.js": "^0.11.3"

packages/angular_devkit/build_angular/package.json

@@ -68,7 +68,7 @@
     "tslib": "2.3.1",
     "webpack": "5.51.1",
     "webpack-dev-middleware": "5.0.0",
-    "webpack-dev-server": "3.11.2",
+    "webpack-dev-server": "4.0.0",
     "webpack-merge": "5.8.0",
     "webpack-subresource-integrity": "5.0.0"
   },

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

@@ -228,40 +228,6 @@ export function serveWebpackBrowser(
       throw new Error('Webpack Dev Server configuration was not set.');
     }
 
-    if (options.liveReload && !options.hmr) {
-      // This is needed because we cannot use the inline option directly in the config
-      // because of the SuppressExtractedTextChunksWebpackPlugin
-      // Consider not using SuppressExtractedTextChunksWebpackPlugin when liveReload is enable.
-      webpackDevServer.addDevServerEntrypoints(config, {
-        ...config.devServer,
-        inline: true,
-      });
-
-      // Remove live-reload code from all entrypoints but not main.
-      // Otherwise this will break SuppressExtractedTextChunksWebpackPlugin because
-      // 'addDevServerEntrypoints' adds addional entry-points to all entries.
-      if (
-        config.entry &&
-        typeof config.entry === 'object' &&
-        !Array.isArray(config.entry) &&
-        config.entry.main
-      ) {
-        for (const [key, value] of Object.entries(config.entry)) {
-          if (key === 'main' || !Array.isArray(value)) {
-            continue;
-          }
-
-          const webpackClientScriptIndex = value.findIndex((x) =>
-            x.includes('webpack-dev-server/client/index.js'),
-          );
-          if (webpackClientScriptIndex >= 0) {
-            // Remove the webpack-dev-server/client script from array.
-            value.splice(webpackClientScriptIndex, 1);
-          }
-        }
-      }
-    }
-
     let locale: string | undefined;
     if (i18n.shouldInline) {
       // Dev-server only supports one locale
@@ -306,7 +272,7 @@ export function serveWebpackBrowser(
           // The below is needed as otherwise HMR for CSS will break.
           // styles.js and runtime.js needs to be loaded as a non-module scripts as otherwise `document.currentScript` will be null.
           // https://github.com/webpack-contrib/mini-css-extract-plugin/blob/90445dd1d81da0c10b9b0e8a17b417d0651816b8/src/hmr/hotModuleReplacement.js#L39
-          isHMREnabled: webpackConfig.devServer?.hot,
+          isHMREnabled: !!webpackConfig.devServer?.hot,
         });
 
         webpackConfig.plugins ??= [];
@@ -336,8 +302,8 @@ export function serveWebpackBrowser(
           const serverAddress = url.format({
             protocol: options.ssl ? 'https' : 'http',
             hostname: options.host === '0.0.0.0' ? 'localhost' : options.host,
-            pathname: webpackConfig.devServer?.publicPath,
             port: buildEvent.port,
+            pathname: webpackConfig.devServer?.devMiddleware?.publicPath,
           });
 
           if (index === 0) {

packages/angular_devkit/build_angular/src/builders/dev-server/live-reload_spec.ts

@@ -10,7 +10,6 @@
 import { Architect, BuilderRun } from '@angular-devkit/architect';
 import { tags } from '@angular-devkit/core';
 import { createProxyServer } from 'http-proxy';
-import { HTTPResponse } from 'puppeteer/lib/cjs/puppeteer/api-docs-entry';
 import { Browser } from 'puppeteer/lib/cjs/puppeteer/common/Browser';
 import { Page } from 'puppeteer/lib/cjs/puppeteer/common/Page';
 import puppeteer from 'puppeteer/lib/cjs/puppeteer/node';
@@ -96,15 +95,33 @@ function createProxy(target: string, secure: boolean, ws = true): ProxyInstance
   };
 }
 
-async function goToPageAndWaitForSockJs(page: Page, url: string): Promise<void> {
+async function goToPageAndWaitForWS(page: Page, url: string): Promise<void> {
-  const socksRequest = `${url.endsWith('/') ? url : url + '/'}sockjs-node/info?t=`;
+  const baseUrl = url.replace(/^http/, 'ws');
+  const socksRequest = baseUrl[baseUrl.length - 1] === '/' ? `${baseUrl}ws` : `${baseUrl}/ws`;
+  // Create a Chrome dev tools session so that we can capturing websocket request.
+  // https://github.com/puppeteer/puppeteer/issues/2974
+
+  // We do this, to ensure that we make the right request with the expected host, port etc...
+  const client = await page.target().createCDPSession();
+  await client.send('Network.enable');
+  await client.send('Page.enable');
 
   await Promise.all([
-    page.waitForResponse(
+    new Promise<void>((resolve, reject) => {
-      (r: HTTPResponse) => r.url().startsWith(socksRequest) && r.status() === 200,
+      const timeout = setTimeout(
-    ),
+        () => reject(new Error(`A Websocket connected to ${socksRequest} was not established.`)),
+        2000,
+      );
+      client.on('Network.webSocketCreated', ({ url }) => {
+        if (url.startsWith(socksRequest)) {
+          clearTimeout(timeout);
+          resolve();
+        }
+      });
+    }),
     page.goto(url),
   ]);
+  await client.detach();
 }
 
 describe('Dev Server Builder live-reload', () => {
@@ -169,7 +186,7 @@ describe('Dev Server Builder live-reload', () => {
           const url = buildEvent.baseUrl as string;
           switch (buildCount) {
             case 0:
-              await goToPageAndWaitForSockJs(page, url);
+              await goToPageAndWaitForWS(page, url);
               host.replaceInFile('src/app/app.component.ts', `'app'`, `'app-live-reload'`);
               break;
             case 1:
@@ -200,7 +217,7 @@ describe('Dev Server Builder live-reload', () => {
           switch (buildCount) {
             case 0:
               proxy = createProxy(url, false);
-              await goToPageAndWaitForSockJs(page, proxy.url);
+              await goToPageAndWaitForWS(page, proxy.url);
               host.replaceInFile('src/app/app.component.ts', `'app'`, `'app-live-reload'`);
               break;
             case 1:
@@ -231,43 +248,7 @@ describe('Dev Server Builder live-reload', () => {
           switch (buildCount) {
             case 0:
               proxy = createProxy(url, true);
-              await goToPageAndWaitForSockJs(page, proxy.url);
+              await goToPageAndWaitForWS(page, proxy.url);
-              host.replaceInFile('src/app/app.component.ts', `'app'`, `'app-live-reload'`);
-              break;
-            case 1:
-              const innerText = await page.evaluate(() => document.querySelector('p').innerText);
-              expect(innerText).toBe('app-live-reload');
-              break;
-          }
-
-          buildCount++;
-        }),
-        take(2),
-      )
-      .toPromise();
-  });
-
-  it('works without https -> http proxy without websockets (dotnet emulation)', async () => {
-    const run = await architect.scheduleTarget(target, overrides);
-    runs.push(run);
-
-    let proxy: ProxyInstance | undefined;
-    let buildCount = 0;
-
-    await run.output
-      .pipe(
-        debounceTime(1000),
-        switchMap(async (buildEvent) => {
-          expect(buildEvent.success).toBe(true);
-          const url = buildEvent.baseUrl as string;
-          switch (buildCount) {
-            case 0:
-              proxy = createProxy(url, true, false);
-              await goToPageAndWaitForSockJs(page, proxy.url);
-              await page.waitForResponse(
-                (response: HTTPResponse) =>
-                  response.url().includes('xhr_streaming') && response.status() === 200,
-              );
               host.replaceInFile('src/app/app.component.ts', `'app'`, `'app-live-reload'`);
               break;
             case 1:

packages/angular_devkit/build_angular/src/builders/dev-server/tests/execute-fetch.ts

@@ -27,7 +27,9 @@ export async function executeOnceAndFetch<T>(
       mergeMap(async (executionResult) => {
         let response = undefined;
         if (executionResult.result?.success) {
-          const resolvedUrl = new URL(url, `${executionResult.result.baseUrl}/`);
+          let baseUrl = `${executionResult.result.baseUrl}`;
+          baseUrl = baseUrl[baseUrl.length - 1] === '/' ? baseUrl : `${baseUrl}/`;
+          const resolvedUrl = new URL(url, baseUrl);
           response = await fetch(resolvedUrl, options?.request);
         }
 

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -390,6 +390,9 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
       syncWebAssembly: true,
       asyncWebAssembly: true,
     },
+    infrastructureLogging: {
+      level: buildOptions.verbose ? 'verbose' : 'error',
+    },
     cache: getCacheSettings(wco, buildBrowserFeatures.supportedBrowsers),
     optimization: {
       minimizer: extraMinimizers,

packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts

@@ -12,56 +12,30 @@ import { posix, resolve } from 'path';
 import * as url from 'url';
 import * as webpack from 'webpack';
 import { Configuration } from 'webpack-dev-server';
-import { normalizeOptimization } from '../../utils';
 import { WebpackConfigOptions, WebpackDevServerOptions } from '../../utils/build-options';
 import { getIndexOutputFile } from '../../utils/webpack-browser-config';
 import { HmrLoader } from '../plugins/hmr/hmr-loader';
-import { getWatchOptions } from '../utils/helpers';
 
 export function getDevServerConfig(
   wco: WebpackConfigOptions<WebpackDevServerOptions>,
 ): webpack.Configuration {
   const {
-    buildOptions: {
+    buildOptions: { host, port, index, headers, watch, hmr, main, liveReload, proxyConfig },
-      optimization,
-      host,
-      port,
-      index,
-      headers,
-      poll,
-      ssl,
-      hmr,
-      main,
-      disableHostCheck,
-      liveReload,
-      allowedHosts,
-      watch,
-      proxyConfig,
-    },
     logger,
     root,
   } = wco;
 
   const servePath = buildServePath(wco.buildOptions, logger);
-  const { styles: stylesOptimization, scripts: scriptsOptimization } = normalizeOptimization(
-    optimization,
-  );
 
-  const extraPlugins = [];
+  const extraRules: webpack.RuleSetRule[] = [];
-
+  if (hmr) {
-  // Resolve public host and client address.
+    extraRules.push({
-  let publicHost = wco.buildOptions.publicHost;
+      loader: HmrLoader,
-  if (publicHost) {
+      include: [main].map((p) => resolve(wco.root, p)),
-    if (!/^\w+:\/\//.test(publicHost)) {
+    });
-      publicHost = `${ssl ? 'https' : 'http'}://${publicHost}`;
-    }
-
-    const parsedHost = url.parse(publicHost);
-    publicHost = parsedHost.host ?? undefined;
-  } else {
-    publicHost = '0.0.0.0:0';
   }
 
+  const extraPlugins = [];
   if (!watch) {
     // There's no option to turn off file watching in webpack-dev-server, but
     // we can override the file watcher instead.
@@ -76,13 +50,7 @@ export function getDevServerConfig(
     });
   }
 
-  const extraRules: webpack.RuleSetRule[] = [];
+  const webSocketPath = posix.join(servePath, 'ws');
-  if (hmr) {
-    extraRules.push({
-      loader: HmrLoader,
-      include: [main].map((p) => resolve(wco.root, p)),
-    });
-  }
 
   return {
     plugins: extraPlugins,
@@ -97,7 +65,7 @@ export function getDevServerConfig(
         ...headers,
       },
       historyApiFallback: !!index && {
-        index: `${servePath}/${getIndexOutputFile(index)}`,
+        index: posix.join(servePath, getIndexOutputFile(index)),
         disableDotRule: true,
         htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
         rewrites: [
@@ -107,30 +75,31 @@ export function getDevServerConfig(
           },
         ],
       },
-      sockPath: posix.join(servePath, 'sockjs-node'),
+      webSocketServer: {
-      stats: false,
+        options: {
-      compress: stylesOptimization.minify || scriptsOptimization,
+          path: webSocketPath,
-      watchOptions: getWatchOptions(poll),
+        },
-      https: getSslConfig(root, wco.buildOptions),
+      },
-      overlay: {
+      compress: false,
-        errors: !(stylesOptimization.minify || scriptsOptimization),
+      static: false,
-        warnings: false,
+      https: getSslConfig(root, wco.buildOptions),
+      allowedHosts: getAllowedHostsConfig(wco.buildOptions),
+      devMiddleware: {
+        publicPath: servePath,
+        stats: false,
       },
-      public: publicHost,
-      allowedHosts,
-      disableHostCheck,
-      // This should always be true, but at the moment this breaks 'SuppressExtractedTextChunksWebpackPlugin'
-      // because it will include addition JS in the styles.js.
-      inline: hmr,
-      publicPath: servePath,
       liveReload,
-      injectClient: liveReload,
+      hot: hmr && !liveReload ? 'only' : hmr,
-      hotOnly: hmr && !liveReload,
-      hot: hmr,
       proxy: addProxyConfig(root, proxyConfig),
-      contentBase: false,
+      client: {
-      logLevel: 'error',
+        logging: 'info',
-    } as Configuration & { logLevel: Configuration['clientLogLevel'] },
+        webSocketURL: getPublicHostOptions(wco.buildOptions, webSocketPath),
+        overlay: {
+          errors: true,
+          warnings: false,
+        },
+      },
+    },
   };
 }
 
@@ -169,7 +138,7 @@ export function buildServePath(
  * Private method to enhance a webpack config with SSL configuration.
  * @private
  */
-function getSslConfig(root: string, options: WebpackDevServerOptions) {
+function getSslConfig(root: string, options: WebpackDevServerOptions): Configuration['https'] {
   const { ssl, sslCert, sslKey } = options;
   if (ssl && sslCert && sslKey) {
     return {
@@ -235,3 +204,26 @@ function findDefaultServePath(baseHref?: string, deployUrl?: string): string | n
   // Join together baseHref and deployUrl
   return `${normalizedBaseHref}${deployUrl || ''}`;
 }
+
+function getAllowedHostsConfig(options: WebpackDevServerOptions): Configuration['allowedHosts'] {
+  if (options.disableHostCheck) {
+    return 'all';
+  } else if (options.allowedHosts?.length) {
+    return options.allowedHosts;
+  }
+
+  return undefined;
+}
+
+function getPublicHostOptions(options: WebpackDevServerOptions, webSocketPath: string): string {
+  let publicHost: string | null | undefined = options.publicHost;
+  if (publicHost) {
+    if (!/^\w+:\/\//.test(publicHost)) {
+      publicHost = `https://${publicHost}`;
+    }
+
+    publicHost = url.parse(publicHost).host;
+  }
+
+  return `auto://${publicHost || '0.0.0.0:0'}${webSocketPath}`;
+}

packages/angular_devkit/build_angular/src/webpack/configs/stats.ts

@@ -50,5 +50,7 @@ export function getWebpackStatsConfig(verbose = false) {
 export function getStatsConfig(wco: WebpackConfigOptions) {
   const verbose = !!wco.buildOptions.verbose;
 
-  return { stats: getWebpackStatsConfig(verbose) };
+  return {
+    stats: getWebpackStatsConfig(verbose),
+  };
 }

packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts

@@ -96,7 +96,9 @@ export function isPolyfillsEntry(name: string): boolean {
   return name === 'polyfills';
 }
 
-export function getWatchOptions(poll: number | undefined): Configuration['watchOptions'] {
+export function getWatchOptions(
+  poll: number | undefined,
+): NonNullable<Configuration['watchOptions']> {
   return {
     poll,
     ignored: poll === undefined ? '**/$_lazy_route_resources' : 'node_modules/**',