build: update dependency webpack-dev-server to v5

Author: alan-agius4

package.json

@@ -214,7 +214,7 @@
     "watchpack": "2.4.0",
     "webpack": "5.90.3",
     "webpack-dev-middleware": "6.1.1",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.0.2",
     "webpack-merge": "5.10.0",
     "webpack-subresource-integrity": "5.1.0",
     "yargs": "17.7.2",

packages/angular_devkit/build_angular/package.json

@@ -66,7 +66,7 @@
     "watchpack": "2.4.0",
     "webpack": "5.90.3",
     "webpack-dev-middleware": "6.1.1",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.0.2",
     "webpack-merge": "5.10.0",
     "webpack-subresource-integrity": "5.1.0"
   },

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/build-assets_spec.ts

@@ -55,25 +55,7 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
 
     it('should return 404 for non existing assets', async () => {
       setupTarget(harness, {
-        assets: ['src/extra.js'],
-        optimization: {
-          scripts: true,
-        },
-      });
-
-      harness.useTarget('serve', {
-        ...BASE_OPTIONS,
-      });
-
-      const { result, response } = await executeOnceAndFetch(harness, 'extra.js');
-
-      expect(result?.success).toBeTrue();
-      expect(await response?.status).toBe(404);
-    });
-
-    it('should return 404 for non existing assets', async () => {
-      setupTarget(harness, {
-        assets: ['src/extra.js'],
+        assets: [],
         optimization: {
           scripts: true,
         },
@@ -83,7 +65,7 @@ describeServeBuilder(executeDevServer, DEV_SERVER_BUILDER_INFO, (harness, setupT
         ...BASE_OPTIONS,
       });
 
-      const { result, response } = await executeOnceAndFetch(harness, 'extra.js');
+      const { result, response } = await executeOnceAndFetch(harness, 'does-not-exist.js');
 
       expect(result?.success).toBeTrue();
       expect(await response?.status).toBe(404);

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

@@ -155,7 +155,10 @@ function getServerConfig(
  * Private method to enhance a webpack config with Proxy configuration.
  * @private
  */
-async function addProxyConfig(root: string, proxyConfig: string | undefined) {
+async function addProxyConfig(
+  root: string,
+  proxyConfig: string | undefined,
+): Promise<object[] | undefined> {
   if (!proxyConfig) {
     return undefined;
   }
@@ -166,13 +169,15 @@ async function addProxyConfig(root: string, proxyConfig: string | undefined) {
     throw new Error(`Proxy configuration file ${proxyPath} does not exist.`);
   }
 
+  let proxyConfiguration: Record<string, object> | object[];
+
   switch (extname(proxyPath)) {
     case '.json': {
       const content = await fsPromises.readFile(proxyPath, 'utf-8');
 
       const { parse, printParseErrorCode } = await import('jsonc-parser');
       const parseErrors: import('jsonc-parser').ParseError[] = [];
-      const proxyConfiguration = parse(content, parseErrors, { allowTrailingComma: true });
+      proxyConfiguration = parse(content, parseErrors, { allowTrailingComma: true });
 
       if (parseErrors.length > 0) {
         let errorMessage = `Proxy configuration file ${proxyPath} contains parse errors:`;
@@ -183,32 +188,44 @@ async function addProxyConfig(root: string, proxyConfig: string | undefined) {
         throw new Error(errorMessage);
       }
 
-      return proxyConfiguration;
+      break;
     }
     case '.mjs':
       // Load the ESM configuration file using the TypeScript dynamic import workaround.
       // Once TypeScript provides support for keeping the dynamic import this workaround can be
       // changed to a direct dynamic import.
-      return (await loadEsmModule<{ default: unknown }>(pathToFileURL(proxyPath))).default;
+      proxyConfiguration = (
+        await loadEsmModule<{ default: Record<string, object> | object[] }>(
+          pathToFileURL(proxyPath),
+        )
+      ).default;
+      break;
     case '.cjs':
-      return require(proxyPath);
+      proxyConfiguration = require(proxyPath);
+      break;
     default:
       // The file could be either CommonJS or ESM.
       // CommonJS is tried first then ESM if loading fails.
       try {
-        return require(proxyPath);
+        proxyConfiguration = require(proxyPath);
       } catch (e) {
         assertIsError(e);
-        if (e.code === 'ERR_REQUIRE_ESM') {
-          // Load the ESM configuration file using the TypeScript dynamic import workaround.
-          // Once TypeScript provides support for keeping the dynamic import this workaround can be
-          // changed to a direct dynamic import.
-          return (await loadEsmModule<{ default: unknown }>(pathToFileURL(proxyPath))).default;
+        if (e.code !== 'ERR_REQUIRE_ESM') {
+          throw e;
         }
 
-        throw e;
+        // Load the ESM configuration file using the TypeScript dynamic import workaround.
+        // Once TypeScript provides support for keeping the dynamic import this workaround can be
+        // changed to a direct dynamic import.
+        proxyConfiguration = (
+          await loadEsmModule<{ default: Record<string, object> | object[] }>(
+            pathToFileURL(proxyPath),
+          )
+        ).default;
       }
   }
+
+  return normalizeProxyConfiguration(proxyConfiguration);
 }
 
 /**
@@ -333,3 +350,9 @@ function getPublicHostOptions(options: WebpackDevServerOptions, webSocketPath: s
 
   return `auto://${publicHost || '0.0.0.0:0'}${webSocketPath}`;
 }
+
+function normalizeProxyConfiguration(proxy: Record<string, object> | object[]): object[] {
+  return Array.isArray(proxy)
+    ? proxy
+    : Object.entries(proxy).map(([context, value]) => ({ context: [context], ...value }));
+}

packages/angular_devkit/build_webpack/package.json

@@ -25,6 +25,6 @@
   },
   "peerDependencies": {
     "webpack": "^5.30.0",
-    "webpack-dev-server": "^4.0.0"
+    "webpack-dev-server": "^5.0.2"
   }
 }