@angular-devkit/build-angular 17.2.0-next.0 → 17.2.0-rc.0

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.2.0-next.0",
+  "version": "17.2.0-rc.0",
   "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.1702.0-next.0",
-    "@angular-devkit/build-webpack": "0.1702.0-next.0",
-    "@angular-devkit/core": "17.2.0-next.0",
-    "@babel/core": "7.23.7",
+    "@angular-devkit/architect": "0.1702.0-rc.0",
+    "@angular-devkit/build-webpack": "0.1702.0-rc.0",
+    "@angular-devkit/core": "17.2.0-rc.0",
+    "@babel/core": "7.23.9",
     "@babel/generator": "7.23.6",
     "@babel/helper-annotate-as-pure": "7.22.5",
     "@babel/helper-split-export-declaration": "7.22.6",
-    "@babel/plugin-transform-async-generator-functions": "7.23.7",
+    "@babel/plugin-transform-async-generator-functions": "7.23.9",
     "@babel/plugin-transform-async-to-generator": "7.23.3",
-    "@babel/plugin-transform-runtime": "7.23.7",
-    "@babel/preset-env": "7.23.8",
-    "@babel/runtime": "7.23.8",
+    "@babel/plugin-transform-runtime": "7.23.9",
+    "@babel/preset-env": "7.23.9",
+    "@babel/runtime": "7.23.9",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.2.0-next.0",
+    "@ngtools/webpack": "17.2.0-rc.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.17",
@@ -29,50 +29,49 @@
     "browserslist": "^4.21.5",
     "copy-webpack-plugin": "12.0.2",
     "critters": "0.0.20",
-    "css-loader": "6.9.1",
-    "esbuild-wasm": "0.19.12",
+    "css-loader": "6.10.0",
+    "esbuild-wasm": "0.20.0",
     "fast-glob": "3.3.2",
     "https-proxy-agent": "7.0.2",
     "http-proxy-middleware": "2.0.6",
-    "inquirer": "9.2.12",
+    "inquirer": "9.2.14",
     "jsonc-parser": "3.2.1",
     "karma-source-map-support": "1.4.0",
     "less": "4.2.0",
     "less-loader": "11.1.0",
     "license-webpack-plugin": "4.0.2",
     "loader-utils": "3.2.1",
-    "magic-string": "0.30.5",
-    "mini-css-extract-plugin": "2.7.7",
+    "magic-string": "0.30.7",
+    "mini-css-extract-plugin": "2.8.0",
     "mrmime": "2.0.0",
     "open": "8.4.2",
     "ora": "5.4.1",
     "parse5-html-rewriting-stream": "7.0.0",
-    "picomatch": "3.0.1",
-    "piscina": "4.3.0",
-    "postcss": "8.4.33",
-    "postcss-loader": "8.0.0",
+    "picomatch": "4.0.1",
+    "piscina": "4.3.1",
+    "postcss": "8.4.35",
+    "postcss-loader": "8.1.0",
     "resolve-url-loader": "5.0.0",
     "rxjs": "7.8.1",
     "sass": "1.70.0",
-    "sass-loader": "14.0.0",
-    "semver": "7.5.4",
+    "sass-loader": "14.1.0",
+    "semver": "7.6.0",
     "source-map-loader": "5.0.0",
     "source-map-support": "0.5.21",
     "terser": "5.27.0",
-    "text-table": "0.2.0",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "6.4.0",
+    "undici": "6.6.2",
     "vite": "5.0.12",
     "watchpack": "2.4.0",
-    "webpack": "5.89.0",
+    "webpack": "5.90.1",
     "webpack-dev-middleware": "6.1.1",
     "webpack-dev-server": "4.15.1",
     "webpack-merge": "5.10.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "optionalDependencies": {
