@angular/build 19.0.0-next.7 → 19.0.0-next.8

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

@@ -39,10 +39,9 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_module_1 = require("node:module");
 const node_path_1 = require("node:path");
-const angular_memory_plugin_1 = require("../../tools/vite/angular-memory-plugin");
-const i18n_locale_plugin_1 = require("../../tools/vite/i18n-locale-plugin");
-const id_prefix_plugin_1 = require("../../tools/vite/id-prefix-plugin");
+const plugins_1 = require("../../tools/vite/plugins");
 const utils_1 = require("../../utils");
+const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
 const results_1 = require("../application/results");
 const internal_1 = require("./internal");
@@ -66,17 +65,16 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     }
     // TODO: Adjust architect to not force a JsonObject derived return type
     const browserOptions = (await context.validateOptions(rawBrowserOptions, builderName));
-    if (browserOptions.prerender || browserOptions.ssr) {
+    if (browserOptions.prerender) {
         // Disable prerendering if enabled and force SSR.
         // This is so instead of prerendering all the routes for every change, the page is "prerendered" when it is requested.
         browserOptions.prerender = false;
-        // 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
-        process.setSourceMapsEnabled(true);
     }
     // Set all packages as external to support Vite's prebundle caching
     browserOptions.externalPackages = serverOptions.prebundle;
+    // Disable generating a full manifest with routes.
+    // This is done during runtime when using the dev-server.
+    browserOptions.partialSSRBuild = true;
     // 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.
     if (browserOptions.localize === true ||
@@ -88,7 +86,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         // When localization is enabled with a single locale, force a flat path to maintain behavior with the existing Webpack-based dev server.
         browserOptions.forceI18nFlatOutput = true;
     }
-    const { vendor: thirdPartySourcemaps } = (0, utils_1.normalizeSourceMaps)(browserOptions.sourceMap ?? false);
+    const { vendor: thirdPartySourcemaps, scripts: scriptsSourcemaps } = (0, utils_1.normalizeSourceMaps)(browserOptions.sourceMap ?? false);
+    if (scriptsSourcemaps && browserOptions.server) {
+        // https://nodejs.org/api/process.html#processsetsourcemapsenabledval
+        process.setSourceMapsEnabled(true);
+    }
+    // TODO: Enable by default once full support across CLI and FW is integrated
+    browserOptions.externalRuntimeStyles = environment_options_1.useComponentStyleHmr;
     // Setup the prebundling transformer that will be shared across Vite prebundling requests
     const prebundleTransformer = new internal_1.JavaScriptTransformer(
     // Always enable JIT linking to support applications built with and without AOT.
@@ -180,8 +184,8 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         let requiresServerRestart = false;
         if (result.detail?.['externalMetadata']) {
             const { implicitBrowser, implicitServer, explicit } = result.detail['externalMetadata'];
-            const implicitServerFiltered = implicitServer.filter((m) => removeNodeJsBuiltinModules(m) && removeAbsoluteUrls(m));
-            const implicitBrowserFiltered = implicitBrowser.filter(removeAbsoluteUrls);
+            const implicitServerFiltered = implicitServer.filter((m) => !(0, node_module_1.isBuiltin)(m) && !isAbsoluteUrl(m));
+            const implicitBrowserFiltered = implicitBrowser.filter((m) => !isAbsoluteUrl(m));
             if (browserOptions.ssr && serverOptions.prebundle !== false) {
                 const previousImplicitServer = new Set(externalMetadata.implicitServer);
                 // Restart the server to force SSR dep re-optimization when a dependency has been added.
@@ -194,7 +198,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             externalMetadata.implicitServer.length = 0;
             externalMetadata.implicitBrowser.length = 0;
             externalMetadata.explicitBrowser.push(...explicit);
-            externalMetadata.explicitServer.push(...explicit, ...nodeJsBuiltinModules);
+            externalMetadata.explicitServer.push(...explicit, ...node_module_1.builtinModules);
             externalMetadata.implicitServer.push(...implicitServerFiltered);
             externalMetadata.implicitBrowser.push(...implicitBrowserFiltered);
             // The below needs to be sorted as Vite uses these options are part of the hashing invalidation algorithm.
@@ -238,15 +242,19 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             const polyfills = Array.isArray((browserOptions.polyfills ??= []))
                 ? browserOptions.polyfills
                 : [browserOptions.polyfills];
+            let ssrMode = plugins_1.ServerSsrMode.NoSsr;
+            if (browserOptions.outputMode &&
+                typeof browserOptions.ssr === 'object' &&
+                browserOptions.ssr.entry) {
+                ssrMode = plugins_1.ServerSsrMode.ExternalSsrMiddleware;
+            }
+            else if (browserOptions.server) {
+                ssrMode = plugins_1.ServerSsrMode.InternalSsrMiddleware;
+            }
             // Setup server and start listening
-            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, !!browserOptions.ssr, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
-            if (browserOptions.ssr && serverOptions.prebundle !== false) {
-                // Warm up the SSR request and begin optimizing dependencies.
-                // Without this, Vite will only start optimizing SSR modules when the first request is made.
-                void server.warmupRequest('./main.server.mjs', { ssr: true });
-            }
             const urls = server.resolvedUrls;
             if (urls && (urls.local.length || urls.network.length)) {
                 serverUrl = new URL(urls.local[0] ?? urls.network[0]);
@@ -280,24 +288,26 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
 }
 async function handleUpdate(normalizePath, generatedFiles, server, serverOptions, logger, usedComponentStyles) {
     const updatedFiles = [];
-    let isServerFileUpdated = false;
+    let destroyAngularServerAppCalled = false;
     // Invalidate any updated files
-    for (const [file, record] of generatedFiles) {
-        if (record.updated) {
-            updatedFiles.push(file);
-            isServerFileUpdated ||= record.type === internal_1.BuildOutputFileType.Server;
-            const updatedModules = server.moduleGraph.getModulesByFile(normalizePath((0, node_path_1.join)(server.config.root, file)));
-            updatedModules?.forEach((m) => server?.moduleGraph.invalidateModule(m));
+    for (const [file, { updated, type }] of generatedFiles) {
+        if (!updated) {
+            continue;
+        }
+        if (type === internal_1.BuildOutputFileType.ServerApplication && !destroyAngularServerAppCalled) {
+            // Clear the server app cache
+            // This must be done before module invalidation.
+            const { ɵdestroyAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
+            ɵdestroyAngularServerApp();
+            destroyAngularServerAppCalled = true;
         }
+        updatedFiles.push(file);
+        const updatedModules = server.moduleGraph.getModulesByFile(normalizePath((0, node_path_1.join)(server.config.root, file)));
+        updatedModules?.forEach((m) => server.moduleGraph.invalidateModule(m));
     }
     if (!updatedFiles.length) {
         return;
     }
-    // clean server apps cache
-    if (isServerFileUpdated) {
-        const { ɵdestroyAngularServerApp } = (await server.ssrLoadModule('/main.server.mjs'));
-        ɵdestroyAngularServerApp();
-    }
     if (serverOptions.liveReload || serverOptions.hmr) {
         if (updatedFiles.every((f) => f.endsWith('.css'))) {
             const timestamp = Date.now();
@@ -392,7 +402,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssr, prebundleTransformer, target, zoneless, usedComponentStyles, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
     const proxy = await (0, utils_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
@@ -427,6 +437,9 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             preserveSymlinks,
         },
         server: {
+            warmup: {
+                ssrFiles: ['./main.server.mjs', './server.mjs'],
+            },
             port: serverOptions.port,
             strictPort: true,
             host: serverOptions.host,
@@ -475,20 +488,22 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             }),
         },
         plugins: [
-            (0, i18n_locale_plugin_1.createAngularLocaleDataPlugin)(),
-            (0, angular_memory_plugin_1.createAngularMemoryPlugin)({
-                workspaceRoot: serverOptions.workspaceRoot,
-                virtualProjectRoot,
+            (0, plugins_1.createAngularLocaleDataPlugin)(),
+            (0, plugins_1.createAngularSetupMiddlewaresPlugin)({
                 outputFiles,
                 assets,
-                ssr,
-                external: externalMetadata.explicitBrowser,
                 indexHtmlTransformer,
                 extensionMiddleware,
-                normalizePath,
                 usedComponentStyles,
+                ssrMode,
+            }),
+            (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
+            await (0, plugins_1.createAngularSsrTransformPlugin)(serverOptions.workspaceRoot),
+            await (0, plugins_1.createAngularMemoryPlugin)({
+                virtualProjectRoot,
+                outputFiles,
+                external: externalMetadata.explicitBrowser,
             }),
-            (0, id_prefix_plugin_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
         optimizeDeps: getDepOptimizationConfig({
@@ -556,12 +571,14 @@ function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless
         },
     };
 }
-const nodeJsBuiltinModules = new Set(node_module_1.builtinModules);
-/** Remove any Node.js builtin modules to avoid Vite's prebundling from processing them as files. */
-function removeNodeJsBuiltinModules(value) {
-    return !nodeJsBuiltinModules.has(value);
-}
-/** Remove any absolute URLs (http://, https://, //) to avoid Vite's prebundling from processing them as files. */
-function removeAbsoluteUrls(value) {
-    return !/^(?:https?:)?\/\//.test(value);
+/**
+ * Checks if the given value is an absolute URL.
+ *
+ * This function helps in avoiding Vite's prebundling from processing absolute URLs (http://, https://, //) as files.
+ *
+ * @param value - The URL or path to check.
+ * @returns `true` if the value is not an absolute URL; otherwise, `false`.
+ */
+function isAbsoluteUrl(value) {
+    return /^(?:https?:)?\/\//.test(value);
 }

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

@@ -15,6 +15,7 @@ const node_fs_1 = require("node:fs");
 const node_path_1 = __importDefault(require("node:path"));
 const application_1 = require("../application");
 const results_1 = require("../application/results");
+const schema_1 = require("../application/schema");
 async function extractMessages(options, builderName, context, extractorConstructor, extensions) {
     const messages = [];
     // Setup the build options for the application based on the buildTarget option
@@ -25,9 +26,8 @@ async function extractMessages(options, builderName, context, extractorConstruct
     buildOptions.budgets = undefined;
     buildOptions.index = false;
     buildOptions.serviceWorker = false;
-    buildOptions.ssr = false;
-    buildOptions.appShell = false;
-    buildOptions.prerender = false;
+    buildOptions.outputMode = schema_1.OutputMode.Static;
+    buildOptions.server = undefined;
     // Build the application with the build options
     const builderResult = await first((0, application_1.buildApplicationInternal)(buildOptions, context, extensions));
     let success = false;

package/src/tools/angular/angular-host.d.ts

@@ -13,7 +13,8 @@ export interface AngularHostOptions {
     fileReplacements?: Record<string, string>;
     sourceFileCache?: Map<string, ts.SourceFile>;
     modifiedFiles?: Set<string>;
-    transformStylesheet(data: string, containingFile: string, stylesheetFile?: string): Promise<string | null>;
+    externalStylesheets?: Map<string, string>;
+    transformStylesheet(data: string, containingFile: string, stylesheetFile?: string, order?: number): Promise<string | null>;
     processWebWorker(workerFile: string, containingFile: string): string;
 }
 /**

package/src/tools/angular/angular-host.js

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureSourceFileVersions = ensureSourceFileVersions;
 exports.createAngularCompilerHost = createAngularCompilerHost;
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_crypto_1 = require("node:crypto");
 const node_path_1 = __importDefault(require("node:path"));
 /**
@@ -107,13 +108,31 @@ function createAngularCompilerHost(typescript, compilerOptions, hostOptions) {
         if (context.type !== 'style') {
             return null;
         }
+        (0, node_assert_1.default)(!context.resourceFile || !hostOptions.externalStylesheets?.has(context.resourceFile), 'External runtime stylesheets should not be transformed: ' + context.resourceFile);
         // No transformation required if the resource is empty
         if (data.trim().length === 0) {
             return { content: '' };
         }
-        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined);
+        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined, 
+        // TODO: Remove once available in compiler-cli types
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        context.order);
         return typeof result === 'string' ? { content: result } : null;
     };
+    host.resourceNameToFileName = function (resourceName, containingFile) {
+        const resolvedPath = node_path_1.default.join(node_path_1.default.dirname(containingFile), resourceName);
+        // All resource names that have HTML file extensions are assumed to be templates
+        if (resourceName.endsWith('.html') || !hostOptions.externalStylesheets) {
+            return resolvedPath;
+        }
+        // For external stylesheets, create a unique identifier and store the mapping
+        let externalId = hostOptions.externalStylesheets.get(resolvedPath);
+        if (externalId === undefined) {
+            externalId = (0, node_crypto_1.createHash)('sha256').update(resolvedPath).digest('hex');
+            hostOptions.externalStylesheets.set(resolvedPath, externalId);
+        }
+        return externalId + '.css';
+    };
     // Allow the AOT compiler to request the set of changed templates and styles
     host.getModifiedResourceFiles = function () {
         return hostOptions.modifiedFiles;

package/src/tools/angular/compilation/angular-compilation.d.ts

@@ -30,6 +30,7 @@ export declare abstract class AngularCompilation {
         affectedFiles: ReadonlySet<ts.SourceFile>;
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
+        externalStylesheets?: ReadonlyMap<string, string>;
     }>;
     abstract emitAffectedFiles(): Iterable<EmitFileResult> | Promise<Iterable<EmitFileResult>>;
     protected abstract collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic> | Promise<Iterable<ts.Diagnostic>>;

package/src/tools/angular/compilation/aot-compilation.d.ts

@@ -15,6 +15,7 @@ export declare class AotCompilation extends AngularCompilation {
         affectedFiles: ReadonlySet<ts.SourceFile>;
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
+        externalStylesheets?: ReadonlyMap<string, string>;
     }>;
     collectDiagnostics(modes: DiagnosticModes): Iterable<ts.Diagnostic>;
     emitAffectedFiles(): Iterable<EmitFileResult>;

package/src/tools/angular/compilation/aot-compilation.js

@@ -47,6 +47,9 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         // Load the compiler configuration and transform as needed
         const { options: originalCompilerOptions, rootNames, errors: configurationDiagnostics, } = await this.loadConfiguration(tsconfig);
         const compilerOptions = compilerOptionsTransformer?.(originalCompilerOptions) ?? originalCompilerOptions;
+        if (compilerOptions.externalRuntimeStyles) {
+            hostOptions.externalStylesheets ??= new Map();
+        }
         // Create Angular compiler host
         const host = (0, angular_host_1.createAngularCompilerHost)(typescript_1.default, compilerOptions, hostOptions);
         // Create the Angular specific program that contains the Angular compiler
@@ -82,7 +85,12 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
             return [sourceFile.fileName, ...resourceDependencies];
         });
         this.#state = new AngularCompilationState(angularProgram, host, typeScriptProgram, affectedFiles, affectedFiles.size === 1 ? OptimizeFor.SingleFile : OptimizeFor.WholeProgram, (0, web_worker_transformer_1.createWorkerTransformer)(hostOptions.processWebWorker.bind(hostOptions)), this.#state?.diagnosticCache);
-        return { affectedFiles, compilerOptions, referencedFiles };
+        return {
+            affectedFiles,
+            compilerOptions,
+            referencedFiles,
+            externalStylesheets: hostOptions.externalStylesheets,
+        };
     }
     *collectDiagnostics(modes) {
         (0, node_assert_1.default)(this.#state, 'Angular compilation must be initialized prior to collecting diagnostics.');

package/src/tools/angular/compilation/parallel-compilation.d.ts

@@ -26,6 +26,7 @@ export declare class ParallelCompilation extends AngularCompilation {
         affectedFiles: ReadonlySet<SourceFile>;
         compilerOptions: CompilerOptions;
         referencedFiles: readonly string[];
+        externalStylesheets?: ReadonlyMap<string, string>;
     }>;
     /**
      * This is not needed with this compilation type since the worker will already send a response

package/src/tools/angular/compilation/parallel-worker.d.ts

@@ -19,6 +19,7 @@ export interface InitRequest {
     webWorkerSignal: Int32Array;
 }
 export declare function initialize(request: InitRequest): Promise<{
+    externalStylesheets: ReadonlyMap<string, string> | undefined;
     referencedFiles: readonly string[];
     compilerOptions: {
         allowJs: boolean | undefined;

package/src/tools/angular/compilation/parallel-worker.js

@@ -33,7 +33,7 @@ async function initialize(request) {
             stylesheetRequests.get(requestId)?.[0](value);
         }
     });
-    const { compilerOptions, referencedFiles } = await compilation.initialize(request.tsconfig, {
+    const { compilerOptions, referencedFiles, externalStylesheets } = await compilation.initialize(request.tsconfig, {
         fileReplacements: request.fileReplacements,
         sourceFileCache,
         modifiedFiles: sourceFileCache.modifiedFiles,
@@ -69,6 +69,7 @@ async function initialize(request) {
         return result?.transformedOptions ?? compilerOptions;
     });
     return {
+        externalStylesheets,
         referencedFiles,
         // TODO: Expand? `allowJs`, `isolatedModules`, `sourceMap`, `inlineSourceMap` are the only fields needed currently.
         compilerOptions: {

package/src/tools/esbuild/angular/compiler-plugin.d.ts

@@ -21,6 +21,7 @@ export interface CompilerPluginOptions {
     sourceFileCache?: SourceFileCache;
     loadResultCache?: LoadResultCache;
     incremental: boolean;
+    externalRuntimeStyles?: boolean;
 }
 export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
     inlineStyleLanguage: string;

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

@@ -35,6 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPlugin = createCompilerPlugin;
 const node_assert_1 = __importDefault(require("node:assert"));
+const node_crypto_1 = require("node:crypto");
 const path = __importStar(require("node:path"));
 const environment_options_1 = require("../../../utils/environment-options");
 const compilation_1 = require("../../angular/compilation");
@@ -120,13 +121,14 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Angular compiler which does not have direct knowledge of transitive resource
                 // dependencies or web worker processing.
                 let modifiedFiles;
+                let invalidatedStylesheetEntries;
                 if (pluginOptions.sourceFileCache?.modifiedFiles.size &&
                     referencedFileTracker &&
                     !pluginOptions.noopTypeScriptCompilation) {
                     // TODO: Differentiate between changed input files and stale output files
                     modifiedFiles = referencedFileTracker.update(pluginOptions.sourceFileCache.modifiedFiles);
                     pluginOptions.sourceFileCache.invalidate(modifiedFiles);
-                    stylesheetBundler.invalidate(modifiedFiles);
+                    invalidatedStylesheetEntries = stylesheetBundler.invalidate(modifiedFiles);
                 }
                 if (!pluginOptions.noopTypeScriptCompilation &&
                     compilation.update &&
@@ -138,7 +140,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     fileReplacements: pluginOptions.fileReplacements,
                     modifiedFiles,
                     sourceFileCache: pluginOptions.sourceFileCache,
-                    async transformStylesheet(data, containingFile, stylesheetFile) {
+                    async transformStylesheet(data, containingFile, stylesheetFile, order) {
                         let stylesheetResult;
                         // Stylesheet file only exists for external stylesheets
                         if (stylesheetFile) {
@@ -147,7 +149,17 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                         else {
                             stylesheetResult = await stylesheetBundler.bundleInline(data, containingFile, 
                             // Inline stylesheets from a template style element are always CSS
-                            containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage);
+                            containingFile.endsWith('.html') ? 'css' : styleOptions.inlineStyleLanguage, 
+                            // When external runtime styles are enabled, an identifier for the style that does not change
+                            // based on the content is required to avoid emitted JS code changes. Any JS code changes will
+                            // invalid the output and force a full page reload for HMR cases. The containing file and order
+                            // of the style within the containing file is used.
+                            pluginOptions.externalRuntimeStyles
+                                ? (0, node_crypto_1.createHash)('sha-256')
+                                    .update(containingFile)
+                                    .update((order ?? 0).toString())
+                                    .digest('hex')
+                                : undefined);
                         }
                         const { contents, outputFiles, metafile, referencedFiles, errors, warnings } = stylesheetResult;
                         if (errors) {
@@ -201,6 +213,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 // Initialize the Angular compilation for the current build.
                 // In watch mode, previous build state will be reused.
                 let referencedFiles;
+                let externalStylesheets;
                 try {
                     const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
                     shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
@@ -211,6 +224,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                             !!initializationResult.compilerOptions.sourceMap ||
                             !!initializationResult.compilerOptions.inlineSourceMap;
                     referencedFiles = initializationResult.referencedFiles;
+                    externalStylesheets = initializationResult.externalStylesheets;
                 }
                 catch (error) {
                     (result.errors ??= []).push({
@@ -231,6 +245,19 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     hasCompilationErrors = await sharedTSCompilationState.waitUntilReady;
                     return result;
                 }
+                if (externalStylesheets) {
+                    // Process any new external stylesheets
+                    for (const [stylesheetFile, externalId] of externalStylesheets) {
+                        await bundleExternalStylesheet(stylesheetBundler, stylesheetFile, externalId, result, additionalResults);
+                    }
+                    // Process any updated stylesheets
+                    if (invalidatedStylesheetEntries) {
+                        for (const stylesheetFile of invalidatedStylesheetEntries) {
+                            // externalId is already linked in the bundler context so only enabling is required here
+                            await bundleExternalStylesheet(stylesheetBundler, stylesheetFile, true, result, additionalResults);
+                        }
+                    }
+                }
                 // Update TypeScript file output cache for all affected files
                 try {
                     await (0, profiling_1.profileAsync)('NG_EMIT_TS', async () => {
@@ -376,6 +403,17 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
         },
     };
 }
+async function bundleExternalStylesheet(stylesheetBundler, stylesheetFile, externalId, result, additionalResults) {
+    const { outputFiles, metafile, errors, warnings } = await stylesheetBundler.bundleFile(stylesheetFile, externalId);
+    if (errors) {
+        (result.errors ??= []).push(...errors);
+    }
+    (result.warnings ??= []).push(...warnings);
+    additionalResults.set(stylesheetFile, {
+        outputFiles,
+        metafile,
+    });
+}
 function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks) {
     return (compilerOptions) => {
         // target of 9 is ES2022 (using the number avoids an expensive import of typescript just for an enum)
@@ -433,6 +471,7 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
             mapRoot: undefined,
             sourceRoot: undefined,
             preserveSymlinks,
+            externalRuntimeStyles: pluginOptions.externalRuntimeStyles,
         };
     };
 }

package/src/tools/esbuild/angular/component-stylesheets.d.ts

@@ -22,7 +22,7 @@ export declare class ComponentStylesheetBundler {
      * @param cache A load result cache to use when bundling.
      */
     constructor(options: BundleStylesheetOptions, incremental: boolean);
-    bundleFile(entry: string): Promise<{
+    bundleFile(entry: string, externalId?: string | boolean): Promise<{
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
@@ -30,7 +30,7 @@ export declare class ComponentStylesheetBundler {
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
-    bundleInline(data: string, filename: string, language: string): Promise<{
+    bundleInline(data: string, filename: string, language: string, externalId?: string): Promise<{
         errors: import("esbuild").Message[] | undefined;
         warnings: import("esbuild").Message[];
         contents: string;
@@ -38,7 +38,12 @@ export declare class ComponentStylesheetBundler {
         metafile: import("esbuild").Metafile | undefined;
         referencedFiles: Set<string> | undefined;
     }>;
-    invalidate(files: Iterable<string>): void;
+    /**
+     * Invalidates both file and inline based component style bundling state for a set of modified files.
+     * @param files The group of files that have been modified
+     * @returns An array of file based stylesheet entries if any were invalidated; otherwise, undefined.
+     */
+    invalidate(files: Iterable<string>): string[] | undefined;
     dispose(): Promise<void>;
     private extractResult;
 }

package/src/tools/esbuild/angular/component-stylesheets.js

@@ -11,6 +11,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentStylesheetBundler = void 0;
+const node_assert_1 = __importDefault(require("node:assert"));
 const node_crypto_1 = require("node:crypto");
 const node_path_1 = __importDefault(require("node:path"));
 const bundler_context_1 = require("../bundler-context");
@@ -35,21 +36,31 @@ class ComponentStylesheetBundler {
         this.options = options;
         this.incremental = incremental;
     }
-    async bundleFile(entry) {
+    async bundleFile(entry, externalId) {
         const bundlerContext = await this.#fileContexts.getOrCreate(entry, () => {
             return new bundler_context_1.BundlerContext(this.options.workspaceRoot, this.incremental, (loadCache) => {
                 const buildOptions = (0, bundle_options_1.createStylesheetBundleOptions)(this.options, loadCache);
-                buildOptions.entryPoints = [entry];
+                if (externalId) {
+                    (0, node_assert_1.default)(typeof externalId === 'string', 'Initial external component stylesheets must have a string identifier');
+                    buildOptions.entryPoints = { [externalId]: entry };
+                    delete buildOptions.publicPath;
+                }
+                else {
+                    buildOptions.entryPoints = [entry];
+                }
                 return buildOptions;
             });
         });
-        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles, !!externalId);
     }
-    async bundleInline(data, filename, language) {
+    async bundleInline(data, filename, language, externalId) {
         // Use a hash of the inline stylesheet content to ensure a consistent identifier. External stylesheets will resolve
         // to the actual stylesheet file path.
         // TODO: Consider xxhash instead for hashing
-        const id = (0, node_crypto_1.createHash)('sha256').update(data).digest('hex');
+        const id = (0, node_crypto_1.createHash)('sha256')
+            .update(data)
+            .update(externalId ?? '')
+            .digest('hex');
         const entry = [language, id, filename].join(';');
         const bundlerContext = await this.#inlineContexts.getOrCreate(entry, () => {
             const namespace = 'angular:styles/component';
@@ -57,7 +68,13 @@ class ComponentStylesheetBundler {
                 const buildOptions = (0, bundle_options_1.createStylesheetBundleOptions)(this.options, loadCache, {
                     [entry]: data,
                 });
-                buildOptions.entryPoints = [`${namespace};${entry}`];
+                if (externalId) {
+                    buildOptions.entryPoints = { [externalId]: `${namespace};${entry}` };
+                    delete buildOptions.publicPath;
+                }
+                else {
+                    buildOptions.entryPoints = [`${namespace};${entry}`];
+                }
                 buildOptions.plugins.push({
                     name: 'angular-component-styles',
                     setup(build) {
@@ -83,19 +100,29 @@ class ComponentStylesheetBundler {
             });
         });
         // Extract the result of the bundling from the output files
-        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles);
+        return this.extractResult(await bundlerContext.bundle(), bundlerContext.watchFiles, !!externalId);
     }
+    /**
+     * Invalidates both file and inline based component style bundling state for a set of modified files.
+     * @param files The group of files that have been modified
+     * @returns An array of file based stylesheet entries if any were invalidated; otherwise, undefined.
+     */
     invalidate(files) {
         if (!this.incremental) {
             return;
         }
         const normalizedFiles = [...files].map(node_path_1.default.normalize);
-        for (const bundler of this.#fileContexts.values()) {
-            bundler.invalidate(normalizedFiles);
+        let entries;
+        for (const [entry, bundler] of this.#fileContexts.entries()) {
+            if (bundler.invalidate(normalizedFiles)) {
+                entries ??= [];
+                entries.push(entry);
+            }
         }
         for (const bundler of this.#inlineContexts.values()) {
             bundler.invalidate(normalizedFiles);
         }
+        return entries;
     }
     async dispose() {
         const contexts = [...this.#fileContexts.values(), ...this.#inlineContexts.values()];
@@ -103,7 +130,7 @@ class ComponentStylesheetBundler {
         this.#inlineContexts.clear();
         await Promise.allSettled(contexts.map((context) => context.dispose()));
     }
-    extractResult(result, referencedFiles) {
+    extractResult(result, referencedFiles, external) {
         let contents = '';
         let metafile;
         const outputFiles = [];
@@ -122,7 +149,15 @@ class ComponentStylesheetBundler {
                     outputFiles.push(clonedOutputFile);
                 }
                 else if (filename.endsWith('.css')) {
-                    contents = outputFile.text;
+                    if (external) {
+                        const clonedOutputFile = outputFile.clone();
+                        clonedOutputFile.path = node_path_1.default.join(this.options.workspaceRoot, outputFile.path);
+                        outputFiles.push(clonedOutputFile);
+                        contents = node_path_1.default.posix.join(this.options.publicPath ?? '', filename);
+                    }
+                    else {
+                        contents = outputFile.text;
+                    }
                 }
                 else {
                     throw new Error(`Unexpected non CSS/Media file "${filename}" outputted during component stylesheet processing.`);

package/src/tools/esbuild/application-code-bundle.d.ts

@@ -13,3 +13,4 @@ export declare function createBrowserCodeBundleOptions(options: NormalizedApplic
 export declare function createBrowserPolyfillBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): BuildOptions | BundlerOptionsFactory | undefined;
 export declare function createServerPolyfillBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): BundlerOptionsFactory | undefined;
 export declare function createServerMainCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache): BuildOptions;
+export declare function createSsrEntryCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache): BuildOptions;