build: update dependency webpack-dev-middleware to v8

angular-robot · alan-agius4 · commit ba8e638dd021 · 2026-03-30T14:08:36.000Z
See associated pull request for more information. Closes #32816 as a pr takeover
diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json
@@ -55,7 +55,7 @@
     "tinyglobby": "0.2.15",
     "tslib": "2.8.1",
     "webpack": "5.105.4",
-    "webpack-dev-middleware": "7.4.5",
+    "webpack-dev-middleware": "8.0.2",
     "webpack-dev-server": "5.2.3",
     "webpack-merge": "6.0.1",
     "webpack-subresource-integrity": "5.1.0"
diff --git a/packages/angular_devkit/build_angular/src/builders/karma/browser_builder.ts b/packages/angular_devkit/build_angular/src/builders/karma/browser_builder.ts
@@ -77,10 +77,8 @@ export function execute(
         }),
       );
 
-      const KARMA_APPLICATION_PATH = '_karma_webpack_';
       webpackConfig.output ??= {};
-      webpackConfig.output.path = `/${KARMA_APPLICATION_PATH}/`;
-      webpackConfig.output.publicPath = `/${KARMA_APPLICATION_PATH}/`;
+      webpackConfig.output.path = '/';
 
       if (karmaOptions.singleRun) {
         webpackConfig.plugins.unshift({
diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/plugins/karma/karma-context.html b/packages/angular_devkit/build_angular/src/tools/webpack/plugins/karma/karma-context.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
 This is the execution context.
 Loaded within the iframe.
@@ -9,7 +9,7 @@
     <title></title>
     <base href="/" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="styles.css" crossorigin="anonymous" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
@@ -30,13 +30,13 @@
       // All served files with the latest timestamps
       %MAPPINGS%
     </script>
-    <script src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
-    <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
+    <script src="runtime.js" crossorigin="anonymous"></script>
+    <script src="polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
-    <script src="_karma_webpack_/scripts.js" crossorigin="anonymous" defer></script>
-    <script src="_karma_webpack_/vendor.js" crossorigin="anonymous" type="module"></script>
-    <script src="_karma_webpack_/main.js" crossorigin="anonymous" type="module"></script>
+    <script src="scripts.js" crossorigin="anonymous" defer></script>
+    <script src="vendor.js" crossorigin="anonymous" type="module"></script>
+    <script src="main.js" crossorigin="anonymous" type="module"></script>
     <script type="module">
       window.__karma__.loaded();
     </script>
diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/plugins/karma/karma-debug.html b/packages/angular_devkit/build_angular/src/tools/webpack/plugins/karma/karma-debug.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--
 This file is almost the same as context.html - loads all source files,
 but its purpose is to be loaded in the main frame (not within an iframe),
@@ -10,7 +10,7 @@
     <title>Karma DEBUG RUNNER</title>
     <base href="/" />
     <link href="favicon.ico" rel="icon" type="image/x-icon" />
-    <link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="styles.css" crossorigin="anonymous" />
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta
       name="viewport"
@@ -32,13 +32,13 @@
       // All served files with the latest timestamps
       %MAPPINGS%
     </script>
-    <script src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
-    <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
+    <script src="runtime.js" crossorigin="anonymous"></script>
+    <script src="polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%
-    <script src="_karma_webpack_/scripts.js" crossorigin="anonymous" defer></script>
-    <script src="_karma_webpack_/vendor.js" crossorigin="anonymous" type="module"></script>
-    <script src="_karma_webpack_/main.js" crossorigin="anonymous" type="module"></script>
+    <script src="scripts.js" crossorigin="anonymous" defer></script>
+    <script src="vendor.js" crossorigin="anonymous" type="module"></script>
+    <script src="main.js" crossorigin="anonymous" type="module"></script>
     <script type="module">
       window.__karma__.loaded();
     </script>
diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/plugins/karma/karma.ts b/packages/angular_devkit/build_angular/src/tools/webpack/plugins/karma/karma.ts
@@ -18,8 +18,6 @@ import { logging } from '@angular-devkit/core';
 import { BuildOptions } from '../../../../utils/build-options';
 import { normalizeSourceMaps } from '../../../../utils/index';
 
-const KARMA_APPLICATION_PATH = '_karma_webpack_';
-
 let webpackMiddleware: webpackDevMiddleware.API<IncomingMessage, ServerResponse>;
 
 const init: any = (config: any, emitter: any) => {
@@ -65,7 +63,6 @@ const init: any = (config: any, emitter: any) => {
   const webpackMiddlewareConfig = {
     // Hide webpack output because its noisy.
     stats: false,
-    publicPath: `/${KARMA_APPLICATION_PATH}/`,
   };
 
   config.webpackMiddleware = { ...webpackMiddlewareConfig, ...config.webpackMiddleware };
@@ -147,7 +144,7 @@ const sourceMapReporter: any = function (this: any, baseReporterDecorator: any,
   baseReporterDecorator(this);
   muteDuplicateReporterLogging(this, config);
 
-  const urlRegexp = /http:\/\/localhost:\d+\/_karma_webpack_\/(webpack:\/)?/gi;
+  const urlRegexp = /http:\/\/localhost:\d+\/(webpack:\/)?/gi;
 
   this.onSpecComplete = function (_browser: any, result: any) {
     if (!result.success) {
@@ -164,35 +161,37 @@ const sourceMapReporter: any = function (this: any, baseReporterDecorator: any,
 
 sourceMapReporter.$inject = ['baseReporterDecorator', 'config'];
 
+/**
+ * List of files that are always served by the webpack server.
+ */
+const alwaysServe: ReadonlySet<string> = new Set([
+  '/runtime.js',
+  '/polyfills.js',
+  '/scripts.js',
+  '/styles.css',
+  '/vendor.js',
+]);
+
 // When a request is not found in the karma server, try looking for it from the webpack server root.
 function fallbackMiddleware() {
   return function (
     request: IncomingMessage,
     response: ServerResponse,
     next: (err?: unknown) => void,
   ) {
-    if (webpackMiddleware) {
-      if (request.url && !new RegExp(`\\/${KARMA_APPLICATION_PATH}\\/.*`).test(request.url)) {
-        request.url = '/' + KARMA_APPLICATION_PATH + request.url;
-      }
-      webpackMiddleware(request, response, () => {
-        const alwaysServe = [
-          `/${KARMA_APPLICATION_PATH}/runtime.js`,
-          `/${KARMA_APPLICATION_PATH}/polyfills.js`,
-          `/${KARMA_APPLICATION_PATH}/scripts.js`,
-          `/${KARMA_APPLICATION_PATH}/styles.css`,
-          `/${KARMA_APPLICATION_PATH}/vendor.js`,
-        ];
-        if (request.url && alwaysServe.includes(request.url)) {
-          response.statusCode = 200;
-          response.end();
-        } else {
-          next();
-        }
-      });
-    } else {
+    if (!webpackMiddleware) {
       next();
+      return;
     }
+
+    webpackMiddleware(request, response, () => {
+      if (request.url && alwaysServe.has(request.url)) {
+        response.statusCode = 200;
+        response.end();
+      } else {
+        next();
+      }
+    });
   };
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tests/e2e/tests/test/test-sourcemap.ts b/tests/e2e/tests/test/test-sourcemap.ts
@@ -32,7 +32,7 @@ export default async function () {
   } catch (error) {
     assertIsError(error);
     assert.match(error.message, /\(src\/app\/app\.spec\.ts:3:27/);
-    assert.doesNotMatch(error.message, /_karma_webpack_/);
+    assert.doesNotMatch(error.message, /webpack/);
   }
 
   // when sourcemaps are 'off' the stacktrace won't point to the spec.ts file.

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export default async function () {`
`32`	`32`	`} catch (error) {`
`33`	`33`	`assertIsError(error);`
`34`	`34`	`assert.match(error.message, /\(src\/app\/app\.spec\.ts:3:27/);`
`35`		`- assert.doesNotMatch(error.message, /_karma_webpack_/);`
	`35`	`+ assert.doesNotMatch(error.message, /webpack/);`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`// when sourcemaps are 'off' the stacktrace won't point to the spec.ts file.`