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

package/src/builders/extract-i18n/application-extraction.js

@@ -20,9 +20,11 @@ async function extractMessages(options, builderName, context, extractorConstruct
     // Setup the build options for the application based on the buildTarget option
     const buildOptions = (await context.validateOptions(await context.getTargetOptions(options.buildTarget), builderName));
     buildOptions.optimization = false;
-    buildOptions.sourceMap = { scripts: true, vendor: true };
+    buildOptions.sourceMap = { scripts: true, vendor: true, styles: false };
     buildOptions.localize = false;
     buildOptions.budgets = undefined;
+    buildOptions.index = false;
+    buildOptions.serviceWorker = false;
     let build;
     if (builderName === '@angular-devkit/build-angular:application') {
         build = application_1.buildApplicationInternal;

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/babel/plugins/elide-angular-metadata.d.ts

@@ -7,7 +7,7 @@
  */
 /// <reference path="../../../../../../../../../../packages/angular_devkit/build_angular/src/babel-bazel.d.ts" />
 /// <reference types="@angular/compiler-cli/private/babel" />
-import { PluginObj } from '@babel/core';
+import type { PluginObj } from '@babel/core';
 /**
  * Provides one or more keywords that if found within the content of a source file indicate
  * that this plugin should be used with a source file.

package/src/tools/babel/plugins/elide-angular-metadata.js

@@ -8,7 +8,6 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getKeywords = void 0;
-const core_1 = require("@babel/core");
 /**
  * The name of the Angular class metadata function created by the Angular compiler.
  */
@@ -28,9 +27,18 @@ const SET_CLASS_DEBUG_INFO_NAME = 'ɵsetClassDebugInfo';
  * @returns An a string iterable containing one or more keywords.
  */
 function getKeywords() {
-    return [SET_CLASS_METADATA_NAME, SET_CLASS_METADATA_ASYNC_NAME, SET_CLASS_DEBUG_INFO_NAME];
+    return Object.keys(angularMetadataFunctions);
 }
 exports.getKeywords = getKeywords;
+/**
+ * An object map of function names and related value checks for discovery of Angular generated
+ * metadata calls.
+ */
+const angularMetadataFunctions = {
+    [SET_CLASS_METADATA_NAME]: isSetClassMetadataCall,
+    [SET_CLASS_METADATA_ASYNC_NAME]: isSetClassMetadataAsyncCall,
+    [SET_CLASS_DEBUG_INFO_NAME]: isSetClassDebugInfoCall,
+};
 /**
  * A babel plugin factory function for eliding the Angular class metadata function (`ɵsetClassMetadata`).
  *
@@ -40,20 +48,23 @@ function default_1() {
     return {
         visitor: {
             CallExpression(path) {
-                const callee = path.node.callee;
-                const callArguments = path.node.arguments;
+                const callee = path.get('callee');
                 // The function being called must be the metadata function name
                 let calleeName;
-                if (core_1.types.isMemberExpression(callee) && core_1.types.isIdentifier(callee.property)) {
-                    calleeName = callee.property.name;
+                if (callee.isMemberExpression()) {
+                    const calleeProperty = callee.get('property');
+                    if (calleeProperty.isIdentifier()) {
+                        calleeName = calleeProperty.node.name;
+                    }
+                }
+                else if (callee.isIdentifier()) {
+                    calleeName = callee.node.name;
                 }
-                else if (core_1.types.isIdentifier(callee)) {
-                    calleeName = callee.name;
+                if (!calleeName) {
+                    return;
                 }
-                if (calleeName !== undefined &&
-                    (isRemoveClassMetadataCall(calleeName, callArguments) ||
-                        isRemoveClassmetadataAsyncCall(calleeName, callArguments) ||
-                        isSetClassDebugInfoCall(calleeName, callArguments))) {
+                if (Object.hasOwn(angularMetadataFunctions, calleeName) &&
+                    angularMetadataFunctions[calleeName](path.get('arguments'))) {
                     // The metadata function is always emitted inside a function expression
                     const parent = path.getFunctionParent();
                     if (parent && (parent.isFunctionExpression() || parent.isArrowFunctionExpression())) {
@@ -68,35 +79,32 @@ function default_1() {
 }
 exports.default = default_1;
 /** Determines if a function call is a call to `setClassMetadata`. */
-function isRemoveClassMetadataCall(name, args) {
+function isSetClassMetadataCall(callArguments) {
     // `setClassMetadata` calls have to meet the following criteria:
     // * First must be an identifier
     // * Second must be an array literal
-    return (name === SET_CLASS_METADATA_NAME &&
-        args.length === 4 &&
-        core_1.types.isIdentifier(args[0]) &&
-        core_1.types.isArrayExpression(args[1]));
+    return (callArguments.length === 4 &&
+        callArguments[0].isIdentifier() &&
+        callArguments[1].isArrayExpression());
 }
 /** Determines if a function call is a call to `setClassMetadataAsync`. */
-function isRemoveClassmetadataAsyncCall(name, args) {
+function isSetClassMetadataAsyncCall(callArguments) {
     // `setClassMetadataAsync` calls have to meet the following criteria:
     // * First argument must be an identifier.
     // * Second argument must be an inline function.
     // * Third argument must be an inline function.
-    return (name === SET_CLASS_METADATA_ASYNC_NAME &&
-        args.length === 3 &&
-        core_1.types.isIdentifier(args[0]) &&
-        isInlineFunction(args[1]) &&
-        isInlineFunction(args[2]));
+    return (callArguments.length === 3 &&
+        callArguments[0].isIdentifier() &&
+        isInlineFunction(callArguments[1]) &&
+        isInlineFunction(callArguments[2]));
 }
 /** Determines if a function call is a call to `setClassDebugInfo`. */
-function isSetClassDebugInfoCall(name, args) {
-    return (name === SET_CLASS_DEBUG_INFO_NAME &&
-        args.length === 2 &&
-        core_1.types.isIdentifier(args[0]) &&
-        core_1.types.isObjectExpression(args[1]));
+function isSetClassDebugInfoCall(callArguments) {
+    return (callArguments.length === 2 &&
+        callArguments[0].isIdentifier() &&
+        callArguments[1].isObjectExpression());
 }
 /** Determines if a node is an inline function expression. */
-function isInlineFunction(node) {
-    return core_1.types.isFunctionExpression(node) || core_1.types.isArrowFunctionExpression(node);
+function isInlineFunction(path) {
+    return path.isFunctionExpression() || path.isArrowFunctionExpression();
 }

package/src/tools/babel/plugins/pure-toplevel-functions.d.ts

@@ -7,7 +7,7 @@
  */
 /// <reference path="../../../../../../../../../../packages/angular_devkit/build_angular/src/babel-bazel.d.ts" />
 /// <reference types="@angular/compiler-cli/private/babel" />
-import { PluginObj } from '@babel/core';
+import type { PluginObj } from '@babel/core';
 /**
  * A babel plugin factory function for adding the PURE annotation to top-level new and call expressions.
  *

package/src/tools/babel/plugins/pure-toplevel-functions.js

@@ -33,7 +33,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("@babel/core");
 const helper_annotate_as_pure_1 = __importDefault(require("@babel/helper-annotate-as-pure"));
 const tslib = __importStar(require("tslib"));
 /**
@@ -67,14 +66,14 @@ function default_1() {
                 if (path.getFunctionParent()) {
                     return;
                 }
-                const callee = path.node.callee;
-                if ((core_1.types.isFunctionExpression(callee) || core_1.types.isArrowFunctionExpression(callee)) &&
+                const callee = path.get('callee');
+                if ((callee.isFunctionExpression() || callee.isArrowFunctionExpression()) &&
                     path.node.arguments.length !== 0) {
                     return;
                 }
                 // Do not annotate TypeScript helpers emitted by the TypeScript compiler.
                 // TypeScript helpers are intended to cause side effects.
-                if (core_1.types.isIdentifier(callee) && isTslibHelperName(callee.name)) {
+                if (callee.isIdentifier() && isTslibHelperName(callee.node.name)) {
                     return;
                 }
                 (0, helper_annotate_as_pure_1.default)(path);

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
@@ -230,7 +232,7 @@ function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
 }
 exports.createServerPolyfillBundleOptions = createServerPolyfillBundleOptions;
 function getEsBuildCommonOptions(options) {
-    const { workspaceRoot, outExtension, optimizationOptions, sourcemapOptions, tsconfig, externalDependencies, outputNames, preserveSymlinks, jit, loaderExtensions, } = options;
+    const { workspaceRoot, outExtension, optimizationOptions, sourcemapOptions, tsconfig, externalDependencies, outputNames, preserveSymlinks, jit, loaderExtensions, jsonLogs, } = options;
     // Ensure unique hashes for i18n translation changes when using post-process inlining.
     // This hash value is added as a footer to each file and ensures that the output file names (with hashes)
     // change when translation files have changed. If this is not done the post processed files may have
@@ -250,7 +252,7 @@ function getEsBuildCommonOptions(options) {
         resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
         metafile: true,
         legalComments: options.extractLicenses ? 'none' : 'eof',
-        logLevel: options.verbose ? 'debug' : 'silent',
+        logLevel: options.verbose && !jsonLogs ? 'debug' : 'silent',
         minifyIdentifiers: optimizationOptions.scripts && environment_options_1.allowMangle,
         minifySyntax: optimizationOptions.scripts,
         minifyWhitespace: optimizationOptions.scripts,
@@ -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/budget-stats.js

@@ -26,6 +26,11 @@ function generateBudgetStats(metafile, initialFiles) {
         if (!file.endsWith('.js') && !file.endsWith('.css')) {
             continue;
         }
+        // Exclude server bundles
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (entry['ng-platform-server']) {
+            continue;
+        }
         const initialRecord = initialFiles.get(file);
         let name = initialRecord?.name;
         if (name === undefined && entry.entryPoint) {

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,6 +162,12 @@ class BundlerContext {
                 // For non-incremental builds, perform a single build
                 result = await (0, esbuild_1.build)(this.#esbuildOptions);
             }
+            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;
+                }
+            }
         }
         catch (failure) {
             // Build failures will throw an exception which contains errors/warnings
@@ -226,6 +232,7 @@ class BundlerContext {
                         name,
                         type,
                         entrypoint: true,
+                        serverFile: this.#platformIsServer,
                     };
                     if (!this.initialFilter || this.initialFilter(record)) {
                         initialFiles.set(relativeFilePath, record);
@@ -245,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);
@@ -260,15 +268,16 @@ class BundlerContext {
         for (const { imports } of Object.values(result.metafile.outputs)) {
             for (const importData of imports) {
                 if (!importData.external ||
-                    (importData.kind !== 'import-statement' && importData.kind !== 'dynamic-import')) {
+                    (importData.kind !== 'import-statement' &&
+                        importData.kind !== 'dynamic-import' &&
+                        importData.kind !== 'require-call')) {
                     continue;
                 }
                 externalImports.add(importData.path);
             }
         }
         (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;
@@ -276,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);
         });
@@ -286,7 +297,7 @@ class BundlerContext {
             outputFiles,
             initialFiles,
             externalImports: {
-                [platformIsServer ? 'server' : 'browser']: externalImports,
+                [this.#platformIsServer ? 'server' : 'browser']: externalImports,
             },
             externalConfiguration: this.#esbuildOptions.external,
             errors: undefined,
@@ -306,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/bundler-execution-result.d.ts

@@ -33,6 +33,7 @@ export declare class ExecutionResult {
     outputFiles: BuildOutputFile[];
     assetFiles: BuildOutputAsset[];
     errors: (Message | PartialMessage)[];
+    prerenderedRoutes: string[];
     warnings: (Message | PartialMessage)[];
     externalMetadata?: ExternalResultMetadata;
     constructor(rebuildContexts: BundlerContext[], codeBundleCache?: SourceFileCache | undefined);
@@ -40,6 +41,7 @@ export declare class ExecutionResult {
     addAssets(assets: BuildOutputAsset[]): void;
     addError(error: PartialMessage | string): void;
     addErrors(errors: (PartialMessage | string)[]): void;
+    addPrerenderedRoutes(routes: string[]): void;
     addWarning(error: PartialMessage | string): void;
     addWarnings(errors: (PartialMessage | string)[]): void;
     /**

package/src/tools/esbuild/bundler-execution-result.js

@@ -19,6 +19,7 @@ class ExecutionResult {
     outputFiles = [];
     assetFiles = [];
     errors = [];
+    prerenderedRoutes = [];
     warnings = [];
     externalMetadata;
     constructor(rebuildContexts, codeBundleCache) {
@@ -44,6 +45,11 @@ class ExecutionResult {
             this.addError(error);
         }
     }
+    addPrerenderedRoutes(routes) {
+        this.prerenderedRoutes.push(...routes);
+        // Sort the prerendered routes.
+        this.prerenderedRoutes.sort((a, b) => a.localeCompare(b));
+    }
     addWarning(error) {
         if (typeof error === 'string') {
             this.warnings.push({ text: error, location: null });

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

@@ -9,7 +9,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPluginOptions = void 0;
 function createCompilerPluginOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, publicPath, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, } = options;
     return {
         // JS/TS options
         pluginOptions: {
@@ -40,6 +40,7 @@ function createCompilerPluginOptions(options, target, sourceFileCache) {
             inlineStyleLanguage,
             preserveSymlinks,
             tailwindConfiguration,
+            postcssConfiguration,
             cacheOptions,
             publicPath,
         },

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/global-scripts.js

@@ -49,7 +49,7 @@ const virtual_module_plugin_1 = require("./virtual-module-plugin");
  * @returns An esbuild BuildOptions object.
  */
 function createGlobalScriptsBundleOptions(options, target, initial) {
-    const { globalScripts, optimizationOptions, outputNames, preserveSymlinks, sourcemapOptions, workspaceRoot, } = options;
+    const { globalScripts, optimizationOptions, outputNames, preserveSymlinks, sourcemapOptions, jsonLogs, workspaceRoot, } = options;
     const namespace = 'angular:script/global';
     const entryPoints = {};
     let found = false;
@@ -74,7 +74,7 @@ function createGlobalScriptsBundleOptions(options, target, initial) {
             mainFields: ['script', 'browser', 'main'],
             conditions: ['script'],
             resolveExtensions: ['.mjs', '.js'],
-            logLevel: options.verbose ? 'debug' : 'silent',
+            logLevel: options.verbose && !jsonLogs ? 'debug' : 'silent',
             metafile: true,
             minify: optimizationOptions.scripts,
             outdir: workspaceRoot,
@@ -91,8 +91,7 @@ function createGlobalScriptsBundleOptions(options, target, initial) {
                     // Add the `js` extension here so that esbuild generates an output file with the extension
                     transformPath: (path) => path.slice(namespace.length + 1) + '.js',
                     loadContent: (args, build) => (0, load_result_cache_1.createCachedLoad)(loadCache, async (args) => {
-                        const files = globalScripts.find(({ name }) => name === args.path.slice(0, -3))
-                            ?.files;
+                        const files = globalScripts.find(({ name }) => name === args.path.slice(0, -3))?.files;
                         (0, node_assert_1.default)(files, `Invalid operation: global scripts name not found [${args.path}]`);
                         // Global scripts are concatenated using magic-string instead of bundled via esbuild.
                         const bundleContent = new magic_string_1.Bundle();

package/src/tools/esbuild/global-styles.js

@@ -15,7 +15,7 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const bundle_options_1 = require("./stylesheets/bundle-options");
 const virtual_module_plugin_1 = require("./virtual-module-plugin");
 function createGlobalStylesBundleOptions(options, target, initial) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, cacheOptions, publicPath, } = options;
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, globalStyles, preserveSymlinks, externalDependencies, stylePreprocessorOptions, tailwindConfiguration, postcssConfiguration, cacheOptions, publicPath, } = options;
     const namespace = 'angular:styles/global';
     const entryPoints = {};
     let found = false;
@@ -46,6 +46,7 @@ function createGlobalStylesBundleOptions(options, target, initial) {
                 },
             includePaths: stylePreprocessorOptions?.includePaths,
             tailwindConfiguration,
+            postcssConfiguration,
             cacheOptions,
             publicPath,
         }, loadCache);

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/esbuild/stylesheets/bundle-options.d.ts

@@ -7,6 +7,7 @@
  */
 import type { BuildOptions } from 'esbuild';
 import { NormalizedCachedOptions } from '../../../utils/normalize-cache';
+import { PostcssConfiguration } from '../../../utils/postcss-configuration';
 import { LoadResultCache } from '../load-result-cache';
 export interface BundleStylesheetOptions {
     workspaceRoot: string;
@@ -25,6 +26,7 @@ export interface BundleStylesheetOptions {
         file: string;
         package: string;
     };
+    postcssConfiguration?: PostcssConfiguration;
     publicPath?: string;
     cacheOptions: NormalizedCachedOptions;
 }

package/src/tools/esbuild/stylesheets/bundle-options.js

@@ -26,6 +26,7 @@ function createStylesheetBundleOptions(options, cache, inlineComponentData) {
         includePaths,
         inlineComponentData,
         tailwindConfiguration: options.tailwindConfiguration,
+        postcssConfiguration: options.postcssConfiguration,
     }, cache);
     const plugins = [
         pluginFactory.create(sass_language_1.SassStylesheetLanguage),

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import type { OnLoadResult, Plugin, PluginBuild } from 'esbuild';
+import type { PostcssConfiguration } from '../../../utils/postcss-configuration';
 import { LoadResultCache } from '../load-result-cache';
 /**
  * An object containing the plugin options to use when processing stylesheets.
@@ -35,6 +36,12 @@ export interface StylesheetPluginOptions {
         file: string;
         package: string;
     };
+    /**
+     * Optional configuration object for custom postcss usage. If present, postcss will be
+     * initialized and used for every stylesheet. This overrides the tailwind integration
+     * and any tailwind usage must be manually configured in the custom postcss usage.
+     */
+    postcssConfiguration?: PostcssConfiguration;
 }
 export interface StylesheetLanguage {
     name: string;

package/src/tools/esbuild/stylesheets/stylesheet-plugin-factory.js

@@ -72,7 +72,9 @@ class StylesheetPluginFactory {
     }
     create(language) {
         // Return a noop plugin if no load actions are required
-        if (!language.process && !this.options.tailwindConfiguration) {
+        if (!language.process &&
+            !this.options.postcssConfiguration &&
+            !this.options.tailwindConfiguration) {
             return {
                 name: 'angular-' + language.name,
                 setup() { },
@@ -84,7 +86,23 @@ class StylesheetPluginFactory {
             if (this.postcssProcessor) {
                 return this.postcssProcessor;
             }
-            if (options.tailwindConfiguration) {
+            if (options.postcssConfiguration) {
+                const postCssInstanceKey = JSON.stringify(options.postcssConfiguration);
+                this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
+                if (!this.postcssProcessor) {
+                    postcss ??= (await Promise.resolve().then(() => __importStar(require('postcss')))).default;
+                    this.postcssProcessor = postcss();
+                    for (const [pluginName, pluginOptions] of options.postcssConfiguration.plugins) {
+                        const { default: plugin } = await Promise.resolve(`${pluginName}`).then(s => __importStar(require(s)));
+                        if (typeof plugin !== 'function' || plugin.postcss !== true) {
+                            throw new Error(`Attempted to load invalid Postcss plugin: "${pluginName}"`);
+                        }
+                        this.postcssProcessor.use(plugin(pluginOptions));
+                    }
+                    postcssProcessor.set(postCssInstanceKey, new WeakRef(this.postcssProcessor));
+                }
+            }
+            else if (options.tailwindConfiguration) {
                 const { package: tailwindPackage, file: config } = options.tailwindConfiguration;
                 const postCssInstanceKey = tailwindPackage + ':' + config;
                 this.postcssProcessor = postcssProcessor.get(postCssInstanceKey)?.deref();
@@ -132,14 +150,12 @@ async function processStylesheet(language, data, filename, format, options, buil
             watchFiles: [filename],
         };
     }
-    // Return early if there are no contents to further process
-    if (!result.contents) {
+    // Return early if there are no contents to further process or there are errors
+    if (!result.contents || result.errors?.length) {
         return result;
     }
-    // Only use postcss if Tailwind processing is required.
-    // NOTE: If postcss is used for more than just Tailwind in the future this check MUST
-    // be updated to account for the additional use.
-    if (postcssProcessor && !result.errors?.length && hasTailwindKeywords(result.contents)) {
+    // Only use postcss if Tailwind processing is required or custom postcss is present.
+    if (postcssProcessor && (options.postcssConfiguration || hasTailwindKeywords(result.contents))) {
         const postcssResult = await compileString(typeof result.contents === 'string'
             ? result.contents
             : Buffer.from(result.contents).toString('utf-8'), filename, postcssProcessor, options);

package/src/tools/esbuild/utils.d.ts

@@ -6,19 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import { logging } from '@angular-devkit/core';
-import { BuildOptions, Metafile, OutputFile, PartialMessage } from 'esbuild';
-import { NormalizedOutputOptions } from '../../builders/application/options';
+import { BuildOptions, Metafile, OutputFile } from 'esbuild';
+import { NormalizedApplicationBuildOptions, NormalizedOutputOptions } from '../../builders/application/options';
 import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
 import { BuildOutputFile, BuildOutputFileType, InitialFileRecord } from './bundler-context';
-import { BuildOutputAsset } from './bundler-execution-result';
-export declare function logBuildStats(logger: logging.LoggerApi, metafile: Metafile, initial: Map<string, InitialFileRecord>, budgetFailures: BudgetCalculatorResult[] | undefined, changedFiles?: Set<string>, estimatedTransferSizes?: Map<string, number>): void;
+import { BuildOutputAsset, ExecutionResult } from './bundler-execution-result';
+export declare function logBuildStats(metafile: Metafile, initial: Map<string, InitialFileRecord>, budgetFailures: BudgetCalculatorResult[] | undefined, colors: boolean, changedFiles?: Set<string>, estimatedTransferSizes?: Map<string, number>, ssrOutputEnabled?: boolean, verbose?: boolean): string;
 export declare function calculateEstimatedTransferSizes(outputFiles: OutputFile[]): Promise<Map<string, number>>;
 export declare function withSpinner<T>(text: string, action: () => T | Promise<T>): Promise<T>;
 export declare function withNoProgress<T>(text: string, action: () => T | Promise<T>): Promise<T>;
-export declare function logMessages(logger: logging.LoggerApi, { errors, warnings }: {
-    errors?: PartialMessage[];
-    warnings?: PartialMessage[];
-}): Promise<void>;
 /**
  * Generates a syntax feature object map for Angular applications based on a list of targets.
  * A full set of feature names can be found here: https://esbuild.github.io/api/#supported
@@ -41,3 +37,4 @@ export declare function transformSupportedBrowsersToTargets(supportedBrowsers: s
  * @see https://esbuild.github.io/api/#target
  */
 export declare function getSupportedNodeTargets(): string[];
+export declare function logMessages(logger: logging.LoggerApi, executionResult: ExecutionResult, options: NormalizedApplicationBuildOptions): Promise<void>;