@angular/build 19.0.0-next.9 → 19.0.0-rc.0

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

@@ -8,6 +8,8 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupBundlerContexts = setupBundlerContexts;
+exports.createComponentStyleBundler = createComponentStyleBundler;
+const component_stylesheets_1 = require("../../tools/esbuild/angular/component-stylesheets");
 const application_code_bundle_1 = require("../../tools/esbuild/application-code-bundle");
 const bundler_context_1 = require("../../tools/esbuild/bundler-context");
 const global_scripts_1 = require("../../tools/esbuild/global-scripts");
@@ -21,14 +23,13 @@ const utils_1 = require("../../tools/esbuild/utils");
  * @param codeBundleCache An instance of the TypeScript source file cache.
  * @returns An array of BundlerContext objects.
  */
-function setupBundlerContexts(options, browsers, codeBundleCache) {
+function setupBundlerContexts(options, target, codeBundleCache, stylesheetBundler) {
     const { outputMode, serverEntryPoint, appShellOptions, prerenderOptions, ssrOptions, workspaceRoot, watch = false, } = options;
-    const target = (0, utils_1.transformSupportedBrowsersToTargets)(browsers);
     const bundlerContexts = [];
     // Browser application code
-    bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createBrowserCodeBundleOptions)(options, target, codeBundleCache)));
+    bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createBrowserCodeBundleOptions)(options, target, codeBundleCache, stylesheetBundler)));
     // Browser polyfills code
-    const browserPolyfillBundleOptions = (0, application_code_bundle_1.createBrowserPolyfillBundleOptions)(options, target, codeBundleCache);
+    const browserPolyfillBundleOptions = (0, application_code_bundle_1.createBrowserPolyfillBundleOptions)(options, target, codeBundleCache, stylesheetBundler);
     if (browserPolyfillBundleOptions) {
         bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, browserPolyfillBundleOptions));
     }
@@ -53,10 +54,10 @@ function setupBundlerContexts(options, browsers, codeBundleCache) {
     // Skip server build when none of the features are enabled.
     if (serverEntryPoint && (outputMode || prerenderOptions || appShellOptions || ssrOptions)) {
         const nodeTargets = [...target, ...(0, utils_1.getSupportedNodeTargets)()];
-        bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createServerMainCodeBundleOptions)(options, nodeTargets, codeBundleCache)));
+        bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createServerMainCodeBundleOptions)(options, nodeTargets, codeBundleCache, stylesheetBundler)));
         if (outputMode && ssrOptions?.entry) {
             // New behavior introduced: 'server.ts' is now bundled separately from 'main.server.ts'.
-            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createSsrEntryCodeBundleOptions)(options, nodeTargets, codeBundleCache)));
+            bundlerContexts.push(new bundler_context_1.BundlerContext(workspaceRoot, watch, (0, application_code_bundle_1.createSsrEntryCodeBundleOptions)(options, nodeTargets, codeBundleCache, stylesheetBundler)));
         }
         // Server polyfills code
         const serverPolyfillBundleOptions = (0, application_code_bundle_1.createServerPolyfillBundleOptions)(options, nodeTargets, codeBundleCache);
@@ -66,3 +67,29 @@ function setupBundlerContexts(options, browsers, codeBundleCache) {
     }
     return bundlerContexts;
 }
+function createComponentStyleBundler(options, target) {
+    const { workspaceRoot, optimizationOptions, sourcemapOptions, outputNames, externalDependencies, preserveSymlinks, stylePreprocessorOptions, inlineStyleLanguage, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, } = options;
+    const incremental = !!options.watch;
+    return new component_stylesheets_1.ComponentStylesheetBundler({
+        workspaceRoot,
+        inlineFonts: !!optimizationOptions.fonts.inline,
+        optimization: !!optimizationOptions.styles.minify,
+        sourcemap: 
+        // Hidden component stylesheet sourcemaps are inaccessible which is effectively
+        // the same as being disabled. Disabling has the advantage of avoiding the overhead
+        // of sourcemap processing.
+        sourcemapOptions.styles && !sourcemapOptions.hidden ? 'linked' : false,
+        outputNames,
+        includePaths: stylePreprocessorOptions?.includePaths,
+        // string[] | undefined' is not assignable to type '(Version | DeprecationOrId)[] | undefined'.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        sass: stylePreprocessorOptions?.sass,
+        externalDependencies,
+        target,
+        preserveSymlinks,
+        tailwindConfiguration,
+        postcssConfiguration,
+        cacheOptions,
+        publicPath,
+    }, inlineStyleLanguage, incremental);
+}

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

