From 5ca032407f6466cb51f0a53d265ef82cc5257709 Mon Sep 17 00:00:00 2001
From: Alan Agius <alanagius@google.com>
Date: Thu, 5 Dec 2024 15:46:34 +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     | 26 +++++++++++++++++++
 2 files changed, 46 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..406d05a2ec5b
--- /dev/null
+++ b/tests/legacy-cli/e2e/tests/vite/browser-node-module-dep-error.ts
@@ -0,0 +1,26 @@
+import assert from 'node:assert';
+import { execAndWaitForOutputToMatch, ng } from '../../utils/process';
+import { writeFile } from '../../utils/fs';
+import { getGlobalVariable } from '../../utils/env';
+
+export default async function () {
+  assert(
+    getGlobalVariable('argv')['esbuild'],
+    'This test should not be called in the Webpack suite.',
+  );
+
+  await ng('cache', 'clean');
+  await ng('cache', 'on');
+
+  await writeFile('src/main.ts', `import 'node:path';`);
+
+  const { stderr } = await execAndWaitForOutputToMatch('ng', ['serve'], /ERROR/, {
+    CI: '0',
+    NO_COLOR: 'true',
+  });
+
+  assert.match(
+    stderr,
+    /The package "node:path" wasn't found on the file system but is built into node/,
+  );
+}