@angular-devkit/build-angular 17.0.0-rc.3 → 17.0.0-rc.5

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.0.0-rc.3",
+  "version": "17.0.0-rc.5",
   "description": "Angular Webpack Build Facade",
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.2.1",
-    "@angular-devkit/architect": "0.1700.0-rc.3",
-    "@angular-devkit/build-webpack": "0.1700.0-rc.3",
-    "@angular-devkit/core": "17.0.0-rc.3",
+    "@angular-devkit/architect": "0.1700.0-rc.5",
+    "@angular-devkit/build-webpack": "0.1700.0-rc.5",
+    "@angular-devkit/core": "17.0.0-rc.5",
     "@babel/core": "7.23.2",
     "@babel/generator": "7.23.0",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,7 +20,7 @@
     "@babel/preset-env": "7.23.2",
     "@babel/runtime": "7.23.2",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.0.0-rc.3",
+    "@ngtools/webpack": "17.0.0-rc.5",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.16",
@@ -64,7 +64,7 @@
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "5.27.0",
+    "undici": "5.27.2",
     "vite": "4.5.0",
     "webpack": "5.89.0",
     "webpack-dev-middleware": "6.1.1",

package/src/builders/application/execute-build.js

@@ -59,7 +59,7 @@ async function executeBuild(options, context, rebuildState) {
         // Global Scripts
         if (options.globalScripts.length > 0) {
             for (const initial of [true, false]) {
-                const bundleOptions = (0, global_scripts_1.createGlobalScriptsBundleOptions)(options, initial);
+                const bundleOptions = (0, global_scripts_1.createGlobalScriptsBundleOptions)(options, target, initial);
                 if (bundleOptions) {
                     bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, bundleOptions, () => initial));
                 }
@@ -69,7 +69,12 @@ async function executeBuild(options, context, rebuildState) {
         if (serverEntryPoint && (prerenderOptions || appShellOptions || ssrOptions)) {
             const nodeTargets = [...target, ...(0, utils_1.getSupportedNodeTargets)()];
             // Server application code
-            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, (0, application_code_bundle_1.createServerCodeBundleOptions)(options, nodeTargets, codeBundleCache), () => false));
+            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, (0, application_code_bundle_1.createServerCodeBundleOptions)({
+                ...options,
+                // Disable external deps for server bundles.
+                // This is because it breaks Vite 'optimizeDeps' for SSR.
+                externalPackages: false,
+            }, nodeTargets, codeBundleCache), () => false));
             // Server polyfills code
             const serverPolyfillBundleOptions = (0, application_code_bundle_1.createServerPolyfillBundleOptions)(options, nodeTargets, codeBundleCache);
             if (serverPolyfillBundleOptions) {
@@ -88,11 +93,33 @@ async function executeBuild(options, context, rebuildState) {
     }
     // Analyze external imports if external options are enabled
     if (options.externalPackages || options.externalDependencies?.length) {
+        const { browser = new Set(), server = new Set() } = bundlingResult.externalImports;
         // TODO: Filter externalImports to generate second argument to support wildcard externalDependency values
-        executionResult.setExternalMetadata([...bundlingResult.externalImports], options.externalDependencies);
+        executionResult.setExternalMetadata([...browser], [...server], options.externalDependencies);
     }
     const { metafile, initialFiles, outputFiles } = bundlingResult;
     executionResult.outputFiles.push(...outputFiles);
+    const changedFiles = rebuildState && executionResult.findChangedFiles(rebuildState.previousOutputHashes);
+    // Analyze files for bundle budget failures if present
+    let budgetFailures;
+    if (options.budgets) {
+        const compatStats = (0, budget_stats_1.generateBudgetStats)(metafile, initialFiles);
+        budgetFailures = [...(0, bundle_calculator_1.checkBudgets)(options.budgets, compatStats, true)];
+        if (budgetFailures.length > 0) {
+            const errors = budgetFailures
+                .filter((failure) => failure.severity === 'error')
+                .map(({ message }) => message);
+            const warnings = budgetFailures
+                .filter((failure) => failure.severity !== 'error')
+                .map(({ message }) => message);
+            await printWarningsAndErrorsToConsoleAndAddToResult(context, executionResult, warnings, errors);
+        }
+    }
+    // Calculate estimated transfer size if scripts are optimized
+    let estimatedTransferSizes;
+    if (optimizationOptions.scripts || optimizationOptions.styles.minify) {
+        estimatedTransferSizes = await (0, utils_1.calculateEstimatedTransferSizes)(executionResult.outputFiles);
+    }
     // Check metafile for CommonJS module usage if optimizing scripts
     if (optimizationOptions.scripts) {
         const messages = (0, commonjs_checker_1.checkCommonJSModules)(metafile, options.allowedCommonJsDependencies);
@@ -108,27 +135,6 @@ async function executeBuild(options, context, rebuildState) {
     if (options.extractLicenses) {
         executionResult.addOutputFile('3rdpartylicenses.txt', await (0, license_extractor_1.extractLicenses)(metafile, workspaceRoot), bundler_context_1.BuildOutputFileType.Root);
     }
-    // Analyze files for bundle budget failures if present
-    let budgetFailures;
-    if (options.budgets) {
-        const compatStats = (0, budget_stats_1.generateBudgetStats)(metafile, initialFiles);
-        budgetFailures = [...(0, bundle_calculator_1.checkBudgets)(options.budgets, compatStats, true)];
-        if (budgetFailures.length > 0) {
-            await (0, utils_1.logMessages)(context, {
-                errors: budgetFailures
-                    .filter((failure) => failure.severity === 'error')
-                    .map((failure) => ({ text: failure.message, location: null })),
-                warnings: budgetFailures
-                    .filter((failure) => failure.severity !== 'error')
-                    .map((failure) => ({ text: failure.message, location: null })),
-            });
-        }
-    }
-    // Calculate estimated transfer size if scripts are optimized
-    let estimatedTransferSizes;
-    if (optimizationOptions.scripts || optimizationOptions.styles.minify) {
-        estimatedTransferSizes = await (0, utils_1.calculateEstimatedTransferSizes)(executionResult.outputFiles);
-    }
     // Perform i18n translation inlining if enabled
     let prerenderedRoutes;
     let errors;
@@ -149,7 +155,7 @@ async function executeBuild(options, context, rebuildState) {
         executionResult.outputFiles.push(...result.additionalOutputFiles);
         executionResult.assetFiles.push(...result.additionalAssets);
     }
-    await printWarningsAndErrorsToConsole(context, warnings, errors);
+    await printWarningsAndErrorsToConsoleAndAddToResult(context, executionResult, warnings, errors);
     if (prerenderOptions) {
         executionResult.addOutputFile('prerendered-routes.json', JSON.stringify({ routes: prerenderedRoutes.sort((a, b) => a.localeCompare(b)) }, null, 2), bundler_context_1.BuildOutputFileType.Root);
         let prerenderMsg = `Prerendered ${prerenderedRoutes.length} static route`;
@@ -161,7 +167,6 @@ async function executeBuild(options, context, rebuildState) {
         }
         context.logger.info(color_1.colors.magenta(prerenderMsg) + '\n');
     }
-    const changedFiles = rebuildState && executionResult.findChangedFiles(rebuildState.previousOutputHashes);
     (0, utils_1.logBuildStats)(context, metafile, initialFiles, budgetFailures, changedFiles, estimatedTransferSizes);
     // Write metafile if stats option is enabled
     if (options.stats) {
@@ -170,9 +175,13 @@ async function executeBuild(options, context, rebuildState) {
     return executionResult;
 }
 exports.executeBuild = executeBuild;
-async function printWarningsAndErrorsToConsole(context, warnings, errors) {
+async function printWarningsAndErrorsToConsoleAndAddToResult(context, executionResult, warnings, errors) {
+    const errorMessages = errors.map((text) => ({ text, location: null }));
+    if (errorMessages.length) {
+        executionResult.addErrors(errorMessages);
+    }
     await (0, utils_1.logMessages)(context, {
-        errors: errors.map((text) => ({ text, location: null })),
+        errors: errorMessages,
         warnings: warnings.map((text) => ({ text, location: null })),
     });
 }

package/src/builders/dev-server/builder.d.ts

@@ -5,8 +5,10 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+/// <reference types="node" />
 import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
+import type http from 'node:http';
 import { Observable } from 'rxjs';
 import type { ExecutionTransformer } from '../../transforms';
 import type { IndexHtmlTransform } from '../../utils/index-file/index-html-generator';
@@ -14,10 +16,16 @@ import type { Schema as DevServerBuilderOptions } from './schema';
 import type { DevServerBuilderOutput } from './webpack-server';
 /**
  * A Builder that executes a development server based on the provided browser target option.
+ *
+ * Usage of the `transforms` and/or `extensions` parameters is NOT supported and may cause
+ * unexpected build output or build failures.
+ *
  * @param options Dev Server options.
  * @param context The build context.
  * @param transforms A map of transforms that can be used to hook into some logic (such as
  * transforming webpack configuration before passing it to webpack).
+ * @param extensions An optional object containing an array of build plugins (esbuild-based)
+ * and/or HTTP request middleware.
  *
  * @experimental Direct usage of this function is considered experimental.
  */
@@ -25,4 +33,7 @@ export declare function execute(options: DevServerBuilderOptions, context: Build
     webpackConfiguration?: ExecutionTransformer<import('webpack').Configuration>;
     logging?: import('@angular-devkit/build-webpack').WebpackLoggingCallback;
     indexHtml?: IndexHtmlTransform;
-}, plugins?: Plugin[]): Observable<DevServerBuilderOutput>;
+}, extensions?: {
+    buildPlugins?: Plugin[];
+    middleware?: ((req: http.IncomingMessage, res: http.ServerResponse, next: (err?: unknown) => void) => void)[];
+}): Observable<DevServerBuilderOutput>;

package/src/builders/dev-server/builder.js

@@ -37,14 +37,20 @@ const purge_cache_1 = require("../../utils/purge-cache");
 const options_1 = require("./options");
 /**
  * A Builder that executes a development server based on the provided browser target option.
+ *
+ * Usage of the `transforms` and/or `extensions` parameters is NOT supported and may cause
+ * unexpected build output or build failures.
+ *
  * @param options Dev Server options.
  * @param context The build context.
  * @param transforms A map of transforms that can be used to hook into some logic (such as
  * transforming webpack configuration before passing it to webpack).
+ * @param extensions An optional object containing an array of build plugins (esbuild-based)
+ * and/or HTTP request middleware.
  *
  * @experimental Direct usage of this function is considered experimental.
  */
-function execute(options, context, transforms = {}, plugins) {
+function execute(options, context, transforms = {}, extensions) {
     // Determine project name from builder context target
     const projectName = context.target?.project;
     if (!projectName) {
@@ -56,14 +62,17 @@ function execute(options, context, transforms = {}, plugins) {
         if (builderName === '@angular-devkit/build-angular:application' ||
             builderName === '@angular-devkit/build-angular:browser-esbuild' ||
             normalizedOptions.forceEsbuild) {
-            if (Object.keys(transforms).length > 0) {
+            if (transforms?.logging || transforms?.webpackConfiguration) {
                 throw new Error('The `application` and `browser-esbuild` builders do not support Webpack transforms.');
             }
-            return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./vite-server')))).pipe((0, rxjs_1.switchMap)(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context, plugins)));
+            return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./vite-server')))).pipe((0, rxjs_1.switchMap)(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context, transforms, extensions)));
         }
-        if (plugins?.length) {
+        if (extensions?.buildPlugins?.length) {
             throw new Error('Only the `application` and `browser-esbuild` builders support plugins.');
         }
+        if (extensions?.middleware?.length) {
+            throw new Error('Only the `application` and `browser-esbuild` builders support middleware.');
+        }
         // Use Webpack for all other browser targets
         return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./webpack-server')))).pipe((0, rxjs_1.switchMap)(({ serveWebpackBrowser }) => serveWebpackBrowser(normalizedOptions, builderName, context, transforms)));
     }));

package/src/builders/dev-server/vite-server.d.ts

@@ -7,7 +7,8 @@
  */
 import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
-import type { InlineConfig } from 'vite';
+import type { Connect, InlineConfig } from 'vite';
+import { ExternalResultMetadata } from '../../tools/esbuild/bundler-execution-result';
 import { JavaScriptTransformer } from '../../tools/esbuild/javascript-transformer';
 import type { NormalizedDevServerOptions } from './options';
 import type { DevServerBuilderOutput } from './webpack-server';
@@ -18,9 +19,11 @@ interface OutputFileRecord {
     updated: boolean;
     servable: boolean;
 }
-export declare function serveWithVite(serverOptions: NormalizedDevServerOptions, builderName: string, context: BuilderContext, plugins?: Plugin[]): AsyncIterableIterator<DevServerBuilderOutput>;
-export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: {
-    implicit: string[];
-    explicit: string[];
-}, ssr: boolean, prebundleTransformer: JavaScriptTransformer, target: string[]): Promise<InlineConfig>;
+export declare function serveWithVite(serverOptions: NormalizedDevServerOptions, builderName: string, context: BuilderContext, transformers?: {
+    indexHtml?: (content: string) => Promise<string>;
+}, extensions?: {
+    middleware?: Connect.NextHandleFunction[];
+    buildPlugins?: Plugin[];
+}): AsyncIterableIterator<DevServerBuilderOutput>;
+export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: ExternalResultMetadata, ssr: boolean, prebundleTransformer: JavaScriptTransformer, target: string[], extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>): Promise<InlineConfig>;
 export {};

package/src/builders/dev-server/vite-server.js

@@ -37,11 +37,11 @@ exports.setupServer = exports.serveWithVite = void 0;
 const remapping_1 = __importDefault(require("@ampproject/remapping"));
 const mrmime_1 = require("mrmime");
 const node_assert_1 = __importDefault(require("node:assert"));
-const node_crypto_1 = require("node:crypto");
 const promises_1 = require("node:fs/promises");
-const node_path_1 = __importDefault(require("node:path"));
+const node_path_1 = require("node:path");
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const javascript_transformer_1 = require("../../tools/esbuild/javascript-transformer");
+const rxjs_esm_resolution_plugin_1 = require("../../tools/esbuild/rxjs-esm-resolution-plugin");
 const utils_1 = require("../../tools/esbuild/utils");
 const i18n_locale_plugin_1 = require("../../tools/vite/i18n-locale-plugin");
 const render_page_1 = require("../../utils/server-rendering/render-page");
@@ -50,7 +50,8 @@ const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const application_1 = require("../application");
 const browser_esbuild_1 = require("../browser-esbuild");
 const load_proxy_config_1 = require("./load-proxy-config");
-async function* serveWithVite(serverOptions, builderName, context, plugins) {
+// eslint-disable-next-line max-lines-per-function
+async function* serveWithVite(serverOptions, builderName, context, transformers, extensions) {
     // Get the browser configuration from the target name.
     const rawBrowserOptions = (await context.getTargetOptions(serverOptions.buildTarget));
     const browserOptions = (await context.validateOptions({
@@ -89,7 +90,7 @@ async function* serveWithVite(serverOptions, builderName, context, plugins) {
     // Always enable JIT linking to support applications built with and without AOT.
     // In a development environment the additional scope information does not
     // have a negative effect unlike production where final output size is relevant.
-    { sourcemap: true, jit: true }, 1);
+    { sourcemap: true, jit: true }, 1, true);
     // Extract output index from options
     // TODO: Provide this info from the build results
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -97,12 +98,13 @@ async function* serveWithVite(serverOptions, builderName, context, plugins) {
     // dynamically import Vite for ESM compatibility
     const { createServer, normalizePath } = await Promise.resolve().then(() => __importStar(require('vite')));
     let server;
-    let listeningAddress;
+    let serverUrl;
     let hadError = false;
     const generatedFiles = new Map();
     const assetFiles = new Map();
     const externalMetadata = {
-        implicit: [],
+        implicitBrowser: [],
+        implicitServer: [],
         explicit: [],
     };
     const build = builderName === '@angular-devkit/build-angular:application'
@@ -113,7 +115,7 @@ async function* serveWithVite(serverOptions, builderName, context, plugins) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     browserOptions, context, {
         write: false,
-    }, plugins)) {
+    }, extensions?.buildPlugins)) {
         (0, node_assert_1.default)(result.outputFiles, 'Builder did not provide result files.');
         // If build failed, nothing to serve
         if (!result.success) {
@@ -147,15 +149,21 @@ async function* serveWithVite(serverOptions, builderName, context, plugins) {
                 assetFiles.set('/' + normalizePath(asset.destination), asset.source);
             }
         }
-        // To avoid disconnecting the array objects from the option, these arrays need to be mutated
-        // instead of replaced.
+        // To avoid disconnecting the array objects from the option, these arrays need to be mutated instead of replaced.
         if (result.externalMetadata) {
-            if (result.externalMetadata.explicit) {
-                externalMetadata.explicit.push(...result.externalMetadata.explicit);
-            }
-            if (result.externalMetadata.implicit) {
-                externalMetadata.implicit.push(...result.externalMetadata.implicit);
-            }
+            const { implicitBrowser, implicitServer, explicit } = result.externalMetadata;
+            // Empty Arrays to avoid growing unlimited with every re-build.
+            externalMetadata.explicit.length = 0;
+            externalMetadata.implicitServer.length = 0;
+            externalMetadata.implicitBrowser.length = 0;
+            externalMetadata.explicit.push(...explicit);
+            externalMetadata.implicitServer.push(...implicitServer);
+            externalMetadata.implicitBrowser.push(...implicitBrowser);
+            // The below needs to be sorted as Vite uses these options are part of the hashing invalidation algorithm.
+            // See: https://github.com/vitejs/vite/blob/0873bae0cfe0f0718ad2f5743dd34a17e4ab563d/packages/vite/src/node/optimizer/index.ts#L1203-L1239
+            externalMetadata.explicit.sort();
+            externalMetadata.implicitServer.sort();
+            externalMetadata.implicitBrowser.sort();
         }
         if (server) {
             handleUpdate(normalizePath, generatedFiles, server, serverOptions, context.logger);
@@ -166,19 +174,37 @@ async function* serveWithVite(serverOptions, builderName, context, plugins) {
                 throw new Error('The builder requires a target.');
             }
             const { root = '' } = await context.getProjectMetadata(projectName);
-            const projectRoot = node_path_1.default.join(context.workspaceRoot, root);
+            const projectRoot = (0, node_path_1.join)(context.workspaceRoot, root);
             const browsers = (0, supported_browsers_1.getSupportedBrowsers)(projectRoot, context.logger);
             const target = (0, utils_1.transformSupportedBrowsersToTargets)(browsers);
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, extensions?.middleware, transformers?.indexHtml);
             server = await createServer(serverConfiguration);
             await server.listen();
-            listeningAddress = server.httpServer?.address();
+            if (serverConfiguration.ssr?.optimizeDeps?.disabled === false) {
+                /**
+                 * Vite will only start dependency optimization of SSR modules when the first request comes in.
+                 * In some cases, this causes a long waiting time. To mitigate this, we call `ssrLoadModule` to
+                 * initiate this process before the first request.
+                 *
+                 * NOTE: This will intentionally fail from the unknown module, but currently there is no other way
+                 * to initiate the SSR dep optimizer.
+                 */
+                void server.ssrLoadModule('<deps-caller>').catch(() => { });
+            }
+            const urls = server.resolvedUrls;
+            if (urls && (urls.local.length || urls.network.length)) {
+                serverUrl = new URL(urls.local[0] ?? urls.network[0]);
+            }
             // log connection information
             server.printUrls();
         }
         // TODO: adjust output typings to reflect both development servers
-        yield { success: true, port: listeningAddress?.port };
+        yield {
+            success: true,
+            port: serverUrl?.port,
+            baseUrl: serverUrl?.href,
+        };
     }
     // Add cleanup logic via a builder teardown
     let deferred;
@@ -196,7 +222,7 @@ function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logg
     for (const [file, record] of generatedFiles) {
         if (record.updated) {
             updatedFiles.push(file);
-            const updatedModules = server.moduleGraph.getModulesByFile(normalizePath(node_path_1.default.join(server.config.root, file)));
+            const updatedModules = server.moduleGraph.getModulesByFile(normalizePath((0, node_path_1.join)(server.config.root, file)));
             updatedModules?.forEach((m) => server?.moduleGraph.invalidateModule(m));
         }
     }
@@ -240,7 +266,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
             filePath = '/index.html';
         }
         else {
-            filePath = normalizePath(file.path);
+            filePath = '/' + normalizePath(file.path);
         }
         seen.add(filePath);
         // Skip analysis of sourcemaps
@@ -278,16 +304,20 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
     }
 }
 // eslint-disable-next-line max-lines-per-function
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, extensionMiddleware, indexHtmlTransformer) {
     const proxy = await (0, load_proxy_config_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig, true);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await Promise.resolve().then(() => __importStar(require('vite')));
     // Path will not exist on disk and only used to provide separate path for Vite requests
-    const virtualProjectRoot = normalizePath(node_path_1.default.join(serverOptions.workspaceRoot, `.angular/vite-root/${(0, node_crypto_1.randomUUID)()}/`));
+    const virtualProjectRoot = normalizePath((0, node_path_1.join)(serverOptions.workspaceRoot, `.angular/vite-root`, serverOptions.buildTarget.project));
+    const serverExplicitExternal = [
+        ...(await Promise.resolve().then(() => __importStar(require('node:module')))).builtinModules,
+        ...externalMetadata.explicit,
+    ];
     const configuration = {
         configFile: false,
         envFile: false,
-        cacheDir: node_path_1.default.join(serverOptions.cacheOptions.path, 'vite'),
+        cacheDir: (0, node_path_1.join)(serverOptions.cacheOptions.path, 'vite'),
         root: virtualProjectRoot,
         publicDir: false,
         esbuild: false,
@@ -317,8 +347,31 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             preTransformRequests: externalMetadata.explicit.length === 0,
         },
         ssr: {
-            // Exclude any provided dependencies (currently build defined externals)
-            external: externalMetadata.explicit,
+            // Note: `true` and `/.*/` have different sematics. When true, the `external` option is ignored.
+            noExternal: /.*/,
+            // Exclude any Node.js built in module and provided dependencies (currently build defined externals)
+            external: serverExplicitExternal,
+            optimizeDeps: getDepOptimizationConfig({
+                /**
+                 * *********************************************
+                 * NOTE: Temporary disable 'optimizeDeps' for SSR.
+                 * *********************************************
+                 *
+                 * Currently this causes a number of issues.
+                 * - Deps are re-optimized everytime the server is started.
+                 * - Added deps after a rebuild are not optimized.
+                 * - Breaks RxJs (Unless it is added as external). See: https://github.com/angular/angular-cli/issues/26235
+                 */
+                // Only enable with caching since it causes prebundle dependencies to be cached
+                disabled: true,
+                // Exclude any explicitly defined dependencies (currently build defined externals and node.js built-ins)
+                exclude: serverExplicitExternal,
+                // Include all implict dependencies from the external packages internal option
+                include: externalMetadata.implicitServer,
+                ssr: true,
+                prebundleTransformer,
+                target,
+            }),
         },
         plugins: [
             (0, i18n_locale_plugin_1.createAngularLocaleDataPlugin)(),
@@ -336,19 +389,18 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                     if (importer && source[0] === '.' && importer.startsWith(virtualProjectRoot)) {
                         // Remove query if present
                         const [importerFile] = importer.split('?', 1);
-                        source = normalizePath(node_path_1.default.join(node_path_1.default.dirname(node_path_1.default.relative(virtualProjectRoot, importerFile)), source));
-                    }
-                    if (source[0] === '/') {
-                        source = source.slice(1);
+                        source =
+                            '/' +
+                                normalizePath((0, node_path_1.join)((0, node_path_1.dirname)((0, node_path_1.relative)(virtualProjectRoot, importerFile)), source));
                     }
                     const [file] = source.split('?', 1);
                     if (outputFiles.has(file)) {
-                        return node_path_1.default.join(virtualProjectRoot, source);
+                        return (0, node_path_1.join)(virtualProjectRoot, source);
                     }
                 },
                 load(id) {
                     const [file] = id.split('?', 1);
-                    const relativeFile = normalizePath(node_path_1.default.relative(virtualProjectRoot, file));
+                    const relativeFile = '/' + normalizePath((0, node_path_1.relative)(virtualProjectRoot, file));
                     const codeContents = outputFiles.get(relativeFile)?.contents;
                     if (codeContents === undefined) {
                         if (relativeFile.endsWith('/node_modules/vite/dist/client/client.mjs')) {
@@ -392,7 +444,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                         // Parse the incoming request.
                         // The base of the URL is unused but required to parse the URL.
                         const pathname = pathnameWithoutServePath(req.url, serverOptions);
-                        const extension = node_path_1.default.extname(pathname);
+                        const extension = (0, node_path_1.extname)(pathname);
                         // Rewrite all build assets to a vite raw fs URL
                         const assetSourcePath = assets.get(pathname);
                         if (assetSourcePath !== undefined) {
@@ -422,16 +474,24 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                         }
                         next();
                     });
+                    if (extensionMiddleware?.length) {
+                        extensionMiddleware.forEach((middleware) => server.middlewares.use(middleware));
+                    }
                     // Returning a function, installs middleware after the main transform middleware but
                     // before the built-in HTML middleware
                     return () => {
                         function angularSSRMiddleware(req, res, next) {
                             const url = req.originalUrl;
-                            if (!url || url.endsWith('.html')) {
+                            if (
+                            // Skip if path is not defined.
+                            !url ||
+                                // Skip if path is like a file.
+                                // NOTE: We use a regexp to mitigate against matching requests like: /browse/pl.0ef59752c0cd457dbf1391f08cbd936f
+                                /^\.[a-z]{2,4}$/i.test((0, node_path_1.extname)(url.split('?')[0]))) {
                                 next();
                                 return;
                             }
-                            const rawHtml = outputFiles.get('index.server.html')?.contents;
+                            const rawHtml = outputFiles.get('/index.server.html')?.contents;
                             if (!rawHtml) {
                                 next();
                                 return;
@@ -443,15 +503,17 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                                     document: html,
                                     route,
                                     serverContext: 'ssr',
-                                    loadBundle: (path) => 
+                                    loadBundle: (uri) => 
                                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                    server.ssrLoadModule(path.slice(1)),
+                                    server.ssrLoadModule(uri.slice(1)),
                                     // Files here are only needed for critical CSS inlining.
                                     outputFiles: {},
                                     // TODO: add support for critical css inlining.
                                     inlineCriticalCss: false,
                                 });
-                                return content;
+                                return indexHtmlTransformer && content
+                                    ? await indexHtmlTransformer(content)
+                                    : content;
                             });
                         }
                         if (ssr) {
@@ -468,7 +530,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                             if (pathname === '/' || pathname === `/index.html`) {
                                 const rawHtml = outputFiles.get('/index.html')?.contents;
                                 if (rawHtml) {
-                                    transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next);
+                                    transformIndexHtmlAndAddHeaders(req.url, rawHtml, res, next, indexHtmlTransformer);
                                     return;
                                 }
                             }
@@ -499,35 +561,18 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 },
             },
         ],
