refactor(@angular-devkit/build-angular): move webpack compiler creation to karma builder

Moves the instantiation of the Webpack Compiler from the Karma plugin to the
Karma builder (`browser_builder`). This allows the builder to have full ownership
of the compiler's lifecycle and configuration, including `singleRun` adjustments
and output paths. The Karma plugin now receives the `compiler` instance directly
instead of the configuration, reducing its responsibility to just integration logic.

Author: clydin

packages/angular_devkit/build_angular/src/builders/karma/browser_builder.ts

@@ -10,7 +10,7 @@ import { purgeStaleBuildCache } from '@angular/build/private';
 import type { BuilderContext, BuilderOutput } from '@angular-devkit/architect';
 import type { ConfigOptions, Server } from 'karma';
 import * as path from 'node:path';
-import type { Configuration } from 'webpack';
+import webpack, { Configuration } from 'webpack';
 import { getCommonConfig, getStylesConfig } from '../../tools/webpack/configs';
 import type { ExecutionTransformer } from '../../transforms';
 import { generateBrowserWebpackConfigFromContext } from '../../utils/webpack-browser-config';
@@ -77,9 +77,31 @@ export function execute(
         }),
       );
 
+      const KARMA_APPLICATION_PATH = '_karma_webpack_';
+      webpackConfig.output ??= {};
+      webpackConfig.output.path = `/${KARMA_APPLICATION_PATH}/`;
+      webpackConfig.output.publicPath = `/${KARMA_APPLICATION_PATH}/`;
+
+      if (karmaOptions.singleRun) {
+        webpackConfig.plugins.unshift({
+          apply: (compiler: webpack.Compiler) => {
+            compiler.hooks.afterEnvironment.tap('karma', () => {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              compiler.watchFileSystem = { watch: () => {} } as any;
+            });
+          },
+        });
+      }
+
+      // Remove the watch option to avoid the [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] warning.
+      // The compiler is initialized in watch mode by webpack-dev-middleware.
+      delete webpackConfig.watch;
+
+      const compiler = webpack(webpackConfig);
+
       karmaOptions.buildWebpack = {
         options,
-        webpackConfig,
+        compiler,
         logger: context.logger,
       };
 

packages/angular_devkit/build_angular/src/tools/webpack/plugins/karma/karma.ts

@@ -10,15 +10,14 @@
 // TODO: cleanup this file, it's copied as is from Angular CLI.
 import * as http from 'node:http';
 import * as path from 'node:path';
-import webpack from 'webpack';
+import type { Compiler } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 
 import { statsErrorsToString } from '../../utils/stats';
 import { createConsoleLogger } from '@angular-devkit/core/node';
 import { logging } from '@angular-devkit/core';
 import { BuildOptions } from '../../../../utils/build-options';
 import { normalizeSourceMaps } from '../../../../utils/index';
-import assert from 'node:assert';
 
 const KARMA_APPLICATION_PATH = '_karma_webpack_';
 
@@ -67,16 +66,13 @@ const init: any = (config: any, emitter: any) => {
     config.reporters.push('coverage');
   }
 
-  // Add webpack config.
-  const webpackConfig = config.buildWebpack.webpackConfig;
+  const compiler = config.buildWebpack.compiler as Compiler;
   const webpackMiddlewareConfig = {
     // Hide webpack output because its noisy.
     stats: false,
     publicPath: `/${KARMA_APPLICATION_PATH}/`,
   };
 
-  // Use existing config if any.
-  config.webpack = { ...webpackConfig, ...config.webpack };
   config.webpackMiddleware = { ...webpackMiddlewareConfig, ...config.webpackMiddleware };
 
   // Our custom context and debug files list the webpack bundles directly instead of using
@@ -90,29 +86,10 @@ const init: any = (config: any, emitter: any) => {
   config.middleware = config.middleware || [];
   config.middleware.push('@angular-devkit/build-angular--fallback');
 
-  if (config.singleRun) {
-    // There's no option to turn off file watching in webpack-dev-server, but
-    // we can override the file watcher instead.
-    webpackConfig.plugins.unshift({
-      apply: (compiler: any) => {
-        compiler.hooks.afterEnvironment.tap('karma', () => {
-          compiler.watchFileSystem = { watch: () => {} };
-        });
-      },
-    });
-  }
-  // Files need to be served from a custom path for Karma.
-  webpackConfig.output.path = `/${KARMA_APPLICATION_PATH}/`;
-  webpackConfig.output.publicPath = `/${KARMA_APPLICATION_PATH}/`;
-
-  const compiler = webpack(webpackConfig, (error, stats) => {
-    if (error) {
-      throw error;
-    }
-
-    if (stats?.hasErrors()) {
+  compiler.hooks.done.tap('karma', (stats) => {
+    if (stats.hasErrors()) {
       // Only generate needed JSON stats and when needed.
-      const statsJson = stats?.toJson({
+      const statsJson = stats.toJson({
         all: false,
         children: true,
         errors: true,
@@ -136,8 +113,6 @@ const init: any = (config: any, emitter: any) => {
     callback?.();
   }
 
-  assert(compiler, 'Webpack compiler factory did not return a compiler instance.');
-
   compiler.hooks.invalid.tap('karma', () => handler());
   compiler.hooks.watchRun.tapAsync('karma', (_: any, callback: () => void) => handler(callback));
   compiler.hooks.run.tapAsync('karma', (_: any, callback: () => void) => handler(callback));