@@ -16,7 +16,7 @@ import type { DevServerBuilderOutput } from './output';
 interface OutputFileRecord {
     contents: Uint8Array;
     size: number;
-    hash?: string;
+    hash: string;
     updated: boolean;
     servable: boolean;
     type: BuildOutputFileType;
@@ -32,6 +32,6 @@ export declare function serveWithVite(serverOptions: NormalizedDevServerOptions,
     middleware?: Connect.NextHandleFunction[];
     buildPlugins?: Plugin[];
 }): AsyncIterableIterator<DevServerBuilderOutput>;
-export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: DevServerExternalResultMetadata, ssrMode: ServerSsrMode, prebundleTransformer: JavaScriptTransformer, target: string[], zoneless: boolean, usedComponentStyles: Map<string, string[]>, prebundleLoaderExtensions: EsbuildLoaderOption | undefined, extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>, thirdPartySourcemaps?: boolean): Promise<InlineConfig>;
+export declare function setupServer(serverOptions: NormalizedDevServerOptions, outputFiles: Map<string, OutputFileRecord>, assets: Map<string, string>, preserveSymlinks: boolean | undefined, externalMetadata: DevServerExternalResultMetadata, ssrMode: ServerSsrMode, prebundleTransformer: JavaScriptTransformer, target: string[], zoneless: boolean, usedComponentStyles: Map<string, Set<string>>, templateUpdates: Map<string, string>, prebundleLoaderExtensions: EsbuildLoaderOption | undefined, extensionMiddleware?: Connect.NextHandleFunction[], indexHtmlTransformer?: (content: string) => Promise<string>, thirdPartySourcemaps?: boolean): Promise<InlineConfig>;
 type EsbuildLoaderOption = Exclude<DepOptimizationConfig['esbuildOptions'], undefined>['loader'];
 export {};

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

@@ -65,10 +65,10 @@ 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) {
+    if (browserOptions.prerender || (browserOptions.outputMode && browserOptions.server)) {
         // 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;
+        browserOptions.prerender = undefined;
         browserOptions.ssr ||= true;
     }
     // Set all packages as external to support Vite's prebundle caching
@@ -92,8 +92,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         // 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;
+    // Enable to support component style hot reloading (`NG_HMR_CSTYLES=0` can be used to disable)
+    browserOptions.externalRuntimeStyles = !!serverOptions.liveReload && environment_options_1.useComponentStyleHmr;
+    if (browserOptions.externalRuntimeStyles) {
+        // Preload the @angular/compiler package to avoid first stylesheet request delays.
+        // Once @angular/build is native ESM, this should be re-evaluated.
+        void (0, load_esm_1.loadEsmModule)('@angular/compiler');
+    }
     // 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.
@@ -116,6 +121,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         explicitServer: [],
     };
     const usedComponentStyles = new Map();
+    const templateUpdates = new Map();
     // Add cleanup logic via a builder teardown.
     let deferred;
     context.addTeardown(async () => {
@@ -157,6 +163,8 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                         assetFiles.set('/' + normalizePath(outputPath), normalizePath(file.inputPath));
                     }
                 }
+                // Clear stale template updates on a code rebuilds
+                templateUpdates.clear();
                 // Analyze result files for changes
                 analyzeResultFiles(normalizePath, htmlIndexPath, result.files, generatedFiles);
                 break;
@@ -166,8 +174,18 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 break;
             case results_1.ResultKind.ComponentUpdate:
                 (0, node_assert_1.default)(serverOptions.hmr, 'Component updates are only supported with HMR enabled.');
-                // TODO: Implement support -- application builder currently does not use
-                break;
+                (0, node_assert_1.default)(server, 'Builder must provide an initial full build before component update results.');
+                for (const componentUpdate of result.updates) {
+                    if (componentUpdate.type === 'template') {
+                        templateUpdates.set(componentUpdate.id, componentUpdate.content);
+                        server.ws.send('angular:component-update', {
+                            id: componentUpdate.id,
+                            timestamp: Date.now(),
+                        });
+                    }
+                }
+                context.logger.info('Component update sent to client(s).');
+                continue;
             default:
                 context.logger.warn(`Unknown result kind [${result.kind}] provided by build.`);
                 continue;