-    "esbuild": "0.19.12"
+    "esbuild": "0.20.0"
   },
   "peerDependencies": {
     "@angular/compiler-cli": "^17.0.0 || ^17.2.0-next.0",

package/src/builders/application/build-action.d.ts

@@ -26,4 +26,5 @@ export declare function runEsBuildBuildAction(action: (rebuildState?: RebuildSta
     poll?: number;
     signal?: AbortSignal;
     preserveSymlinks?: boolean;
+    clearScreen?: boolean;
 }): AsyncIterable<(ExecutionResult['outputWithFiles'] | ExecutionResult['output']) & BuilderOutput>;

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

@@ -40,8 +40,21 @@ const sass_language_1 = require("../../tools/esbuild/stylesheets/sass-language")
 const utils_1 = require("../../tools/esbuild/utils");
 const delete_output_dir_1 = require("../../utils/delete-output-dir");
 const environment_options_1 = require("../../utils/environment-options");
+// Watch workspace for package manager changes
+const packageWatchFiles = [
+    // manifest can affect module resolution
+    'package.json',
+    // npm lock file
+    'package-lock.json',
+    // pnpm lock file
+    'pnpm-lock.yaml',
+    // yarn lock file including Yarn PnP manifest files (https://yarnpkg.com/advanced/pnp-spec/)
+    'yarn.lock',
+    '.pnp.cjs',
+    '.pnp.data.json',
+];
 async function* runEsBuildBuildAction(action, options) {
-    const { writeToFileSystemFilter, writeToFileSystem, watch, poll, logger, deleteOutputPath, cacheOptions, outputOptions, verbose, projectRoot, workspaceRoot, progress, preserveSymlinks, } = options;
+    const { writeToFileSystemFilter, writeToFileSystem, watch, poll, clearScreen, logger, deleteOutputPath, cacheOptions, outputOptions, verbose, projectRoot, workspaceRoot, progress, preserveSymlinks, } = options;
     if (deleteOutputPath && writeToFileSystem) {
         await (0, delete_output_dir_1.deleteOutputDir)(workspaceRoot, outputOptions.base, [
             outputOptions.browser,
@@ -54,8 +67,6 @@ async function* runEsBuildBuildAction(action, options) {
     try {
         // Perform the build action
         result = await withProgress('Building...', () => action());
-        // Log all diagnostic (error/warning) messages from the build
-        await (0, utils_1.logMessages)(logger, result);
     }
     finally {
         // Ensure Sass workers are shutdown if not watching
@@ -95,19 +106,6 @@ async function* runEsBuildBuildAction(action, options) {
         if (environment_options_1.shouldWatchRoot) {
             watcher.add(projectRoot);
         }
-        // Watch workspace for package manager changes
-        const packageWatchFiles = [
-            // manifest can affect module resolution
-            'package.json',
-            // npm lock file
-            'package-lock.json',
-            // pnpm lock file
-            'pnpm-lock.yaml',
-            // yarn lock file including Yarn PnP manifest files (https://yarnpkg.com/advanced/pnp-spec/)
-            'yarn.lock',
-            '.pnp.cjs',
-            '.pnp.data.json',
-        ];
         watcher.add(packageWatchFiles
             .map((file) => node_path_1.default.join(workspaceRoot, file))
             .filter((file) => (0, node_fs_1.existsSync)(file)));
@@ -138,12 +136,14 @@ async function* runEsBuildBuildAction(action, options) {
             if (options.signal?.aborted) {
                 break;
             }
+            if (clearScreen) {
+                // eslint-disable-next-line no-console
+                console.clear();
+            }
             if (verbose) {
                 logger.info(changes.toDebugString());
             }
             result = await withProgress('Changes detected. Rebuilding...', () => action(result.createRebuildState(changes)));
-            // Log all diagnostic (error/warning) messages from the rebuild
-            await (0, utils_1.logMessages)(logger, result);
             // Update watched locations provided by the new build result.
             // Keep watching all previous files if there are any errors; otherwise consider all
             // files stale until confirmed present in the new result's watch files.

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

@@ -16,14 +16,13 @@ const commonjs_checker_1 = require("../../tools/esbuild/commonjs-checker");
 const license_extractor_1 = require("../../tools/esbuild/license-extractor");
 const utils_1 = require("../../tools/esbuild/utils");
 const bundle_calculator_1 = require("../../utils/bundle-calculator");
-const color_1 = require("../../utils/color");
 const copy_assets_1 = require("../../utils/copy-assets");
 const supported_browsers_1 = require("../../utils/supported-browsers");
 const execute_post_bundle_1 = require("./execute-post-bundle");
 const i18n_1 = require("./i18n");
 const setup_bundling_1 = require("./setup-bundling");
 async function executeBuild(options, context, rebuildState) {
-    const { projectRoot, workspaceRoot, i18nOptions, optimizationOptions, assets, cacheOptions, prerenderOptions, } = options;
+    const { projectRoot, workspaceRoot, i18nOptions, optimizationOptions, assets, cacheOptions, prerenderOptions, ssrOptions, verbose, colors, jsonLogs, } = options;
     // TODO: Consider integrating into watch mode. Would require full rebuild on target changes.
     const browsers = (0, supported_browsers_1.getSupportedBrowsers)(projectRoot, context.logger);
     // Load active translations if inlining
@@ -96,12 +95,11 @@ async function executeBuild(options, context, rebuildState) {
         executionResult.addOutputFile('3rdpartylicenses.txt', await (0, license_extractor_1.extractLicenses)(metafile, workspaceRoot), bundler_context_1.BuildOutputFileType.Root);
     }
     // Perform i18n translation inlining if enabled
-    let prerenderedRoutes;
     if (i18nOptions.shouldInline) {
         const result = await (0, i18n_1.inlineI18n)(options, executionResult, initialFiles);
         executionResult.addErrors(result.errors);
         executionResult.addWarnings(result.warnings);
-        prerenderedRoutes = result.prerenderedRoutes;
+        executionResult.addPrerenderedRoutes(result.prerenderedRoutes);
     }
     else {
         const result = await (0, execute_post_bundle_1.executePostBundleSteps)(options, executionResult.outputFiles, executionResult.assetFiles, initialFiles, 
@@ -109,26 +107,21 @@ async function executeBuild(options, context, rebuildState) {
         i18nOptions.hasDefinedSourceLocale ? i18nOptions.sourceLocale : undefined);
         executionResult.addErrors(result.errors);
         executionResult.addWarnings(result.warnings);
-        prerenderedRoutes = result.prerenderedRoutes;
+        executionResult.addPrerenderedRoutes(result.prerenderedRoutes);
         executionResult.outputFiles.push(...result.additionalOutputFiles);
         executionResult.assetFiles.push(...result.additionalAssets);
     }
     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`;
-        if (prerenderedRoutes.length > 1) {
-            prerenderMsg += 's.';
-        }
-        else {
-            prerenderMsg += '.';
-        }
-        context.logger.info(color_1.colors.magenta(prerenderMsg) + '\n');
+        const prerenderedRoutes = executionResult.prerenderedRoutes;
+        executionResult.addOutputFile('prerendered-routes.json', JSON.stringify({ routes: prerenderedRoutes }, null, 2), bundler_context_1.BuildOutputFileType.Root);
     }
-    (0, utils_1.logBuildStats)(context.logger, metafile, initialFiles, budgetFailures, changedFiles, estimatedTransferSizes);
     // Write metafile if stats option is enabled
     if (options.stats) {
         executionResult.addOutputFile('stats.json', JSON.stringify(metafile, null, 2), bundler_context_1.BuildOutputFileType.Root);
     }
+    if (!jsonLogs) {
+        context.logger.info((0, utils_1.logBuildStats)(metafile, initialFiles, budgetFailures, colors, changedFiles, estimatedTransferSizes, !!ssrOptions, verbose));
+    }
     return executionResult;
 }
 exports.executeBuild = executeBuild;

package/src/builders/application/index.js

@@ -10,6 +10,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildApplication = exports.buildApplicationInternal = void 0;
 const architect_1 = require("@angular-devkit/architect");
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
+const utils_1 = require("../../tools/esbuild/utils");
+const color_1 = require("../../utils/color");
 const purge_cache_1 = require("../../utils/purge-cache");
 const version_1 = require("../../utils/version");
 const build_action_1 = require("./build-action");
@@ -57,11 +59,25 @@ context, infrastructureSettings, extensions) {
         context.addTeardown(() => controller.abort('builder-teardown'));
     }
     yield* (0, build_action_1.runEsBuildBuildAction)(async (rebuildState) => {
+        const { prerenderOptions, outputOptions, jsonLogs } = normalizedOptions;
         const startTime = process.hrtime.bigint();
         const result = await (0, execute_build_1.executeBuild)(normalizedOptions, context, rebuildState);
-        const buildTime = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
-        const status = result.errors.length > 0 ? 'failed' : 'complete';
-        logger.info(`Application bundle generation ${status}. [${buildTime.toFixed(3)} seconds]`);
+        if (!jsonLogs) {
+            if (prerenderOptions) {
+                const prerenderedRoutesLength = result.prerenderedRoutes.length;
+                let prerenderMsg = `Prerendered ${prerenderedRoutesLength} static route`;
+                prerenderMsg += prerenderedRoutesLength !== 1 ? 's.' : '.';
+                logger.info(color_1.colors.magenta(prerenderMsg));
+            }
+            const buildTime = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
+            const hasError = result.errors.length > 0;
+            if (writeToFileSystem && !hasError) {
+                logger.info(`Output location: ${outputOptions.base}\n`);
+            }
+            logger.info(`Application bundle generation ${hasError ? 'failed' : 'complete'}. [${buildTime.toFixed(3)} seconds]`);
+        }
+        // Log all diagnostic (error/warning) messages
+        await (0, utils_1.logMessages)(logger, result, normalizedOptions);
         return result;
     }, {
         watch: normalizedOptions.watch,
@@ -74,6 +90,7 @@ context, infrastructureSettings, extensions) {
         projectRoot: normalizedOptions.projectRoot,
         workspaceRoot: normalizedOptions.workspaceRoot,
         progress: normalizedOptions.progress,
+        clearScreen: normalizedOptions.clearScreen,
         writeToFileSystem,
         // For app-shell and SSG server files are not required by users.
         // Omit these when SSR is not enabled.

package/src/builders/application/options.d.ts

@@ -31,7 +31,9 @@ interface InternalOptions {
      * Indicates whether all node packages should be marked as external.
      * Currently used by the dev-server to support prebundling.
      */
-    externalPackages?: boolean;
+    externalPackages?: boolean | {
+        exclude: string[];
+    };
     /**
      * Forces the output from the localize post-processing to not create nested directories per locale output.
      * This is only used by the development server which currently only supports a single locale per build.
@@ -72,7 +74,9 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     polyfills: string[] | undefined;
     poll: number | undefined;
     progress: boolean;
-    externalPackages: boolean | undefined;
+    externalPackages: boolean | {
+        exclude: string[];
+    } | undefined;
     preserveSymlinks: boolean;
     stylePreprocessorOptions: import("./schema").StylePreprocessorOptions | undefined;
     subresourceIntegrity: boolean | undefined;
@@ -127,6 +131,7 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
         file: string;
         package: string;
     } | undefined;
+    postcssConfiguration: import("../../utils/postcss-configuration").PostcssConfiguration | undefined;
     i18nOptions: I18nOptions & {
         duplicateTranslationBehavior?: I18NTranslation | undefined;
         missingTranslationBehavior?: I18NTranslation | undefined;
@@ -136,5 +141,11 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     publicPath: string | undefined;
     plugins: Plugin[] | undefined;
     loaderExtensions: Record<string, "binary" | "file" | "text"> | undefined;
+    jsonLogs: boolean;
+    colors: boolean;
+    clearScreen: boolean | undefined;
+    define: {
+        [key: string]: string;
+    } | undefined;
 }>;
 export {};

package/src/builders/application/options.js

@@ -17,9 +17,12 @@ const node_module_1 = require("node:module");
 const node_path_1 = __importDefault(require("node:path"));
 const helpers_1 = require("../../tools/webpack/utils/helpers");
 const utils_1 = require("../../utils");
+const color_1 = require("../../utils/color");
+const environment_options_1 = require("../../utils/environment-options");
 const i18n_options_1 = require("../../utils/i18n-options");
 const normalize_cache_1 = require("../../utils/normalize-cache");
 const package_chunk_sort_1 = require("../../utils/package-chunk-sort");
+const postcss_configuration_1 = require("../../utils/postcss-configuration");
 const tailwind_1 = require("../../utils/tailwind");
 const webpack_browser_config_1 = require("../../utils/webpack-browser-config");
 const schema_1 = require("./schema");
@@ -70,7 +73,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         server: 'server',
         media: 'media',
         ...(typeof outputPath === 'string' ? undefined : outputPath),
-        base: normalizeDirectoryPath(node_path_1.default.join(workspaceRoot, typeof outputPath === 'string' ? outputPath : outputPath.base)),
+        base: normalizeDirectoryPath(node_path_1.default.resolve(workspaceRoot, typeof outputPath === 'string' ? outputPath : outputPath.base)),
     };
     const outputNames = {
         bundles: options.outputHashing === schema_1.OutputHashing.All || options.outputHashing === schema_1.OutputHashing.Bundles
@@ -108,6 +111,11 @@ async function normalizeOptions(context, projectName, options, extensions) {
             loaderExtensions[extension] = value;
         }
     }
+    const postcssConfiguration = await (0, postcss_configuration_1.loadPostcssConfiguration)(workspaceRoot, projectRoot);
+    // Skip tailwind configuration if postcss is customized
+    const tailwindConfiguration = postcssConfiguration
+        ? undefined
+        : await getTailwindConfig(workspaceRoot, projectRoot, context);
     const globalStyles = [];
     if (options.styles?.length) {
         const { entryPoints: stylesheetEntrypoints, noInjectNames } = (0, helpers_1.normalizeGlobalStyles)(options.styles || []);
@@ -170,7 +178,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         };
     }
     // Initial options to keep
-    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, deleteOutputPath, namedChunks, budgets, deployUrl, } = options;
+    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, deleteOutputPath, namedChunks, budgets, deployUrl, clearScreen, define, } = options;
     // Return all the normalized options
     return {
         advancedOptimizations: !!aot && optimizationOptions.scripts,
@@ -212,13 +220,18 @@ async function normalizeOptions(context, projectName, options, extensions) {
         globalScripts,
         serviceWorker: typeof serviceWorker === 'string' ? node_path_1.default.join(workspaceRoot, serviceWorker) : undefined,
         indexHtmlOptions,
-        tailwindConfiguration: await getTailwindConfig(workspaceRoot, projectRoot, context),
+        tailwindConfiguration,
+        postcssConfiguration,
         i18nOptions,
         namedChunks,
         budgets: budgets?.length ? budgets : undefined,
         publicPath: deployUrl ? deployUrl : undefined,
         plugins: extensions?.codePlugins?.length ? extensions?.codePlugins : undefined,
         loaderExtensions,
+        jsonLogs: environment_options_1.useJSONBuildLogs,
+        colors: color_1.colors.enabled,
+        clearScreen,
+        define,
     };
 }
 exports.normalizeOptions = normalizeOptions;

package/src/builders/application/schema.d.ts

@@ -33,10 +33,23 @@ export interface Schema {
      * set.
      */
     budgets?: Budget[];
+    /**
+     * Automatically clear the terminal screen during rebuilds.
+     */
+    clearScreen?: boolean;
     /**
      * Define the crossorigin attribute setting of elements that provide CORS support.
      */
     crossOrigin?: CrossOrigin;
+    /**
+     * Defines global identifiers that will be replaced with a specified constant value when
+     * found in any JavaScript or TypeScript code including libraries. The value will be used
+     * directly. String values must be put in quotes. Identifiers within Angular metadata such
+     * as Component Decorators will not be replaced.
+     */
+    define?: {
+        [key: string]: string;
+    };
     /**
      * Delete the output path before building.
      */

package/src/builders/application/schema.json

@@ -133,6 +133,11 @@
       },
       "default": []
     },
+    "clearScreen": {
+      "type": "boolean",
+      "default": false,
+      "description": "Automatically clear the terminal screen during rebuilds."
+    },
     "optimization": {
       "description": "Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining. For more information, see https://angular.io/guide/workspace-config#optimization-configuration.",
       "default": true,
@@ -211,6 +216,13 @@
         "^\\.\\S+$": { "enum": ["text", "binary", "file", "empty"] }
       }
     },
+    "define": {
+      "description": "Defines global identifiers that will be replaced with a specified constant value when found in any JavaScript or TypeScript code including libraries. The value will be used directly. String values must be put in quotes. Identifiers within Angular metadata such as Component Decorators will not be replaced.",
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
     "fileReplacements": {
       "description": "Replace compilation source files with other compilation source files in the build.",
       "type": "array",

package/src/builders/application/setup-bundling.js

@@ -59,11 +59,11 @@ function setupBundlerContexts(options, browsers, codeBundleCache) {
             // Disable external deps for server bundles.
             // This is because it breaks Vite 'optimizeDeps' for SSR.
             externalPackages: false,
-        }, nodeTargets, codeBundleCache), () => false));
+        }, nodeTargets, codeBundleCache)));
         // Server polyfills code
         const serverPolyfillBundleOptions = (0, application_code_bundle_1.createServerPolyfillBundleOptions)(options, nodeTargets, codeBundleCache);
         if (serverPolyfillBundleOptions) {
-            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, serverPolyfillBundleOptions, () => false));
+            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, !!options.watch, serverPolyfillBundleOptions));
         }
     }
     return bundlerContexts;

package/src/builders/browser/index.js

@@ -120,8 +120,9 @@ function buildWebpackBrowser(options, context, transforms = {}) {
             webpackFactory: require('webpack'),
             logging: transforms.logging ||
                 ((stats, config) => {
-                    if (options.verbose) {
-                        context.logger.info(stats.toString(config.stats));
+                    if (options.verbose && config.stats !== false) {
+                        const statsOptions = config.stats === true ? undefined : config.stats;
+                        context.logger.info(stats.toString(statsOptions));
                     }
                 }),
         }).pipe((0, rxjs_1.concatMap)(

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

@@ -63,8 +63,16 @@ function execute(options, context, transforms = {}, extensions) {
             if (transforms?.logging || transforms?.webpackConfiguration) {
                 throw new Error('The `application` and `browser-esbuild` builders do not support Webpack transforms.');
             }
+            // Warn if the initial options provided by the user enable prebundling but caching is disabled
+            if (options.prebundle && !normalizedOptions.cacheOptions.enabled) {
+                context.logger.warn(`Prebundling has been configured but will not be used because caching has been disabled.`);
+            }
             return (0, rxjs_1.defer)(() => Promise.resolve().then(() => __importStar(require('./vite-server')))).pipe((0, rxjs_1.switchMap)(({ serveWithVite }) => serveWithVite(normalizedOptions, builderName, context, transforms, extensions)));
         }
+        // Warn if the initial options provided by the user enable prebundling with Webpack-based builders
+        if (options.prebundle) {
+            context.logger.warn(`Prebundling has been configured but will not be used because it is not supported by the "${builderName}" builder.`);
+        }
         if (extensions?.buildPlugins?.length) {
             throw new Error('Only the `application` and `browser-esbuild` builders support plugins.');
         }
@@ -80,7 +88,10 @@ async function initialize(initialOptions, projectName, context, builderSelector
     // Purge old build disk cache.
     await (0, purge_cache_1.purgeStaleBuildCache)(context);
     const normalizedOptions = await (0, options_1.normalizeOptions)(context, projectName, initialOptions);
-    const builderName = await context.getBuilderNameForTarget(normalizedOptions.buildTarget);
+    const builderName = builderSelector({
+        builderName: await context.getBuilderNameForTarget(normalizedOptions.buildTarget),
+        forceEsbuild: !!normalizedOptions.forceEsbuild,
+    }, context.logger);
     if (!normalizedOptions.disableHostCheck &&
         !/^127\.\d+\.\d+\.\d+/g.test(normalizedOptions.host) &&
         normalizedOptions.host !== 'localhost') {
@@ -100,7 +111,7 @@ case.
     }
     normalizedOptions.port = await (0, check_port_1.checkPort)(normalizedOptions.port, normalizedOptions.host);
     return {
-        builderName: builderSelector({ builderName, forceEsbuild: !!normalizedOptions.forceEsbuild }, context.logger),
+        builderName,
         normalizedOptions,
     };
 }

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

@@ -43,4 +43,5 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     sslCert: string | undefined;
     sslKey: string | undefined;
     forceEsbuild: boolean | undefined;
+    prebundle: import("./schema").PrebundleUnion;
 }>;

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

@@ -33,7 +33,7 @@ async function normalizeOptions(context, projectName, options) {
     const buildTargetSpecifier = options.buildTarget ?? options.browserTarget ?? `::development`;
     const buildTarget = (0, architect_1.targetFromTargetString)(buildTargetSpecifier, projectName, 'build');
     // Initial options to keep
-    const { host, port, poll, open, verbose, watch, allowedHosts, disableHostCheck, liveReload, hmr, headers, proxyConfig, servePath, publicHost, ssl, sslCert, sslKey, forceEsbuild, } = options;
+    const { host, port, poll, open, verbose, watch, allowedHosts, disableHostCheck, liveReload, hmr, headers, proxyConfig, servePath, publicHost, ssl, sslCert, sslKey, forceEsbuild, prebundle, } = options;
     // Return all the normalized options
     return {
         buildTarget,
@@ -58,6 +58,8 @@ async function normalizeOptions(context, projectName, options) {
         sslCert,
         sslKey,
         forceEsbuild,
+        // Prebundling defaults to true but requires caching to function
+        prebundle: cacheOptions.enabled && (prebundle ?? true),
     };
 }
 exports.normalizeOptions = normalizeOptions;

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

@@ -58,6 +58,12 @@ export interface Schema {
      * Port to listen on.
      */
     port?: number;
+    /**
+     * Enable and control the Vite-based development server's prebundling capabilities. To
+     * enable prebundling, the Angular CLI cache must also be enabled. This option has no effect
+     * when using the 'browser' or other Webpack-based builders.
+     */
+    prebundle?: PrebundleUnion;
     /**
      * Proxy configuration file. For more information, see
      * https://angular.io/guide/build#proxying-to-a-backend-server.
@@ -94,3 +100,16 @@ export interface Schema {
      */
     watch?: boolean;
 }
+/**
+ * Enable and control the Vite-based development server's prebundling capabilities. To
+ * enable prebundling, the Angular CLI cache must also be enabled. This option has no effect
+ * when using the 'browser' or other Webpack-based builders.
+ */
+export type PrebundleUnion = boolean | PrebundleClass;
+export interface PrebundleClass {
+    /**
+     * List of package imports that should not be prebundled by the development server. The
+     * packages will be bundled into the application code itself.
+     */
+    exclude: string[];
+}

package/src/builders/dev-server/schema.json

@@ -106,6 +106,24 @@
       "type": "boolean",
       "description": "Force the development server to use the 'browser-esbuild' builder when building. This is a developer preview option for the esbuild-based build system.",
       "default": false
+    },
+    "prebundle": {
+      "description": "Enable and control the Vite-based development server's prebundling capabilities. To enable prebundling, the Angular CLI cache must also be enabled. This option has no effect when using the 'browser' or other Webpack-based builders.",
+      "oneOf": [
+        { "type": "boolean" },
+        {
+          "type": "object",
+          "properties": {
+            "exclude": {
+              "description": "List of package imports that should not be prebundled by the development server. The packages will be bundled into the application code itself.",
+              "type": "array",
+              "items": { "type": "string" }
+            }
+          },
+          "additionalProperties": false,
+          "required": ["exclude"]
+        }
+      ]
     }
   },
   "additionalProperties": false,

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

@@ -66,16 +66,15 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
         // Avoid bundling and processing the ssr entry-point as this is not used by the dev-server.
         browserOptions.ssr = true;
         // https://nodejs.org/api/process.html#processsetsourcemapsenabledval
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         process.setSourceMapsEnabled(true);
     }
     // Set all packages as external to support Vite's prebundle caching
-    browserOptions.externalPackages = serverOptions.cacheOptions.enabled;
+    browserOptions.externalPackages = serverOptions.prebundle;
     const baseHref = browserOptions.baseHref;
     if (serverOptions.servePath === undefined && baseHref !== undefined) {
         // Remove trailing slash
         serverOptions.servePath =
-            baseHref[baseHref.length - 1] === '/' ? baseHref.slice(0, -1) : baseHref;
+            baseHref !== './' && baseHref[baseHref.length - 1] === '/' ? baseHref.slice(0, -1) : baseHref;
     }
     // The development server currently only supports a single locale when localizing.
     // This matches the behavior of the Webpack-based development server but could be expanded in the future.
@@ -341,7 +340,8 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         publicDir: false,
         esbuild: false,
         mode: 'development',
-        appType: 'mpa',
+        // We use custom as we do not rely on Vite's htmlFallbackMiddleware and indexHtmlMiddleware.
+        appType: 'custom',
         css: {
             devSourcemap: true,
         },
@@ -392,7 +392,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                  * - 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, // !serverOptions.cacheOptions.enabled,
+                disabled: true, // serverOptions.prebundle === false,
                 // 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
@@ -422,7 +422,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
         // 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,
+            disabled: serverOptions.prebundle === false,
             // Exclude any explicitly defined dependencies (currently build defined externals)
             exclude: externalMetadata.explicit,
             // Include all implict dependencies from the external packages internal option