@angular-devkit/build-angular 17.2.0-next.1 → 17.2.0

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "17.2.0-next.1",
+  "version": "17.2.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.1",
-    "@angular-devkit/build-webpack": "0.1702.0-next.1",
-    "@angular-devkit/core": "17.2.0-next.1",
+    "@angular-devkit/architect": "0.1702.0",
+    "@angular-devkit/build-webpack": "0.1702.0",
+    "@angular-devkit/core": "17.2.0",
     "@babel/core": "7.23.9",
     "@babel/generator": "7.23.6",
     "@babel/helper-annotate-as-pure": "7.22.5",
@@ -20,51 +20,51 @@
     "@babel/preset-env": "7.23.9",
     "@babel/runtime": "7.23.9",
     "@discoveryjs/json-ext": "0.5.7",
-    "@ngtools/webpack": "17.2.0-next.1",
+    "@ngtools/webpack": "17.2.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
     "autoprefixer": "10.4.17",
     "babel-loader": "9.1.3",
     "babel-plugin-istanbul": "6.1.1",
     "browserslist": "^4.21.5",
-    "copy-webpack-plugin": "12.0.2",
+    "copy-webpack-plugin": "11.0.0",
     "critters": "0.0.20",
     "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.13",
+    "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",
+    "picomatch": "4.0.1",
     "piscina": "4.3.1",
-    "postcss": "8.4.33",
+    "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.1.0",
-    "semver": "7.5.4",
+    "semver": "7.6.0",
     "source-map-loader": "5.0.0",
     "source-map-support": "0.5.21",
     "terser": "5.27.0",
     "tree-kill": "1.2.2",
     "tslib": "2.6.2",
-    "undici": "6.5.0",
+    "undici": "6.6.2",
     "vite": "5.0.12",
     "watchpack": "2.4.0",
-    "webpack": "5.90.0",
+    "webpack": "5.90.1",
     "webpack-dev-middleware": "6.1.1",
     "webpack-dev-server": "4.15.1",
     "webpack-merge": "5.10.0",
@@ -74,16 +74,16 @@
     "esbuild": "0.20.0"
   },
   "peerDependencies": {
-    "@angular/compiler-cli": "^17.0.0 || ^17.2.0-next.0",
-    "@angular/localize": "^17.0.0 || ^17.2.0-next.0",
-    "@angular/platform-server": "^17.0.0 || ^17.2.0-next.0",
-    "@angular/service-worker": "^17.0.0 || ^17.2.0-next.0",
+    "@angular/compiler-cli": "^17.0.0",
+    "@angular/localize": "^17.0.0",
+    "@angular/platform-server": "^17.0.0",
+    "@angular/service-worker": "^17.0.0",
     "@web/test-runner": "^0.18.0",
     "browser-sync": "^3.0.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "karma": "^6.3.0",
-    "ng-packagr": "^17.0.0 || ^17.2.0-next.0",
+    "ng-packagr": "^17.0.0",
     "protractor": "^7.0.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",
     "typescript": ">=5.2 <5.4"

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,
@@ -93,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)));
@@ -136,6 +136,10 @@ 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());
             }

package/src/builders/application/index.js

@@ -90,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;
@@ -139,5 +143,9 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     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