@@ -249,11 +267,17 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 browserOptions.ssr.entry) {
                 ssrMode = plugins_1.ServerSsrMode.ExternalSsrMiddleware;
             }
-            else if (browserOptions.server) {
+            else if (browserOptions.ssr) {
                 ssrMode = plugins_1.ServerSsrMode.InternalSsrMiddleware;
             }
+            if (browserOptions.progress !== false && ssrMode !== plugins_1.ServerSsrMode.NoSsr) {
+                // This is a workaround for https://github.com/angular/angular-cli/issues/28336, which is caused by the interaction between `zone.js` and `listr2`.
+                process.once('SIGINT', () => {
+                    process.kill(process.pid);
+                });
+            }
             // Setup server and start listening
-            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);
+            const serverConfiguration = await setupServer(serverOptions, generatedFiles, assetFiles, browserOptions.preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, (0, internal_1.isZonelessApp)(polyfills), usedComponentStyles, templateUpdates, browserOptions.loader, extensions?.middleware, transformers?.indexHtml, thirdPartySourcemaps);
             server = await createServer(serverConfiguration);
             await server.listen();
             const urls = server.resolvedUrls;
@@ -322,7 +346,7 @@ async function handleUpdate(normalizePath, generatedFiles, server, serverOptions
                     // are not typically reused across components.
                     const componentIds = usedComponentStyles.get(filePath);
                     if (componentIds) {
-                        return componentIds.map((id) => ({
+                        return Array.from(componentIds).map((id) => ({
                             type: 'css-update',
                             timestamp,
                             path: `${filePath}?ngcomp` + (id ? `=${id}` : ''),
@@ -373,6 +397,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
                 contents: file.contents,
                 servable,
                 size: file.contents.byteLength,
+                hash: file.hash,
                 type: file.type,
                 updated: false,
             });
@@ -403,7 +428,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
         }
     }
 }
-async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
+async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, usedComponentStyles, templateUpdates, 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');
@@ -496,6 +521,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 indexHtmlTransformer,
                 extensionMiddleware,
                 usedComponentStyles,
+                templateUpdates,
                 ssrMode,
             }),
             (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
@@ -568,6 +594,9 @@ function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless
             supported: (0, internal_1.getFeatureSupport)(target, zoneless),
             plugins,
             loader,
+            define: {
+                'ngServerMode': `${ssr}`,
+            },
             resolveExtensions: ['.mjs', '.js', '.cjs'],
         },
     };

package/src/index.d.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 export { buildApplication, type ApplicationBuilderOptions, type ApplicationBuilderOutput, } from './builders/application';
+export type { ApplicationBuilderExtensions } from './builders/application/options';
 export { type BuildOutputFile, BuildOutputFileType } from './tools/esbuild/bundler-context';
 export type { BuildOutputAsset } from './tools/esbuild/bundler-execution-result';
 export { executeDevServerBuilder, type DevServerBuilderOptions, type DevServerBuilderOutput, } from './builders/dev-server';

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

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

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

