fix(@angular-devkit/build-angular): update webpack to version 5.104.1

This fixes a performance regression. See: #31350 (comment)

Author: alan-agius4

goldens/public-api/angular_devkit/build_webpack/index.api.md

@@ -7,8 +7,8 @@
 import { BuilderContext } from '@angular-devkit/architect';
 import { BuilderOutput } from '@angular-devkit/architect';
 import { Observable } from 'rxjs';
-import webpack from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
+import type webpack from 'webpack';
+import type WebpackDevServer from 'webpack-dev-server';
 
 // @public (undocumented)
 export type BuildResult = BuilderOutput & {

packages/angular_devkit/build_angular/package.json

@@ -55,7 +55,7 @@
     "terser": "5.43.1",
     "tree-kill": "1.2.2",
     "tslib": "2.8.1",
-    "webpack": "5.101.2",
+    "webpack": "5.104.1",
     "webpack-dev-middleware": "7.4.2",
     "webpack-dev-server": "5.2.2",
     "webpack-merge": "6.0.1",

packages/angular_devkit/build_webpack/package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@angular-devkit/core": "workspace:0.0.0-PLACEHOLDER",
     "@ngtools/webpack": "workspace:0.0.0-PLACEHOLDER",
-    "webpack": "5.101.2",
+    "webpack": "5.104.1",
     "webpack-dev-server": "5.2.2"
   },
   "peerDependencies": {

packages/angular_devkit/build_webpack/src/builders/webpack-dev-server/index.ts

@@ -10,8 +10,8 @@ import { Builder, BuilderContext, createBuilder } from '@angular-devkit/architec
 import assert from 'node:assert';
 import { resolve as pathResolve } from 'node:path';
 import { Observable, from, isObservable, of, switchMap } from 'rxjs';
-import webpack from 'webpack';
-import WebpackDevServer from 'webpack-dev-server';
+import type webpack from 'webpack';
+import type WebpackDevServer from 'webpack-dev-server';
 import { getEmittedFiles, getWebpackConfig } from '../../utils';
 import { BuildResult, WebpackFactory, WebpackLoggingCallback } from '../webpack';
 import { Schema as WebpackDevServerBuilderSchema } from './schema';
@@ -44,7 +44,7 @@ export function runWebpackDevServer(
         return of(result);
       }
     } else {
-      return of(webpack(c));
+      return from(import('webpack').then((mod) => mod.default(c)));
     }
   };
 
@@ -54,9 +54,9 @@ export function runWebpackDevServer(
   ) => {
     if (options.webpackDevServerFactory) {
       return new options.webpackDevServerFactory(config, webpack);
+    } else {
+      return from(import('webpack-dev-server').then((mod) => new mod.default(config, webpack)));
     }
-
-    return new WebpackDevServer(config, webpack);
   };
 
   const {
@@ -70,16 +70,21 @@ export function runWebpackDevServer(
   } = options;
 
   return createWebpack({ ...config, watch: false }).pipe(
+    switchMap(async (webpackCompiler) => {
+      return [
+        webpackCompiler,
+        options.webpackDevServerFactory ?? (await import('webpack-dev-server')).default,
+      ] as unknown as [webpack.Compiler | null, WebpackDevServerFactory];
+    }),
     switchMap(
-      (webpackCompiler) =>
+      ([webpackCompiler, webpackDevServerFactory]) =>
         new Observable<DevServerBuildOutput>((obs) => {
           assert(webpackCompiler, 'Webpack compiler factory did not return a compiler instance.');
 
           const devServerConfig = options.devServerConfig || config.devServer || {};
           devServerConfig.host ??= 'localhost';
 
           let result: Partial<DevServerBuildOutput>;
-
           const statsOptions = typeof config.stats === 'boolean' ? undefined : config.stats;
 
           webpackCompiler.hooks.done.tap('build-webpack', (stats) => {
@@ -94,7 +99,7 @@ export function runWebpackDevServer(
             } as unknown as DevServerBuildOutput);
           });
 
-          const devServer = createWebpackDevServer(webpackCompiler, devServerConfig);
+          const devServer = new webpackDevServerFactory(devServerConfig, webpackCompiler);
           devServer.startCallback((err) => {
             if (err) {
               obs.error(err);

packages/angular_devkit/build_webpack/src/builders/webpack/index.ts

@@ -10,7 +10,7 @@ import { Builder, BuilderContext, BuilderOutput, createBuilder } from '@angular-
 import assert from 'node:assert';
 import { resolve as pathResolve } from 'node:path';
 import { Observable, from, isObservable, of, switchMap } from 'rxjs';
-import webpack from 'webpack';
+import type webpack from 'webpack';
 import { EmittedFiles, getEmittedFiles, getWebpackConfig } from '../../utils';
 import { Schema as RealWebpackBuilderSchema } from './schema';
 
@@ -57,7 +57,7 @@ export function runWebpack(
         return of(result);
       }
     } else {
-      return of(webpack(c));
+      return from(import('webpack').then((mod) => mod.default(c)));
     }
   };
 
@@ -104,7 +104,7 @@ export function runWebpack(
 
               // Teardown logic. Close the watcher when unsubscribed from.
               return () => {
-                watching.close(() => {});
+                watching?.close(() => {});
                 webpackCompiler.close(() => {});
               };
             } else {

packages/ngtools/webpack/package.json

@@ -30,6 +30,6 @@
     "@angular/compiler": "20.3.7",
     "@angular/compiler-cli": "20.3.7",
     "typescript": "5.9.2",
-    "webpack": "5.101.2"
+    "webpack": "5.104.1"
   }
 }