@@ -178,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,
@@ -230,6 +230,8 @@ async function normalizeOptions(context, projectName, options, extensions) {
         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/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.
@@ -164,8 +163,9 @@ async function* serveWithVite(serverOptions, builderName, context, transformers,
             externalMetadata.implicitServer.length = 0;
             externalMetadata.implicitBrowser.length = 0;
             externalMetadata.explicit.push(...explicit);
-            externalMetadata.implicitServer.push(...implicitServer);
-            externalMetadata.implicitBrowser.push(...implicitBrowser);
+            // Remove any absolute URLs (http://, https://, //) to avoid Vite's prebundling from processing them as files
+            externalMetadata.implicitServer.push(...implicitServer.filter((value) => !/^(?:https?:)?\/\//.test(value)));
+            externalMetadata.implicitBrowser.push(...implicitBrowser.filter((value) => !/^(?:https?:)?\/\//.test(value)));
             // 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();
@@ -341,7 +341,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 +393,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 +423,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

package/src/builders/server/index.js

@@ -62,8 +62,9 @@ function execute(options, context, transforms = {}) {
         return (0, build_webpack_1.runWebpack)(config, context, {
             webpackFactory: require('webpack'),
             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)(async (output) => {

package/src/tools/esbuild/angular/compiler-plugin.js

@@ -162,7 +162,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         });
                         referencedFileTracker.add(containingFile, Object.keys(workerResult.metafile.inputs).map((input) => path.join(build.initialOptions.absWorkingDir ?? '', input)));
                         // Return bundled worker file entry name to be used in the built output
-                        const workerCodeFile = workerResult.outputFiles.find((file) => file.path.endsWith('.js'));
+                        const workerCodeFile = workerResult.outputFiles.find((file) => /^worker-[A-Z0-9]{8}.[cm]?js$/.test(path.basename(file.path)));
                         (0, node_assert_1.default)(workerCodeFile, 'Web Worker bundled code file should always be present.');
                         const workerCodePath = path.relative(build.initialOptions.outdir ?? '', workerCodeFile.path);
                         return workerCodePath.replaceAll('\\', '/');

package/src/tools/esbuild/application-code-bundle.js

@@ -53,9 +53,11 @@ function createBrowserCodeBundleOptions(options, target, sourceFileCache) {
     }
     if (options.externalPackages) {
         // Package files affected by a customized loader should not be implicitly marked as external
-        if (options.loaderExtensions || options.plugins) {
+        if (options.loaderExtensions ||
+            options.plugins ||
+            typeof options.externalPackages === 'object') {
             // Plugin must be added after custom plugins to ensure any added loader options are considered
-            buildOptions.plugins?.push((0, external_packages_plugin_1.createExternalPackagesPlugin)());
+            buildOptions.plugins?.push((0, external_packages_plugin_1.createExternalPackagesPlugin)(options.externalPackages !== true ? options.externalPackages : undefined));
         }
         else {
             // Safe to use the packages external option directly
@@ -265,6 +267,7 @@ function getEsBuildCommonOptions(options) {
         write: false,
         preserveSymlinks,
         define: {
+            ...options.define,
             // Only set to false when script optimizations are enabled. It should not be set to true because
             // Angular turns `ngDevMode` into an object for development debugging purposes when not defined
             // which a constant true value would break.

package/src/tools/esbuild/bundler-context.d.ts

@@ -27,6 +27,7 @@ export interface InitialFileRecord {
     name?: string;
     type: 'script' | 'style';
     external?: boolean;
+    serverFile: boolean;
 }
 export declare enum BuildOutputFileType {
     Browser = 1,

package/src/tools/esbuild/bundler-context.js

@@ -162,7 +162,7 @@ class BundlerContext {
                 // For non-incremental builds, perform a single build
                 result = await (0, esbuild_1.build)(this.#esbuildOptions);
             }
-            if (this.#esbuildOptions?.platform === 'node') {
+            if (this.#platformIsServer) {
                 for (const entry of Object.values(result.metafile.outputs)) {
                     // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     entry['ng-platform-server'] = true;
@@ -232,6 +232,7 @@ class BundlerContext {
                         name,
                         type,
                         entrypoint: true,
+                        serverFile: this.#platformIsServer,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
                         initialFiles.set(relativeFilePath, record);
@@ -251,6 +252,7 @@ class BundlerContext {
                         type: initialImport.kind === 'import-rule' ? 'style' : 'script',
                         entrypoint: false,
                         external: initialImport.external,
+                        serverFile: this.#platformIsServer,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
                         initialFiles.set(initialImport.path, record);
@@ -275,8 +277,7 @@ class BundlerContext {
             }
         }
         (0, node_assert_1.default)(this.#esbuildOptions, 'esbuild options cannot be undefined.');
-        const { platform, assetNames = '' } = this.#esbuildOptions;
-        const platformIsServer = platform === 'node';
+        const { assetNames = '' } = this.#esbuildOptions;
         const mediaDirname = (0, node_path_1.dirname)(assetNames);
         const outputFiles = result.outputFiles.map((file) => {
             let fileType;
@@ -284,7 +285,9 @@ class BundlerContext {
                 fileType = BuildOutputFileType.Media;
             }
             else {
-                fileType = platformIsServer ? BuildOutputFileType.Server : BuildOutputFileType.Browser;
+                fileType = this.#platformIsServer
+                    ? BuildOutputFileType.Server
+                    : BuildOutputFileType.Browser;
             }
             return (0, utils_1.convertOutputFile)(file, fileType);
         });
@@ -294,7 +297,7 @@ class BundlerContext {
             outputFiles,
             initialFiles,
             externalImports: {
-                [platformIsServer ? 'server' : 'browser']: externalImports,
+                [this.#platformIsServer ? 'server' : 'browser']: externalImports,
             },
             externalConfiguration: this.#esbuildOptions.external,
             errors: undefined,
@@ -314,6 +317,9 @@ class BundlerContext {
             }
         }
     }
+    get #platformIsServer() {
+        return this.#esbuildOptions?.platform === 'node';
+    }
     /**
      * Invalidate a stored bundler result based on the previous watch files
      * and a list of changed files.

package/src/tools/esbuild/external-packages-plugin.d.ts

@@ -13,4 +13,6 @@ import type { Plugin } from 'esbuild';
  *
  * @returns An esbuild plugin.
  */
-export declare function createExternalPackagesPlugin(): Plugin;
+export declare function createExternalPackagesPlugin(options?: {
+    exclude?: string[];
+}): Plugin;

package/src/tools/esbuild/external-packages-plugin.js

@@ -17,22 +17,26 @@ const EXTERNAL_PACKAGE_RESOLUTION = Symbol('EXTERNAL_PACKAGE_RESOLUTION');
  *
  * @returns An esbuild plugin.
  */
-function createExternalPackagesPlugin() {
+function createExternalPackagesPlugin(options) {
+    const exclusions = options?.exclude?.length ? new Set(options.exclude) : undefined;
     return {
         name: 'angular-external-packages',
         setup(build) {
-            // Safe to use native packages external option if no loader options present
-            if (build.initialOptions.loader === undefined ||
-                Object.keys(build.initialOptions.loader).length === 0) {
+            const loaderOptionKeys = build.initialOptions.loader && Object.keys(build.initialOptions.loader);
+            // Safe to use native packages external option if no loader options or exclusions present
+            if (!exclusions && !loaderOptionKeys?.length) {
                 build.initialOptions.packages = 'external';
                 return;
             }
-            const loaderFileExtensions = new Set(Object.keys(build.initialOptions.loader));
+            const loaderFileExtensions = new Set(loaderOptionKeys);
             // Only attempt resolve of non-relative and non-absolute paths
             build.onResolve({ filter: /^[^./]/ }, async (args) => {
                 if (args.pluginData?.[EXTERNAL_PACKAGE_RESOLUTION]) {
                     return null;
                 }
+                if (exclusions?.has(args.path)) {
+                    return null;
+                }
                 const { importer, kind, resolveDir, namespace, pluginData = {} } = args;
                 pluginData[EXTERNAL_PACKAGE_RESOLUTION] = true;
                 const result = await build.resolve(args.path, {

package/src/tools/esbuild/index-html-generator.js

@@ -47,7 +47,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
     (0, node_assert_1.default)(indexHtmlOptions, 'indexHtmlOptions cannot be undefined.');
     if (!externalPackages && indexHtmlOptions.preloadInitial) {
         for (const [key, value] of initialFiles) {
-            if (value.entrypoint) {
+            if (value.entrypoint || value.serverFile) {
                 // Entry points are already referenced in the HTML
                 continue;
             }
@@ -94,7 +94,9 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         baseHref,
         lang,
         outputPath: virtualOutputPath,
-        files: [...initialFiles].map(([file, record]) => ({
+        files: [...initialFiles]
+            .filter(([, file]) => !file.serverFile)
+            .map(([file, record]) => ({
             name: record.name ?? '',
             file,
             extension: node_path_1.default.extname(file),

package/src/tools/vite/angular-memory-plugin.js

@@ -99,6 +99,19 @@ function createAngularMemoryPlugin(options) {
                     next();
                     return;
                 }
+                // HTML fallbacking
+                // This matches what happens in the vite html fallback middleware.
+                // ref: https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/middlewares/htmlFallback.ts#L9
+                const htmlAssetSourcePath = pathname[pathname.length - 1] === '/'
+                    ? // Trailing slash check for `index.html`.
+                        assets.get(pathname + 'index.html')
+                    : // Non-trailing slash check for fallback `.html`
+                        assets.get(pathname + '.html');
+                if (htmlAssetSourcePath) {
+                    req.url = `${server.config.base}@fs/${encodeURI(htmlAssetSourcePath)}`;
+                    next();
+                    return;
+                }
                 // Resource files are handled directly.
                 // Global stylesheets (CSS files) are currently considered resources to workaround
                 // dev server sourcemap issues with stylesheets.

package/src/tools/webpack/utils/stats.js

@@ -419,8 +419,9 @@ function createWebpackLoggingCallback(options, logger) {
         ...(0, helpers_1.normalizeExtraEntryPoints)(scripts, 'scripts'),
     ];
     return (stats, config) => {
-        if (verbose) {
-            logger.info(stats.toString(config.stats));
+        if (verbose && config.stats !== false) {
+            const statsOptions = config.stats === true ? undefined : config.stats;
+            logger.info(stats.toString(statsOptions));
         }
         const rawStats = stats.toJson((0, helpers_1.getStatsOptions)(false));
         const webpackStats = {

package/src/utils/postcss-configuration.d.ts

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 export interface PostcssConfiguration {
-    plugins: [name: string, options?: object][];
+    plugins: [name: string, options?: object | string][];
 }
 export declare function loadPostcssConfiguration(workspaceRoot: string, projectRoot: string): Promise<PostcssConfiguration | undefined>;

package/src/utils/postcss-configuration.js

@@ -67,7 +67,7 @@ async function loadPostcssConfiguration(workspaceRoot, projectRoot) {
     }
     const config = { plugins: [] };
     for (const [name, options] of entries) {
-        if (!options || typeof options !== 'object') {
+        if (!options || (typeof options !== 'object' && typeof options !== 'string')) {
             continue;
         }
         config.plugins.push([name, options]);