@@ -113,10 +113,7 @@ function createAngularCompilerHost(typescript, compilerOptions, hostOptions) {
         if (data.trim().length === 0) {
             return { content: '' };
         }
-        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);
+        const result = await hostOptions.transformStylesheet(data, context.containingFile, context.resourceFile ?? undefined, context.order, context.className);
         return typeof result === 'string' ? { content: result } : null;
     };
     host.resourceNameToFileName = function (resourceName, containingFile) {

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

@@ -31,6 +31,7 @@ export declare abstract class AngularCompilation {
         compilerOptions: ng.CompilerOptions;
         referencedFiles: readonly string[];
         externalStylesheets?: ReadonlyMap<string, string>;
+        templateUpdates?: 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

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

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

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AotCompilation = void 0;
 const node_assert_1 = __importDefault(require("node:assert"));
+const node_path_1 = require("node:path");
 const typescript_1 = __importDefault(require("typescript"));
 const profiling_1 = require("../../esbuild/profiling");
 const angular_host_1 = require("../angular-host");
@@ -65,6 +66,33 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
         }
         const typeScriptProgram = typescript_1.default.createEmitAndSemanticDiagnosticsBuilderProgram(angularTypeScriptProgram, host, oldProgram, configurationDiagnostics);
         await (0, profiling_1.profileAsync)('NG_ANALYZE_PROGRAM', () => angularCompiler.analyzeAsync());
+        let templateUpdates;
+        if (compilerOptions['_enableHmr'] &&
+            hostOptions.modifiedFiles &&
+            hasOnlyTemplates(hostOptions.modifiedFiles)) {
+            const componentNodes = [...hostOptions.modifiedFiles].flatMap((file) => [
+                ...angularCompiler.getComponentsWithTemplateFile(file),
+            ]);
+            for (const node of componentNodes) {
+                if (!typescript_1.default.isClassDeclaration(node)) {
+                    continue;
+                }
+                const componentFilename = node.getSourceFile().fileName;
+                let relativePath = (0, node_path_1.relative)(host.getCurrentDirectory(), componentFilename);
+                if (relativePath.startsWith('..')) {
+                    relativePath = componentFilename;
+                }
+                const updateId = encodeURIComponent(`${host.getCanonicalFileName(relativePath)}@${node.name?.text}`);
+                const updateText = angularCompiler.emitHmrUpdateModule(node);
+                if (updateText === null) {
+                    // Build is needed if a template cannot be updated
+                    templateUpdates = undefined;
+                    break;
+                }
+                templateUpdates ??= new Map();
+                templateUpdates.set(updateId, updateText);
+            }
+        }
         const affectedFiles = (0, profiling_1.profileSync)('NG_FIND_AFFECTED', () => findAffectedFiles(typeScriptProgram, angularCompiler, usingBuildInfo));
         // Get all files referenced in the TypeScript/Angular program including component resources
         const referencedFiles = typeScriptProgram
@@ -90,6 +118,7 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
             compilerOptions,
             referencedFiles,
             externalStylesheets: hostOptions.externalStylesheets,
+            templateUpdates,
         };
     }
     *collectDiagnostics(modes) {
@@ -267,3 +296,13 @@ function findAffectedFiles(builder, { ignoreForDiagnostics }, includeTTC) {
     }
     return affectedFiles;
 }
+function hasOnlyTemplates(modifiedFiles) {
+    for (const file of modifiedFiles) {
+        const lowerFile = file.toLowerCase();
+        if (lowerFile.endsWith('.html') || lowerFile.endsWith('.svg')) {
+            continue;
+        }
+        return false;
+    }
+    return true;
+}

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