-        optimizeDeps: {
+        // Browser only optimizeDeps. (This does not run for SSR dependencies).
+        optimizeDeps: getDepOptimizationConfig({
             // Only enable with caching since it causes prebundle dependencies to be cached
             disabled: !serverOptions.cacheOptions.enabled,
             // Exclude any explicitly defined dependencies (currently build defined externals)
             exclude: externalMetadata.explicit,
             // Include all implict dependencies from the external packages internal option
-            include: externalMetadata.implicit,
-            // Skip automatic file-based entry point discovery
-            entries: [],
-            // Add an esbuild plugin to run the Angular linker on dependencies
-            esbuildOptions: {
-                // Set esbuild supported targets.
-                target,
-                supported: (0, utils_1.getFeatureSupport)(target),
-                plugins: [
-                    {
-                        name: 'angular-vite-optimize-deps',
-                        setup(build) {
-                            build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
-                                return {
-                                    contents: await prebundleTransformer.transformFile(args.path),
-                                    loader: 'js',
-                                };
-                            });
-                        },
-                    },
-                ],
-            },
-        },
+            include: externalMetadata.implicitBrowser,
+            ssr: false,
+            prebundleTransformer,
+            target,
+        }),
     };
     if (serverOptions.ssl) {
         if (serverOptions.sslCert && serverOptions.sslKey) {
@@ -575,3 +620,36 @@ function pathnameWithoutServePath(url, serverOptions) {
     }
     return pathname;
 }
+function getDepOptimizationConfig({ disabled, exclude, include, target, prebundleTransformer, ssr, }) {
+    const plugins = [
+        {
+            name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}`,
+            setup(build) {
+                build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
+                    return {
+                        contents: await prebundleTransformer.transformFile(args.path),
+                        loader: 'js',
+                    };
+                });
+            },
+        },
+    ];
+    if (ssr) {
+        plugins.unshift((0, rxjs_esm_resolution_plugin_1.createRxjsEsmResolutionPlugin)());
+    }
+    return {
+        // Only enable with caching since it causes prebundle dependencies to be cached
+        disabled,
+        // Exclude any explicitly defined dependencies (currently build defined externals)
+        exclude,
+        // Include all implict dependencies from the external packages internal option
+        include,
+        // Add an esbuild plugin to run the Angular linker on dependencies
+        esbuildOptions: {
+            // Set esbuild supported targets.
+            target,
+            supported: (0, utils_1.getFeatureSupport)(target),
+            plugins,
+        },
+    };
+}