From ba8e638dd02176af2f4aaf0131e7e898f5902b2b Mon Sep 17 00:00:00 2001 From: Angular Robot Date: Thu, 26 Mar 2026 15:30:38 +0000 Subject: [PATCH] build: update dependency webpack-dev-middleware to v8 See associated pull request for more information. Closes #32816 as a pr takeover --- .../angular_devkit/build_angular/package.json | 2 +- .../src/builders/karma/browser_builder.ts | 4 +- .../webpack/plugins/karma/karma-context.html | 14 +++--- .../webpack/plugins/karma/karma-debug.html | 14 +++--- .../src/tools/webpack/plugins/karma/karma.ts | 47 +++++++++---------- pnpm-lock.yaml | 25 +++++++++- tests/e2e/tests/test/test-sourcemap.ts | 2 +- 7 files changed, 63 insertions(+), 45 deletions(-) diff --git a/packages/angular_devkit/build_angular/package.json b/packages/angular_devkit/build_angular/package.json index 61b75326fe39..945108770a32 100644 --- 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 index e9997b67ea0d..82217779dce7 100644 --- 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 index 64139997b25a..4babe49f7de8 100644 --- 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 @@ - + %SCRIPTS% - - - + + + 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 index f348daf64352..dc58d8e6ee60 100644 --- 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 @@ - + %SCRIPTS% - - - + + + 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 index dd1336b5e22d..07aac6f8b9d2 100644 --- 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; 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,6 +161,17 @@ 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 = 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 ( @@ -171,28 +179,19 @@ function fallbackMiddleware() { 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 index b4f89355f360..73c6dcd74d1a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -704,8 +704,8 @@ importers: specifier: 5.105.4 version: 5.105.4(esbuild@0.27.3) webpack-dev-middleware: - specifier: 7.4.5 - version: 7.4.5(tslib@2.8.1)(webpack@5.105.4(esbuild@0.27.3)) + specifier: 8.0.2 + version: 8.0.2(tslib@2.8.1)(webpack@5.105.4(esbuild@0.27.3)) webpack-dev-server: specifier: 5.2.3 version: 5.2.3(bufferutil@4.1.0)(tslib@2.8.1)(utf-8-validate@6.0.6)(webpack@5.105.4(esbuild@0.27.3)) @@ -8112,6 +8112,15 @@ packages: webpack: optional: true + webpack-dev-middleware@8.0.2: + resolution: {integrity: sha512-MCBgoI025uJEcIYDT+R3mXUnhZA/GAxqwngADOwmHxMhQUgDztGow6AmyeEfI8L9KG2pDVg2kU6vjFnbCBH5Pg==} + engines: {node: '>= 20.9.0'} + peerDependencies: + webpack: ^5.101.0 + peerDependenciesMeta: + webpack: + optional: true + webpack-dev-server@5.2.3: resolution: {integrity: sha512-9Gyu2F7+bg4Vv+pjbovuYDhHX+mqdqITykfzdM9UyKqKHlsE5aAjRhR+oOEfXW5vBeu8tarzlJFIZva4ZjAdrQ==} engines: {node: '>= 18.12.0'} @@ -16767,6 +16776,18 @@ snapshots: transitivePeerDependencies: - tslib + webpack-dev-middleware@8.0.2(tslib@2.8.1)(webpack@5.105.4(esbuild@0.27.3)): + dependencies: + memfs: 4.57.1(tslib@2.8.1) + mime-types: 3.0.2 + on-finished: 2.4.1 + range-parser: 1.2.1 + schema-utils: 4.3.3 + optionalDependencies: + webpack: 5.105.4(esbuild@0.27.3) + transitivePeerDependencies: + - tslib + webpack-dev-server@5.2.3(bufferutil@4.1.0)(tslib@2.8.1)(utf-8-validate@6.0.6)(webpack@5.105.4(esbuild@0.27.3)): dependencies: '@types/bonjour': 3.5.13 diff --git a/tests/e2e/tests/test/test-sourcemap.ts b/tests/e2e/tests/test/test-sourcemap.ts index 6c1cf16cd7b3..5d4e668c54b6 100644 --- 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.