@@ -37,9 +37,9 @@ class ParallelCompilation extends angular_compilation_1.AngularCompilation {
     initialize(tsconfig, hostOptions, compilerOptionsTransformer) {
         const stylesheetChannel = new node_worker_threads_1.MessageChannel();
         // The request identifier is required because Angular can issue multiple concurrent requests
-        stylesheetChannel.port1.on('message', ({ requestId, data, containingFile, stylesheetFile }) => {
+        stylesheetChannel.port1.on('message', ({ requestId, data, containingFile, stylesheetFile, order, className }) => {
             hostOptions
-                .transformStylesheet(data, containingFile, stylesheetFile)
+                .transformStylesheet(data, containingFile, stylesheetFile, order, className)
                 .then((value) => stylesheetChannel.port1.postMessage({ requestId, value }))
                 .catch((error) => stylesheetChannel.port1.postMessage({ requestId, error }));
         });

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

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

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

@@ -33,11 +33,11 @@ async function initialize(request) {
             stylesheetRequests.get(requestId)?.[0](value);
         }
     });
-    const { compilerOptions, referencedFiles, externalStylesheets } = await compilation.initialize(request.tsconfig, {
+    const { compilerOptions, referencedFiles, externalStylesheets, templateUpdates } = await compilation.initialize(request.tsconfig, {
         fileReplacements: request.fileReplacements,
         sourceFileCache,
         modifiedFiles: sourceFileCache.modifiedFiles,
-        transformStylesheet(data, containingFile, stylesheetFile) {
+        transformStylesheet(data, containingFile, stylesheetFile, order, className) {
             const requestId = (0, node_crypto_1.randomUUID)();
             const resultPromise = new Promise((resolve, reject) => stylesheetRequests.set(requestId, [resolve, reject]));
             request.stylesheetPort.postMessage({
@@ -45,6 +45,8 @@ async function initialize(request) {
                 data,
                 containingFile,
                 stylesheetFile,
+                order,
+                className,
             });
             return resultPromise;
         },
@@ -70,6 +72,7 @@ async function initialize(request) {
     });
     return {
         externalStylesheets,
+        templateUpdates,
         referencedFiles,
         // TODO: Expand? `allowJs`, `isolatedModules`, `sourceMap`, `inlineSourceMap` are the only fields needed currently.
         compilerOptions: {

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

@@ -7,7 +7,7 @@
  */
 import type { Plugin } from 'esbuild';
 import { LoadResultCache } from '../load-result-cache';
-import { BundleStylesheetOptions } from '../stylesheets/bundle-options';
+import { ComponentStylesheetBundler } from './component-stylesheets';
 import { SourceFileCache } from './source-file-cache';
 export interface CompilerPluginOptions {
     sourcemap: boolean | 'external';
@@ -24,6 +24,4 @@ export interface CompilerPluginOptions {
     externalRuntimeStyles?: boolean;
     instrumentForCoverage?: (request: string) => boolean;
 }
-export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, styleOptions: BundleStylesheetOptions & {
-    inlineStyleLanguage: string;
-}): Plugin;
+export declare function createCompilerPlugin(pluginOptions: CompilerPluginOptions, stylesheetBundler: ComponentStylesheetBundler): Plugin;

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

@@ -43,11 +43,10 @@ const javascript_transformer_1 = require("../javascript-transformer");
 const load_result_cache_1 = require("../load-result-cache");
 const profiling_1 = require("../profiling");
 const compilation_state_1 = require("./compilation-state");
-const component_stylesheets_1 = require("./component-stylesheets");
 const file_reference_tracker_1 = require("./file-reference-tracker");
 const jit_plugin_callbacks_1 = require("./jit-plugin-callbacks");
 // eslint-disable-next-line max-lines-per-function
-function createCompilerPlugin(pluginOptions, styleOptions) {
+function createCompilerPlugin(pluginOptions, stylesheetBundler) {
     return {
         name: 'angular-compiler',
         // eslint-disable-next-line max-lines-per-function
@@ -101,8 +100,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             let shouldTsIgnoreJs = true;
             // Determines if transpilation should be handle by TypeScript or esbuild
             let useTypeScriptTranspilation = true;
-            // Track incremental component stylesheet builds
-            const stylesheetBundler = new component_stylesheets_1.ComponentStylesheetBundler(styleOptions, pluginOptions.incremental);
             let sharedTSCompilationState;
             // To fully invalidate files, track resource referenced files and their referencing source
             const referencedFileTracker = new file_reference_tracker_1.FileReferenceTracker();
@@ -121,14 +118,17 @@ 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);
-                    invalidatedStylesheetEntries = stylesheetBundler.invalidate(modifiedFiles);
+                    // External runtime styles are invalidated and rebuilt at the beginning of a rebuild to avoid
+                    // the need to execute the application bundler for component style only changes.
+                    if (!pluginOptions.externalRuntimeStyles) {
+                        stylesheetBundler.invalidate(modifiedFiles);
+                    }
                 }
                 if (!pluginOptions.noopTypeScriptCompilation &&
                     compilation.update &&
@@ -140,7 +140,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     fileReplacements: pluginOptions.fileReplacements,
                     modifiedFiles,
                     sourceFileCache: pluginOptions.sourceFileCache,
-                    async transformStylesheet(data, containingFile, stylesheetFile, order) {
+                    async transformStylesheet(data, containingFile, stylesheetFile, order, className) {
                         let stylesheetResult;
                         // Stylesheet file only exists for external stylesheets
                         if (stylesheetFile) {
@@ -148,8 +148,8 @@ 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, 
+                            // Inline stylesheets from a template style element are always CSS; Otherwise, use default.
+                            containingFile.endsWith('.html') ? 'css' : undefined, 
                             // 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
@@ -158,14 +158,16 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                                 ? (0, node_crypto_1.createHash)('sha-256')
                                     .update(containingFile)
                                     .update((order ?? 0).toString())
+                                    .update(className ?? '')
                                     .digest('hex')
                                 : undefined);
                         }
-                        const { contents, outputFiles, metafile, referencedFiles, errors, warnings } = stylesheetResult;
-                        if (errors) {
-                            (result.errors ??= []).push(...errors);
+                        (result.warnings ??= []).push(...stylesheetResult.warnings);
+                        if (stylesheetResult.errors) {
+                            (result.errors ??= []).push(...stylesheetResult.errors);
+                            return '';
                         }
-                        (result.warnings ??= []).push(...warnings);
+                        const { contents, outputFiles, metafile, referencedFiles } = stylesheetResult;
                         additionalResults.set(stylesheetFile ?? containingFile, {
                             outputFiles,
                             metafile,
@@ -215,7 +217,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                 let referencedFiles;
                 let externalStylesheets;
                 try {
-                    const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks));
+                    const initializationResult = await compilation.initialize(pluginOptions.tsconfig, hostOptions, createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks, build.initialOptions.conditions));
                     shouldTsIgnoreJs = !initializationResult.compilerOptions.allowJs;
                     // Isolated modules option ensures safe non-TypeScript transpilation.
                     // Typescript printing support for sourcemaps is not yet integrated.
@@ -250,13 +252,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     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 {
@@ -344,9 +339,22 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
                     // Store as the returned Uint8Array to allow caching the fully transformed code
                     typeScriptFileCache.set(request, contents);
                 }
+                let loader;
+                if (useTypeScriptTranspilation || isJS) {
+                    // TypeScript has transpiled to JS or is already JS
+                    loader = 'js';
+                }
+                else if (request.at(-1) === 'x') {
+                    // TSX and TS have different syntax rules. Only set if input is a TSX file.
+                    loader = 'tsx';
+                }
+                else {
+                    // Otherwise, directly bundle TS
+                    loader = 'ts';
+                }
                 return {
                     contents,
-                    loader: useTypeScriptTranspilation || isJS ? 'js' : 'ts',
+                    loader,
                 };
             });
             build.onLoad({ filter: /\.[cm]?js$/ }, (0, load_result_cache_1.createCachedLoad)(pluginOptions.loadResultCache, async (args) => {
@@ -361,7 +369,7 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             }));
             // Setup bundling of component templates and stylesheets when in JIT mode
             if (pluginOptions.jit) {
-                (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, styleOptions.inlineStyleLanguage, pluginOptions.loadResultCache);
+                (0, jit_plugin_callbacks_1.setupJitPluginCallbacks)(build, stylesheetBundler, additionalResults, pluginOptions.loadResultCache);
             }
             build.onEnd((result) => {
                 // Ensure other compilations are unblocked if the main compilation throws during start
@@ -384,7 +392,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             });
             build.onDispose(() => {
                 sharedTSCompilationState?.dispose();
-                void stylesheetBundler.dispose();
                 void compilation.close?.();
                 void cacheStore?.close();
             });
@@ -405,17 +412,25 @@ 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);
+    const styleResult = await stylesheetBundler.bundleFile(stylesheetFile, externalId);
+    (result.warnings ??= []).push(...styleResult.warnings);
+    if (styleResult.errors) {
+        (result.errors ??= []).push(...styleResult.errors);
+    }
+    else {
+        const { outputFiles, metafile } = styleResult;
+        // Clear inputs to prevent triggering a rebuild of the application code for component
+        // stylesheet file only changes when the dev server enables the internal-only external
+        // stylesheet option. This does not affect builds since only the dev server can enable
+        // the internal option.
+        metafile.inputs = {};
+        additionalResults.set(stylesheetFile, {
+            outputFiles,
+            metafile,
+        });
     }
-    (result.warnings ??= []).push(...warnings);
-    additionalResults.set(stylesheetFile, {
-        outputFiles,
-        metafile,
-    });
 }
-function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks) {
+function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserveSymlinks, customConditions) {
     return (compilerOptions) => {
         // target of 9 is ES2022 (using the number avoids an expensive import of typescript just for an enum)
         if (compilerOptions.target === undefined || compilerOptions.target < 9 /** ES2022 */) {
@@ -463,6 +478,11 @@ function createCompilerOptionsTransformer(setupWarnings, pluginOptions, preserve
                 notes: [{ text: `The 'module' option will be set to 'ES2022' instead.` }],
             });
         }
+        // Synchronize custom resolve conditions.
+        // Set if using the supported bundler resolution mode (bundler is the default in new projects)
+        if (compilerOptions.moduleResolution === 100 /* ModuleResolutionKind.Bundler */) {
+            compilerOptions.customConditions = customConditions;
+        }
         return {
             ...compilerOptions,
             noEmitOnError: false,