refactor: address issue with bazel resolution of peer dependencies

Key changes include:

Author: alan-agius4

.pnpmfile.cjs

@@ -115,7 +115,6 @@ npm.npm_translate_lock(
         "webdriver-manager": "node ./bin/webdriver-manager update --standalone false --gecko false --versions.chrome 106.0.5249.21",
     },
     data = [
-        "//:.pnpmfile.cjs",
         "//:package.json",
         "//:pnpm-workspace.yaml",
         "//modules/testing/builder:package.json",

MODULE.bazel

@@ -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 & {

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

@@ -20,6 +20,7 @@ ts_project(
         # Needed at runtime by some builder tests relying on SSR being
         # resolvable in the test project.
         ":node_modules/@angular/ssr",
+        ":node_modules/browser-sync",
         ":node_modules/jsdom",
         ":node_modules/vitest",
         ":node_modules/@vitest/coverage-v8",

modules/testing/builder/BUILD.bazel

@@ -4,6 +4,7 @@
     "@angular-devkit/architect": "workspace:*",
     "@angular/ssr": "workspace:*",
     "@angular-devkit/build-angular": "workspace:*",
+    "browser-sync": "3.0.4",
     "@vitest/coverage-v8": "4.0.8",
     "jsdom": "27.1.0",
     "rxjs": "7.8.2",

modules/testing/builder/package.json

@@ -226,7 +226,6 @@ ts_project(
         ":build_angular",
         ":build_angular_test_utils",
         ":node_modules/tinyglobby",
-        ":node_modules/webpack",
         "//:node_modules/@types/node",
         "//:node_modules/prettier",
         "//:node_modules/typescript",
@@ -392,8 +391,6 @@ LARGE_SPECS = {
             ":node_modules/@angular/build",
             ":node_modules/@angular-devkit/architect",
             ":node_modules/@angular-devkit/core",
-            ":node_modules/@angular-devkit/build-webpack",
-            "//modules/testing/builder",
 
             # Base dependencies for the application in hello-world-app.
             # Some tests also require extra dependencies.

packages/angular_devkit/build_angular/BUILD.bazel

@@ -21,6 +21,7 @@ import type {
   MiddlewareHandler,
   ProxyOptions,
 } from 'browser-sync';
+import { createRequire } from 'node:module';
 import { join, resolve as pathResolve } from 'node:path';
 import * as url from 'node:url';
 import {
@@ -64,7 +65,7 @@ export function execute(
 ): Observable<SSRDevServerBuilderOutput> {
   let browserSync: typeof import('browser-sync');
   try {
-    browserSync = require('browser-sync');
+    browserSync = createRequire(context.workspaceRoot + '/')('browser-sync');
   } catch {
     return of({
       success: false,

packages/angular_devkit/build_angular/src/builders/ssr-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-dev-server/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)));
     }
   };