fix(@angular/build): allow 'vitest' import in browser mode

This fixes the following error:
  'The entry point "vitest" cannot be marked as external'

by excluding vitest from the discovered dependencies handed to optimizeDeps.include

Closes #31745

Author: yjaaidi

packages/angular/build/src/builders/unit-test/runners/vitest/executor.ts

@@ -231,7 +231,9 @@ export class VitestExecutor implements TestExecutor {
             coverage,
             projectName,
             projectSourceRoot: this.options.projectSourceRoot,
-            optimizeDepsInclude: this.externalMetadata.explicitBrowser,
+            optimizeDepsInclude: this.externalMetadata.explicitBrowser.filter(
+              (entry) => entry !== 'vitest',
+            ),
             reporters,
             setupFiles: testSetupFiles,
             projectPlugins,

tests/legacy-cli/e2e/tests/vitest/browser.ts

@@ -0,0 +1,37 @@
+import assert from 'node:assert/strict';
+import { applyVitestBuilder } from '../../utils/vitest';
+import { ng, silentNpm, exec } from '../../utils/process';
+import { writeFile } from '../../utils/fs';
+import { updateJsonFile } from '../../utils/project';
+
+/**
+ * Allow `vitest` import in browser mode.
+ * @see https://github.com/angular/angular-cli/issues/31745
+ */
+export default async function (): Promise<void> {
+  await applyVitestBuilder();
+
+  await silentNpm('install', '@vitest/browser-playwright', 'playwright', '--save-dev');
+  await exec('npx', 'playwright', 'install', 'chromium');
+
+  await updateJsonFile('angular.json', (json) => {
+    const projects = Object.values(json['projects']);
+    const project = projects[0]! as any;
+    project['architect']['test']['options']['browsers'] = ['chromium'];
+  });
+
+  await writeFile(
+    'src/app/app.spec.ts',
+    `
+    import { test, expect } from 'vitest';
+
+    test('should pass', () => {
+      expect(true).toBe(true);
+    });
+  `,
+  );
+
+  const { stdout } = await ng('test');
+
+  assert.match(stdout, /1 passed/, 'Expected 1 tests to pass.');
+}