From 5186a77d5bb39e22e55c2b727bf0f06002ab943c Mon Sep 17 00:00:00 2001
From: Alan Agius <alanagius@google.com>
Date: Thu, 5 Dec 2024 14:06:17 +0000
Subject: [PATCH] fix(@angular/build): show error when Node.js built-ins are
 used during `ng serve`

This commit ensures consistent behavior between `ng build` and `ng serve`. Previously, `ng serve` did not display an error message when Node.js built-in modules were included in browser bundles. By default, Vite replaces Node.js built-ins with empty modules, which can lead to unexpected runtime issues. This update addresses the problem by surfacing clear error messages, providing better developer feedback and alignment between the two commands.

Closes: #27425
---
 .../src/builders/dev-server/vite-server.ts    | 20 ++++++++++++++++++
 .../vite/browser-node-module-dep-error.ts     | 21 +++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 tests/legacy-cli/e2e/tests/vite/browser-node-module-dep-error.ts

diff --git a/packages/angular/build/src/builders/dev-server/vite-server.ts b/packages/angular/build/src/builders/dev-server/vite-server.ts
index 39b27b2bd6c7..64c68fd26888 100644
--- a/packages/angular/build/src/builders/dev-server/vite-server.ts
+++ b/packages/angular/build/src/builders/dev-server/vite-server.ts
@@ -803,6 +803,26 @@ function getDepOptimizationConfig({
   thirdPartySourcemaps: boolean;
 }): DepOptimizationConfig {
   const plugins: ViteEsBuildPlugin[] = [
+    {
+      name: 'angular-browser-node-built-in',
+      setup(build) {
+        // This namespace is configured by vite.
+        // @see: https://github.com/vitejs/vite/blob/a1dd396da856401a12c921d0cd2c4e97cb63f1b5/packages/vite/src/node/optimizer/esbuildDepPlugin.ts#L109
+        build.onLoad({ filter: /.*/, namespace: 'browser-external' }, (args) => {
+          if (!isBuiltin(args.path)) {
+            return;
+          }
+
+          return {
+            errors: [
+              {
+                text: `The package "${args.path}" wasn't found on the file system but is built into node.`,
+              },
+            ],
+          };
+        });
+      },
+    },
     {
       name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${
         thirdPartySourcemaps ? '-vendor-sourcemap' : ''
diff --git a/tests/legacy-cli/e2e/tests/vite/browser-node-module-dep-error.ts b/tests/legacy-cli/e2e/tests/vite/browser-node-module-dep-error.ts
new file mode 100644
index 000000000000..13a384a1b792
--- /dev/null
+++ b/tests/legacy-cli/e2e/tests/vite/browser-node-module-dep-error.ts
@@ -0,0 +1,21 @@
+import assert from 'node:assert';
+import { execAndWaitForOutputToMatch, ng } from '../../utils/process';
+import { writeFile } from '../../utils/fs';
+
+export default async function () {
+  await ng('cache', 'clean');
+  await ng('cache', 'on');
+
+  // The `@angular/cli` package relies on Node.js dependencies and is not designed for use in a browser environment.
+  await writeFile('src/main.ts', `import '@angular/cli';`);
+
+  const { stderr } = await execAndWaitForOutputToMatch('ng', ['serve', '--port=0'], /ERROR/, {
+    CI: '0',
+    NO_COLOR: 'true',
+  });
+
+  assert.match(
+    stderr,
+    /The package "node:util" wasn't found on the file system but is built into node/,
+  );
+}