@angular/build 19.0.0-next.11 → 19.0.0-next.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.0-next.11",
+  "version": "19.0.0-next.13",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,11 +23,11 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.0-next.11",
-    "@babel/core": "7.25.8",
-    "@babel/helper-annotate-as-pure": "7.25.7",
+    "@angular-devkit/architect": "0.1900.0-next.13",
+    "@babel/core": "7.25.9",
+    "@babel/helper-annotate-as-pure": "7.25.9",
     "@babel/helper-split-export-declaration": "7.24.7",
-    "@babel/plugin-syntax-import-attributes": "7.25.7",
+    "@babel/plugin-syntax-import-attributes": "7.25.9",
     "@inquirer/confirm": "5.0.0",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "browserslist": "^4.23.0",
@@ -43,9 +43,9 @@
     "picomatch": "4.0.2",
     "piscina": "4.7.0",
     "rollup": "4.24.0",
-    "sass": "1.79.5",
+    "sass": "1.80.3",
     "semver": "7.6.3",
-    "vite": "5.4.9",
+    "vite": "5.4.10",
     "watchpack": "2.4.2"
   },
   "optionalDependencies": {
@@ -57,7 +57,7 @@
     "@angular/localize": "^19.0.0-next.9",
     "@angular/platform-server": "^19.0.0-next.9",
     "@angular/service-worker": "^19.0.0-next.9",
-    "@angular/ssr": "^19.0.0-next.11",
+    "@angular/ssr": "^19.0.0-next.13",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

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

@@ -41,17 +41,25 @@ async function executeBuild(options, context, rebuildState) {
         await (0, i18n_1.loadActiveTranslations)(context, i18nOptions);
     }
     // Reuse rebuild state or create new bundle contexts for code and global stylesheets
-    let bundlerContexts = rebuildState?.rebuildContexts;
-    const codeBundleCache = rebuildState?.codeBundleCache ??
-        new source_file_cache_1.SourceFileCache(cacheOptions.enabled ? cacheOptions.path : undefined);
-    if (bundlerContexts === undefined) {
-        bundlerContexts = (0, setup_bundling_1.setupBundlerContexts)(options, browsers, codeBundleCache);
+    let bundlerContexts;
+    let componentStyleBundler;
+    let codeBundleCache;
+    if (rebuildState) {
+        bundlerContexts = rebuildState.rebuildContexts;
+        componentStyleBundler = rebuildState.componentStyleBundler;
+        codeBundleCache = rebuildState.codeBundleCache;
+    }
+    else {
+        const target = (0, utils_1.transformSupportedBrowsersToTargets)(browsers);
+        codeBundleCache = new source_file_cache_1.SourceFileCache(cacheOptions.enabled ? cacheOptions.path : undefined);
+        componentStyleBundler = (0, setup_bundling_1.createComponentStyleBundler)(options, target);
+        bundlerContexts = (0, setup_bundling_1.setupBundlerContexts)(options, target, codeBundleCache, componentStyleBundler);
     }
     let bundlingResult = await bundler_context_1.BundlerContext.bundleAll(bundlerContexts, rebuildState?.fileChanges.all);
     if (options.optimizationOptions.scripts && environment_options_1.shouldOptimizeChunks) {
         bundlingResult = await (0, profiling_1.profileAsync)('OPTIMIZE_CHUNKS', () => (0, chunk_optimizer_1.optimizeChunks)(bundlingResult, options.sourcemapOptions.scripts ? !options.sourcemapOptions.hidden || 'hidden' : false));
     }
-    const executionResult = new bundler_execution_result_1.ExecutionResult(bundlerContexts, codeBundleCache);
+    const executionResult = new bundler_execution_result_1.ExecutionResult(bundlerContexts, componentStyleBundler, codeBundleCache);
     executionResult.addWarnings(bundlingResult.warnings);
     // Return if the bundling has errors
     if (bundlingResult.errors) {
@@ -115,6 +123,10 @@ async function executeBuild(options, context, rebuildState) {
     if (serverEntryPoint) {
         executionResult.addOutputFile(manifest_1.SERVER_APP_ENGINE_MANIFEST_FILENAME, (0, manifest_1.generateAngularServerAppEngineManifest)(i18nOptions, baseHref, undefined), bundler_context_1.BuildOutputFileType.ServerRoot);
     }
+    // Override auto-CSP settings if we are serving through Vite middleware.
+    if (context.builder.builderName === 'dev-server' && options.security) {
+        options.security.autoCsp = false;
+    }
     // Perform i18n translation inlining if enabled
     if (i18nOptions.shouldInline) {
         const result = await (0, i18n_1.inlineI18n)(options, executionResult, initialFiles);

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

@@ -183,6 +183,7 @@ export declare function normalizeOptions(context: BuilderContext, projectName: s
     partialSSRBuild: boolean;
     externalRuntimeStyles: boolean | undefined;
     instrumentForCoverage: ((filename: string) => boolean) | undefined;
+    security: import("./schema").Security | undefined;
 }>;
 export declare function getLocaleBaseHref(baseHref: string | undefined, i18n: NormalizedApplicationBuildOptions['i18nOptions'], locale: string): string | undefined;
 export {};

package/src/builders/application/options.js

@@ -238,7 +238,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         }
     }
     // Initial options to keep
-    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, outputMode, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, namedChunks, budgets, deployUrl, clearScreen, define, partialSSRBuild = false, externalRuntimeStyles, instrumentForCoverage, } = options;
+    const { allowedCommonJsDependencies, aot, baseHref, crossOrigin, externalDependencies, extractLicenses, inlineStyleLanguage = 'css', outExtension, serviceWorker, poll, polyfills, statsJson, outputMode, stylePreprocessorOptions, subresourceIntegrity, verbose, watch, progress = true, externalPackages, namedChunks, budgets, deployUrl, clearScreen, define, partialSSRBuild = false, externalRuntimeStyles, instrumentForCoverage, security, } = options;
     // Return all the normalized options
     return {
         advancedOptimizations: !!aot && optimizationOptions.scripts,
@@ -297,6 +297,7 @@ async function normalizeOptions(context, projectName, options, extensions) {
         partialSSRBuild: environment_options_1.usePartialSsrBuild || partialSSRBuild,
         externalRuntimeStyles,
         instrumentForCoverage,
+        security,
     };
 }
 async function getTailwindConfig(searchDirectories, workspaceRoot, context) {

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

@@ -153,6 +153,10 @@ export interface Schema {
      * Global scripts to be included in the build.
      */
     scripts?: ScriptElement[];
+    /**
+     * Security features to protect against XSS and other common attacks
+     */
+    security?: Security;
     /**
      * The full path for the server entry point to the application, relative to the current
      * workspace.
@@ -464,6 +468,31 @@ export interface ScriptClass {
      */
     input: string;
 }
+/**
+ * Security features to protect against XSS and other common attacks
+ */
+export interface Security {
+    /**
+     * Enables automatic generation of a hash-based Strict Content Security Policy
+     * (https://web.dev/articles/strict-csp#choose-hash) based on scripts in index.html. Will
+     * default to true once we are out of experimental/preview phases.
+     */
+    autoCsp?: AutoCspUnion;
+}
+/**
+ * Enables automatic generation of a hash-based Strict Content Security Policy
+ * (https://web.dev/articles/strict-csp#choose-hash) based on scripts in index.html. Will
+ * default to true once we are out of experimental/preview phases.
+ */
+export type AutoCspUnion = boolean | AutoCspClass;
+export interface AutoCspClass {
+    /**
+     * Include the `unsafe-eval` directive (https://web.dev/articles/strict-csp#remove-eval) in
+     * the auto-CSP. Please only enable this if you are absolutely sure that you need to, as
+     * allowing calls to eval will weaken the XSS defenses provided by the auto-CSP.
+     */
+    unsafeEval?: boolean;
+}
 /**
  * Generates a service worker configuration.
  */

package/src/builders/application/schema.json

@@ -37,6 +37,33 @@
       "type": "string",
       "description": "Customize the base path for the URLs of resources in 'index.html' and component stylesheets. This option is only necessary for specific deployment scenarios, such as with Angular Elements or when utilizing different CDN locations."
     },
+    "security": {
+      "description": "Security features to protect against XSS and other common attacks",
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "autoCsp": {
+          "description": "Enables automatic generation of a hash-based Strict Content Security Policy (https://web.dev/articles/strict-csp#choose-hash) based on scripts in index.html. Will default to true once we are out of experimental/preview phases.",
+          "default": false,
+          "oneOf": [
+            {
+              "type": "object",
+              "properties": {
+                "unsafeEval": {
+                  "type": "boolean",
+                  "description": "Include the `unsafe-eval` directive (https://web.dev/articles/strict-csp#remove-eval) in the auto-CSP. Please only enable this if you are absolutely sure that you need to, as allowing calls to eval will weaken the XSS defenses provided by the auto-CSP.",
+                  "default": false
+                }
+              },
+              "additionalProperties": false
+            },
+            {
+              "type": "boolean"
+            }
+          ]
+        }
+      }
+    },
     "scripts": {
       "description": "Global scripts to be included in the build.",
       "type": "array",

package/src/builders/application/setup-bundling.d.ts

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
+import { ComponentStylesheetBundler } from '../../tools/esbuild/angular/component-stylesheets';
 import { SourceFileCache } from '../../tools/esbuild/angular/source-file-cache';
 import { BundlerContext } from '../../tools/esbuild/bundler-context';
 import { NormalizedApplicationBuildOptions } from './options';
@@ -16,4 +17,5 @@ import { NormalizedApplicationBuildOptions } from './options';
  * @param codeBundleCache An instance of the TypeScript source file cache.
  * @returns An array of BundlerContext objects.
  */
-export declare function setupBundlerContexts(options: NormalizedApplicationBuildOptions, browsers: string[], codeBundleCache: SourceFileCache): BundlerContext[];
+export declare function setupBundlerContexts(options: NormalizedApplicationBuildOptions, target: string[], codeBundleCache: SourceFileCache, stylesheetBundler: ComponentStylesheetBundler): BundlerContext[];
+export declare function createComponentStyleBundler(options: NormalizedApplicationBuildOptions, target: string[]): ComponentStylesheetBundler;

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/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-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,7 +33,7 @@ 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,
@@ -72,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, styleOptions.inlineStyleLanguage, pluginOptions.incremental);
             let sharedTSCompilationState;
             // To fully invalidate files, track resource referenced files and their referencing source
             const referencedFileTracker = new file_reference_tracker_1.FileReferenceTracker();
@@ -398,7 +395,6 @@ function createCompilerPlugin(pluginOptions, styleOptions) {
             });
             build.onDispose(() => {
                 sharedTSCompilationState?.dispose();
-                void stylesheetBundler.dispose();
                 void compilation.close?.();
                 void cacheStore?.close();
             });

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

@@ -7,10 +7,11 @@
  */
 import type { BuildOptions } from 'esbuild';
 import type { NormalizedApplicationBuildOptions } from '../../builders/application/options';
+import { ComponentStylesheetBundler } from './angular/component-stylesheets';
 import { SourceFileCache } from './angular/source-file-cache';
 import { BundlerOptionsFactory } from './bundler-context';
-export declare function createBrowserCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): BuildOptions;
-export declare function createBrowserPolyfillBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): BuildOptions | BundlerOptionsFactory | undefined;
+export declare function createBrowserCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache, stylesheetBundler: ComponentStylesheetBundler): BuildOptions;
+export declare function createBrowserPolyfillBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache, stylesheetBundler: ComponentStylesheetBundler): 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;
+export declare function createServerMainCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache, stylesheetBundler: ComponentStylesheetBundler): BuildOptions;
+export declare function createSsrEntryCodeBundleOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache: SourceFileCache, stylesheetBundler: ComponentStylesheetBundler): BuildOptions;

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

@@ -32,9 +32,9 @@ const sourcemap_ignorelist_plugin_1 = require("./sourcemap-ignorelist-plugin");
 const utils_1 = require("./utils");
 const virtual_module_plugin_1 = require("./virtual-module-plugin");
 const wasm_plugin_1 = require("./wasm-plugin");
-function createBrowserCodeBundleOptions(options, target, sourceFileCache) {
+function createBrowserCodeBundleOptions(options, target, sourceFileCache, stylesheetBundler) {
     const { entryPoints, outputNames, polyfills } = options;
-    const { pluginOptions, styleOptions } = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, target, sourceFileCache);
+    const pluginOptions = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, sourceFileCache);
     const zoneless = (0, utils_1.isZonelessApp)(polyfills);
     const buildOptions = {
         ...getEsBuildCommonOptions(options),
@@ -55,8 +55,8 @@ function createBrowserCodeBundleOptions(options, target, sourceFileCache) {
             (0, compiler_plugin_1.createCompilerPlugin)(
             // JS/TS options
             pluginOptions, 
-            // Component stylesheet options
-            styleOptions),
+            // Component stylesheet bundler
+            stylesheetBundler),
         ],
     };
     if (options.plugins) {
@@ -77,7 +77,7 @@ function createBrowserCodeBundleOptions(options, target, sourceFileCache) {
     }
     return buildOptions;
 }
-function createBrowserPolyfillBundleOptions(options, target, sourceFileCache) {
+function createBrowserPolyfillBundleOptions(options, target, sourceFileCache, stylesheetBundler) {
     const namespace = 'angular:polyfills';
     const polyfillBundleOptions = getEsBuildCommonPolyfillsOptions(options, namespace, true, sourceFileCache);
     if (!polyfillBundleOptions) {
@@ -102,12 +102,12 @@ function createBrowserPolyfillBundleOptions(options, target, sourceFileCache) {
     // Only add the Angular TypeScript compiler if TypeScript files are provided in the polyfills
     if (hasTypeScriptEntries) {
         buildOptions.plugins ??= [];
-        const { pluginOptions, styleOptions } = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, target, sourceFileCache);
+        const pluginOptions = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, sourceFileCache);
         buildOptions.plugins.push((0, compiler_plugin_1.createCompilerPlugin)(
         // JS/TS options
         { ...pluginOptions, noopTypeScriptCompilation: true }, 
         // Component stylesheet options are unused for polyfills but required by the plugin
-        styleOptions));
+        stylesheetBundler));
     }
     // Use an options factory to allow fully incremental bundling when no TypeScript files are present.
     // The TypeScript compilation is not currently integrated into the bundler invalidation so
@@ -163,10 +163,10 @@ function createServerPolyfillBundleOptions(options, target, sourceFileCache) {
     buildOptions.plugins.push((0, server_bundle_metadata_plugin_1.createServerBundleMetadata)());
     return () => buildOptions;
 }
-function createServerMainCodeBundleOptions(options, target, sourceFileCache) {
+function createServerMainCodeBundleOptions(options, target, sourceFileCache, stylesheetBundler) {
     const { serverEntryPoint: mainServerEntryPoint, workspaceRoot, outputMode, externalPackages, ssrOptions, polyfills, } = options;
     (0, node_assert_1.default)(mainServerEntryPoint, 'createServerCodeBundleOptions should not be called without a defined serverEntryPoint.');
-    const { pluginOptions, styleOptions } = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, target, sourceFileCache);
+    const pluginOptions = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, sourceFileCache);
     const mainServerNamespace = 'angular:main-server';
     const mainServerInjectPolyfillsNamespace = 'angular:main-server-inject-polyfills';
     const mainServerInjectManifestNamespace = 'angular:main-server-inject-manifest';
@@ -193,8 +193,8 @@ function createServerMainCodeBundleOptions(options, target, sourceFileCache) {
             (0, compiler_plugin_1.createCompilerPlugin)(
             // JS/TS options
             { ...pluginOptions, noopTypeScriptCompilation: true }, 
-            // Component stylesheet options
-            styleOptions),
+            // Component stylesheet bundler
+            stylesheetBundler),
         ],
     };
     buildOptions.plugins ??= [];
@@ -265,11 +265,11 @@ function createServerMainCodeBundleOptions(options, target, sourceFileCache) {
     }
     return buildOptions;
 }
-function createSsrEntryCodeBundleOptions(options, target, sourceFileCache) {
+function createSsrEntryCodeBundleOptions(options, target, sourceFileCache, stylesheetBundler) {
     const { workspaceRoot, ssrOptions, externalPackages } = options;
     const serverEntryPoint = ssrOptions?.entry;
     (0, node_assert_1.default)(serverEntryPoint, 'createSsrEntryCodeBundleOptions should not be called without a defined serverEntryPoint.');
-    const { pluginOptions, styleOptions } = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, target, sourceFileCache);
+    const pluginOptions = (0, compiler_plugin_options_1.createCompilerPluginOptions)(options, sourceFileCache);
     const ssrEntryNamespace = 'angular:ssr-entry';
     const ssrInjectManifestNamespace = 'angular:ssr-entry-inject-manifest';
     const ssrInjectRequireNamespace = 'angular:ssr-entry-inject-require';
@@ -291,8 +291,8 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache) {
             (0, compiler_plugin_1.createCompilerPlugin)(
             // JS/TS options
             { ...pluginOptions, noopTypeScriptCompilation: true }, 
-            // Component stylesheet options
-            styleOptions),
+            // Component stylesheet bundler
+            stylesheetBundler),
         ],
         inject,
     };

package/src/tools/esbuild/bundler-execution-result.d.ts

@@ -7,6 +7,7 @@
  */
 import type { Message, PartialMessage } from 'esbuild';
 import type { ChangedFiles } from '../../tools/esbuild/watcher';
+import type { ComponentStylesheetBundler } from './angular/component-stylesheets';
 import type { SourceFileCache } from './angular/source-file-cache';
 import type { BuildOutputFile, BuildOutputFileType, BundlerContext } from './bundler-context';
 export interface BuildOutputAsset {
@@ -15,6 +16,7 @@ export interface BuildOutputAsset {
 }
 export interface RebuildState {
     rebuildContexts: BundlerContext[];
+    componentStyleBundler: ComponentStylesheetBundler;
     codeBundleCache?: SourceFileCache;
     fileChanges: ChangedFiles;
     previousOutputHashes: Map<string, string>;
@@ -32,6 +34,7 @@ export type PrerenderedRoutesRecord = Record<string, {
  */
 export declare class ExecutionResult {
     private rebuildContexts;
+    private componentStyleBundler;
     private codeBundleCache?;
     outputFiles: BuildOutputFile[];
     assetFiles: BuildOutputAsset[];
@@ -43,7 +46,7 @@ export declare class ExecutionResult {
     extraWatchFiles: string[];
     htmlIndexPath?: string;
     htmlBaseHref?: string;
-    constructor(rebuildContexts: BundlerContext[], codeBundleCache?: SourceFileCache | undefined);
+    constructor(rebuildContexts: BundlerContext[], componentStyleBundler: ComponentStylesheetBundler, codeBundleCache?: SourceFileCache | undefined);
     addOutputFile(path: string, content: string | Uint8Array, type: BuildOutputFileType): void;
     addAssets(assets: BuildOutputAsset[]): void;
     addLog(value: string): void;
@@ -67,7 +70,7 @@ export declare class ExecutionResult {
         success: boolean;
         outputFiles: BuildOutputFile[];
         assetFiles: BuildOutputAsset[];
-        errors: (Message | PartialMessage)[];
+        errors: (PartialMessage | Message)[];
         externalMetadata: ExternalResultMetadata | undefined;
     };
     get watchFiles(): string[];

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

@@ -15,6 +15,7 @@ const utils_1 = require("./utils");
  */
 class ExecutionResult {
     rebuildContexts;
+    componentStyleBundler;
     codeBundleCache;
     outputFiles = [];
     assetFiles = [];
@@ -26,8 +27,9 @@ class ExecutionResult {
     extraWatchFiles = [];
     htmlIndexPath;
     htmlBaseHref;
-    constructor(rebuildContexts, codeBundleCache) {
+    constructor(rebuildContexts, componentStyleBundler, codeBundleCache) {
         this.rebuildContexts = rebuildContexts;
+        this.componentStyleBundler = componentStyleBundler;
         this.codeBundleCache = codeBundleCache;
     }
     addOutputFile(path, content, type) {
@@ -117,6 +119,7 @@ class ExecutionResult {
         return {
             rebuildContexts: this.rebuildContexts,
             codeBundleCache: this.codeBundleCache,
+            componentStyleBundler: this.componentStyleBundler,
             fileChanges,
             previousOutputHashes: new Map(this.outputFiles.map((file) => [file.path, file.hash])),
         };
@@ -133,6 +136,7 @@ class ExecutionResult {
     }
     async dispose() {
         await Promise.allSettled(this.rebuildContexts.map((context) => context.dispose()));
+        await this.componentStyleBundler.dispose();
     }
 }
 exports.ExecutionResult = ExecutionResult;

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

@@ -9,8 +9,5 @@ import { NormalizedApplicationBuildOptions } from '../../builders/application/op
 import type { createCompilerPlugin } from './angular/compiler-plugin';
 import type { SourceFileCache } from './angular/source-file-cache';
 type CreateCompilerPluginParameters = Parameters<typeof createCompilerPlugin>;
-export declare function createCompilerPluginOptions(options: NormalizedApplicationBuildOptions, target: string[], sourceFileCache?: SourceFileCache): {
-    pluginOptions: CreateCompilerPluginParameters[0];
-    styleOptions: CreateCompilerPluginParameters[1];
-};
+export declare function createCompilerPluginOptions(options: NormalizedApplicationBuildOptions, sourceFileCache?: SourceFileCache): CreateCompilerPluginParameters[0];
 export {};

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

@@ -8,46 +8,20 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createCompilerPluginOptions = createCompilerPluginOptions;
-function createCompilerPluginOptions(options, target, sourceFileCache) {
-    const { workspaceRoot, optimizationOptions, sourcemapOptions, tsconfig, outputNames, fileReplacements, externalDependencies, preserveSymlinks, stylePreprocessorOptions, advancedOptimizations, inlineStyleLanguage, jit, cacheOptions, tailwindConfiguration, postcssConfiguration, publicPath, externalRuntimeStyles, instrumentForCoverage, } = options;
+function createCompilerPluginOptions(options, sourceFileCache) {
+    const { sourcemapOptions, tsconfig, fileReplacements, advancedOptimizations, jit, externalRuntimeStyles, instrumentForCoverage, } = options;
+    const incremental = !!options.watch;
     return {
-        // JS/TS options
-        pluginOptions: {
-            sourcemap: !!sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
-            thirdPartySourcemaps: sourcemapOptions.vendor,
-            tsconfig,
-            jit,
-            advancedOptimizations,
-            fileReplacements,
-            sourceFileCache,
-            loadResultCache: sourceFileCache?.loadResultCache,
-            incremental: !!options.watch,
-            externalRuntimeStyles,
-            instrumentForCoverage,
-        },
-        // Component stylesheet options
-        styleOptions: {
-            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,
-            inlineStyleLanguage,
-            preserveSymlinks,
-            tailwindConfiguration,
-            postcssConfiguration,
-            cacheOptions,
-            publicPath,
-        },
+        sourcemap: !!sourcemapOptions.scripts && (sourcemapOptions.hidden ? 'external' : true),
+        thirdPartySourcemaps: sourcemapOptions.vendor,
+        tsconfig,
+        jit,
+        advancedOptimizations,
+        fileReplacements,
+        sourceFileCache,
+        loadResultCache: sourceFileCache?.loadResultCache,
+        incremental,
+        externalRuntimeStyles,
+        instrumentForCoverage,
     };
 }

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

@@ -59,6 +59,13 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         }
         throw new Error(`Output file does not exist: ${relativefilePath}`);
     };
+    // Read the Auto CSP options.
+    const autoCsp = buildOptions.security?.autoCsp;
+    const autoCspOptions = autoCsp === true
+        ? { unsafeEval: false }
+        : autoCsp
+            ? { unsafeEval: !!autoCsp.unsafeEval }
+            : undefined;
     // Create an index HTML generator that reads from the in-memory output files
     const indexHtmlGenerator = new index_html_generator_1.IndexHtmlGenerator({
         indexPath: indexHtmlOptions.input,
@@ -71,6 +78,7 @@ async function generateIndexHtml(initialFiles, outputFiles, buildOptions, lang)
         generateDedicatedSSRContent: !!(buildOptions.ssrOptions ||
             buildOptions.prerenderOptions ||
             buildOptions.appShellOptions),
+        autoCsp: autoCspOptions,
     });
     indexHtmlGenerator.readAsset = readAsset;
     return indexHtmlGenerator.process({

package/src/tools/esbuild/javascript-transformer.js

@@ -41,6 +41,8 @@ class JavaScriptTransformer {
         this.#workerPool ??= new worker_pool_1.WorkerPool({
             filename: require.resolve('./javascript-transformer-worker'),
             maxThreads: this.maxThreads,
+            // Prevent passing `--import` (loader-hooks) from parent to child worker.
+            execArgv: [],
         });
         return this.#workerPool;
     }

package/src/tools/esbuild/utils.js

@@ -155,7 +155,7 @@ async function withNoProgress(text, action) {
  * @returns An object that can be used with the esbuild build `supported` option.
  */
 function getFeatureSupport(target, nativeAsyncAwait) {
-    const supported = {
+    return {
         // Native async/await is not supported with Zone.js. Disabling support here will cause
         // esbuild to downlevel async/await, async generators, and for await...of to a Zone.js supported form.
         'async-await': nativeAsyncAwait,
@@ -165,35 +165,6 @@ function getFeatureSupport(target, nativeAsyncAwait) {
         // For more details: https://bugs.chromium.org/p/v8/issues/detail?id=11536
         'object-rest-spread': false,
     };
-    // Detect Safari browser versions that have a class field behavior bug
-    // See: https://github.com/angular/angular-cli/issues/24355#issuecomment-1333477033
-    // See: https://github.com/WebKit/WebKit/commit/e8788a34b3d5f5b4edd7ff6450b80936bff396f2
-    let safariClassFieldScopeBug = false;
-    for (const browser of target) {
-        let majorVersion;
-        if (browser.startsWith('ios')) {
-            majorVersion = Number(browser.slice(3, 5));
-        }
-        else if (browser.startsWith('safari')) {
-            majorVersion = Number(browser.slice(6, 8));
-        }
-        else {
-            continue;
-        }
-        // Technically, 14.0 is not broken but rather does not have support. However, the behavior
-        // is identical since it would be set to false by esbuild if present as a target.
-        if (majorVersion === 14 || majorVersion === 15) {
-            safariClassFieldScopeBug = true;
-            break;
-        }
-    }
-    // If class field support cannot be used set to false; otherwise leave undefined to allow
-    // esbuild to use `target` to determine support.
-    if (safariClassFieldScopeBug) {
-        supported['class-field'] = false;
-        supported['class-static-field'] = false;
-    }
-    return supported;
 }
 const MAX_CONCURRENT_WRITES = 64;
 async function emitFilesToDisk(files, writeFileCallback) {

package/src/tools/vite/middlewares/assets-middleware.js

@@ -75,7 +75,7 @@ function createAngularAssetsMiddleware(server, assets, outputFiles, usedComponen
                         // Shim the stylesheet if a component ID is provided
                         if (componentId.length > 0) {
                             // Validate component ID
-                            if (/^[_.\-\p{Letter}\d]+-c\d{9}$/u.test(componentId)) {
+                            if (/^[_.\-\p{Letter}\d]+-c\d+$/u.test(componentId)) {
                                 (0, load_esm_1.loadEsmModule)('@angular/compiler')
                                     .then((compilerModule) => {
                                     const encapsulatedData = compilerModule.encapsulateStyle(new TextDecoder().decode(data), componentId);

package/src/utils/index-file/auto-csp.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/**
+ * Calculates a CSP compatible hash of an inline script.
+ * @param scriptText Text between opening and closing script tag. Has to
+ *     include whitespaces and newlines!
+ * @returns The hash of the text formatted appropriately for CSP.
+ */
+export declare function hashTextContent(scriptText: string): string;
+/**
+ * Finds all `<script>` tags and creates a dynamic script loading block for consecutive `<script>` with `src` attributes.
+ * Hashes all scripts, both inline and generated dynamic script loading blocks.
+ * Inserts a `<meta>` tag at the end of the `<head>` of the document with the generated hash-based CSP.
+ *
+ * @param html Markup that should be processed.
+ * @returns The transformed HTML that contains the `<meta>` tag CSP and dynamic loader scripts.
+ */
+export declare function autoCsp(html: string, unsafeEval?: boolean): Promise<string>;

package/src/utils/index-file/auto-csp.js

@@ -0,0 +1,283 @@
+"use strict";
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hashTextContent = hashTextContent;
+exports.autoCsp = autoCsp;
+const crypto = __importStar(require("node:crypto"));
+const html_rewriting_stream_1 = require("./html-rewriting-stream");
+/**
+ * The hash function to use for hash directives to use in the CSP.
+ */
+const HASH_FUNCTION = 'sha256';
+/**
+ * Get the specified attribute or return undefined if the tag doesn't have that attribute.
+ *
+ * @param tag StartTag of the <script>
+ * @returns
+ */
+function getScriptAttributeValue(tag, attrName) {
+    return tag.attrs.find((attr) => attr.name === attrName)?.value;
+}
+/**
+ * Checks whether a particular string is a MIME type associated with JavaScript, according to
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/MIME_types#textjavascript
+ *
+ * @param mimeType a string that may be a MIME type
+ * @returns whether the string is a MIME type that is associated with JavaScript
+ */
+function isJavascriptMimeType(mimeType) {
+    return mimeType.split(';')[0] === 'text/javascript';
+}
+/**
+ * Which of the type attributes on the script tag we should try passing along
+ * based on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type
+ * @param scriptType the `type` attribute on the `<script>` tag under question
+ * @returns whether to add the script tag to the dynamically loaded script tag
+ */
+function shouldDynamicallyLoadScriptTagBasedOnType(scriptType) {
+    return (scriptType === undefined ||
+        scriptType === '' ||
+        scriptType === 'module' ||
+        isJavascriptMimeType(scriptType));
+}
+/**
+ * Calculates a CSP compatible hash of an inline script.
+ * @param scriptText Text between opening and closing script tag. Has to
+ *     include whitespaces and newlines!
+ * @returns The hash of the text formatted appropriately for CSP.
+ */
+function hashTextContent(scriptText) {
+    const hash = crypto.createHash(HASH_FUNCTION).update(scriptText, 'utf-8').digest('base64');
+    return `'${HASH_FUNCTION}-${hash}'`;
+}
+/**
+ * Finds all `<script>` tags and creates a dynamic script loading block for consecutive `<script>` with `src` attributes.
+ * Hashes all scripts, both inline and generated dynamic script loading blocks.
+ * Inserts a `<meta>` tag at the end of the `<head>` of the document with the generated hash-based CSP.
+ *
+ * @param html Markup that should be processed.
+ * @returns The transformed HTML that contains the `<meta>` tag CSP and dynamic loader scripts.
+ */
+async function autoCsp(html, unsafeEval = false) {
+    const { rewriter, transformedContent } = await (0, html_rewriting_stream_1.htmlRewritingStream)(html);
+    let openedScriptTag = undefined;
+    let scriptContent = [];
+    const hashes = [];
+    /**
+     * Generates the dynamic loading script and puts it in the rewriter and adds the hash of the dynamic
+     * loader script to the collection of hashes to add to the <meta> tag CSP.
+     */
+    function emitLoaderScript() {
+        const loaderScript = createLoaderScript(scriptContent);
+        hashes.push(hashTextContent(loaderScript));
+        rewriter.emitRaw(`<script>${loaderScript}</script>`);
+        scriptContent = [];
+    }
+    rewriter.on('startTag', (tag, html) => {
+        if (tag.tagName === 'script') {
+            openedScriptTag = tag;
+            const src = getScriptAttributeValue(tag, 'src');
+            if (src) {
+                // If there are any interesting attributes, note them down.
+                const scriptType = getScriptAttributeValue(tag, 'type');
+                if (shouldDynamicallyLoadScriptTagBasedOnType(scriptType)) {
+                    scriptContent.push({
+                        src: src,
+                        type: scriptType,
+                        async: getScriptAttributeValue(tag, 'async') !== undefined,
+                        defer: getScriptAttributeValue(tag, 'defer') !== undefined,
+                    });
+                    return; // Skip writing my script tag until we've read it all.
+                }
+            }
+        }
+        // We are encountering the first start tag that's not <script src="..."> after a string of
+        // consecutive <script src="...">. <script> tags without a src attribute will also end a chain
+        // of src attributes that can be loaded in a single loader script, so those will end up here.
+        //
+        // The first place when we can determine this to be the case is
+        // during the first opening tag that's not <script src="...">, where we need to insert the
+        // dynamic loader script before continuing on with writing the rest of the tags.
+        // (One edge case is where there are no more opening tags after the last <script src="..."> is
+        // closed, but this case is handled below with the final </body> tag.)
+        if (scriptContent.length > 0) {
+            emitLoaderScript();
+        }
+        rewriter.emitStartTag(tag);
+    });
+    rewriter.on('text', (tag, html) => {
+        if (openedScriptTag && !getScriptAttributeValue(openedScriptTag, 'src')) {
+            hashes.push(hashTextContent(html));
+        }
+        rewriter.emitText(tag);
+    });
+    rewriter.on('endTag', (tag, html) => {
+        if (openedScriptTag && tag.tagName === 'script') {
+            const src = getScriptAttributeValue(openedScriptTag, 'src');
+            const scriptType = getScriptAttributeValue(openedScriptTag, 'type');
+            openedScriptTag = undefined;
+            // Return early to avoid writing the closing </script> tag if it's a part of the
+            // dynamic loader script.
+            if (src && shouldDynamicallyLoadScriptTagBasedOnType(scriptType)) {
+                return;
+            }
+        }
+        if (tag.tagName === 'body' || tag.tagName === 'html') {
+            // Write the loader script if a string of <script>s were the last opening tag of the document.
+            if (scriptContent.length > 0) {
+                emitLoaderScript();
+            }
+        }
+        rewriter.emitEndTag(tag);
+    });
+    const rewritten = await transformedContent();
+    // Second pass to add the header
+    const secondPass = await (0, html_rewriting_stream_1.htmlRewritingStream)(rewritten);
+    secondPass.rewriter.on('startTag', (tag, _) => {
+        secondPass.rewriter.emitStartTag(tag);
+        if (tag.tagName === 'head') {
+            // See what hashes we came up with!
+            secondPass.rewriter.emitRaw(`<meta http-equiv="Content-Security-Policy" content="${getStrictCsp(hashes, {
+                enableBrowserFallbacks: true,
+                enableTrustedTypes: false,
+                enableUnsafeEval: unsafeEval,
+            })}">`);
+        }
+    });
+    return secondPass.transformedContent();
+}
+/**
+ * Returns a strict Content Security Policy for mitigating XSS.
+ * For more details read csp.withgoogle.com.
+ * If you modify this CSP, make sure it has not become trivially bypassable by
+ * checking the policy using csp-evaluator.withgoogle.com.
+ *
+ * @param hashes A list of sha-256 hashes of trusted inline scripts.
+ * @param enableTrustedTypes If Trusted Types should be enabled for scripts.
+ * @param enableBrowserFallbacks If fallbacks for older browsers should be
+ *   added. This is will not weaken the policy as modern browsers will ignore
+ *   the fallbacks.
+ * @param enableUnsafeEval If you cannot remove all uses of eval(), you can
+ *   still set a strict CSP, but you will have to use the 'unsafe-eval'
+ *   keyword which will make your policy slightly less secure.
+ */
+function getStrictCsp(hashes, 
+// default CSP options
+cspOptions = {
+    enableBrowserFallbacks: true,
+    enableTrustedTypes: false,
+    enableUnsafeEval: false,
+}) {
+    hashes = hashes || [];
+    const strictCspTemplate = {
+        // 'strict-dynamic' allows hashed scripts to create new scripts.
+        'script-src': [`'strict-dynamic'`, ...hashes],
+        // Restricts `object-src` to disable dangerous plugins like Flash.
+        'object-src': [`'none'`],
+        // Restricts `base-uri` to block the injection of `<base>` tags. This
+        // prevents attackers from changing the locations of scripts loaded from
+        // relative URLs.
+        'base-uri': [`'self'`],
+    };
+    // Adds fallbacks for browsers not compatible to CSP3 and CSP2.
+    // These fallbacks are ignored by modern browsers in presence of hashes,
+    // and 'strict-dynamic'.
+    if (cspOptions.enableBrowserFallbacks) {
+        // Fallback for Safari. All modern browsers supporting strict-dynamic will
+        // ignore the 'https:' fallback.
+        strictCspTemplate['script-src'].push('https:');
+        // 'unsafe-inline' is only ignored in presence of a hash or nonce.
+        if (hashes.length > 0) {
+            strictCspTemplate['script-src'].push(`'unsafe-inline'`);
+        }
+    }
+    // If enabled, dangerous DOM sinks will only accept typed objects instead of
+    // strings.
+    if (cspOptions.enableTrustedTypes) {
+        strictCspTemplate['require-trusted-types-for'] = ['script'];
+    }
+    // If enabled, `eval()`-calls will be allowed, making the policy slightly
+    // less secure.
+    if (cspOptions.enableUnsafeEval) {
+        strictCspTemplate['script-src'].push(`'unsafe-eval'`);
+    }
+    return Object.entries(strictCspTemplate)
+        .map(([directive, values]) => {
+        return `${directive} ${values.join(' ')};`;
+    })
+        .join('');
+}
+/**
+ * Returns JS code for dynamically loading sourced (external) scripts.
+ * @param srcList A list of paths for scripts that should be loaded.
+ */
+function createLoaderScript(srcList, enableTrustedTypes = false) {
+    if (!srcList.length) {
+        throw new Error('Cannot create a loader script with no scripts to load.');
+    }
+    const srcListFormatted = srcList
+        .map((s) => {
+        // URI encoding means value can't escape string, JS, or HTML context.
+        const srcAttr = encodeURI(s.src).replaceAll("'", "\\'");
+        // Can only be 'module' or a JS MIME type or an empty string.
+        const typeAttr = s.type ? "'" + s.type + "'" : undefined;
+        const asyncAttr = s.async ? 'true' : 'false';
+        const deferAttr = s.defer ? 'true' : 'false';
+        return `['${srcAttr}', ${typeAttr}, ${asyncAttr}, ${deferAttr}]`;
+    })
+        .join();
+    return enableTrustedTypes
+        ? `
+  var scripts = [${srcListFormatted}];
+  var policy = self.trustedTypes && self.trustedTypes.createPolicy ?
+    self.trustedTypes.createPolicy('angular#auto-csp', {createScriptURL: function(u) {
+      return scripts.includes(u) ? u : null;
+    }}) : { createScriptURL: function(u) { return u; } };
+  scripts.forEach(function(scriptUrl) {
+    var s = document.createElement('script');
+    s.src = policy.createScriptURL(scriptUrl[0]);
+    s.type = scriptUrl[1];
+    s.async = !!scriptUrl[2];
+    s.defer = !!scriptUrl[3];
+    document.body.appendChild(s);
+  });\n`
+        : `
+  var scripts = [${srcListFormatted}];
+  scripts.forEach(function(scriptUrl) {
+    var s = document.createElement('script');
+    s.src = scriptUrl[0];
+    s.type = scriptUrl[1];
+    s.async = !!scriptUrl[2];
+    s.defer = !!scriptUrl[3];
+    document.body.appendChild(s);
+  });\n`;
+}

package/src/utils/index-file/html-rewriting-stream.d.ts

@@ -5,7 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
+import type { RewritingStream } from 'parse5-html-rewriting-stream';
+export type StartTag = Parameters<RewritingStream['emitStartTag']>[0];
+export type EndTag = Parameters<RewritingStream['emitEndTag']>[0];
+export type { RewritingStream };
 export declare function htmlRewritingStream(content: string): Promise<{
-    rewriter: import('parse5-html-rewriting-stream').RewritingStream;
+    rewriter: RewritingStream;
     transformedContent: () => Promise<string>;
 }>;

package/src/utils/index-file/index-html-generator.d.ts

@@ -20,6 +20,9 @@ export interface IndexHtmlGeneratorProcessOptions {
         as?: string;
     }[];
 }
+export interface AutoCspOptions {
+    unsafeEval: boolean;
+}
 export interface IndexHtmlGeneratorOptions {
     indexPath: string;
     deployUrl?: string;
@@ -31,6 +34,7 @@ export interface IndexHtmlGeneratorOptions {
     cache?: NormalizedCachedOptions;
     imageDomains?: string[];
     generateDedicatedSSRContent?: boolean;
+    autoCsp?: AutoCspOptions;
 }
 export type IndexHtmlTransform = (content: string) => Promise<string>;
 export interface IndexHtmlPluginTransformResult {

package/src/utils/index-file/index-html-generator.js

@@ -12,6 +12,7 @@ const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const add_event_dispatch_contract_1 = require("./add-event-dispatch-contract");
 const augment_index_html_1 = require("./augment-index-html");
+const auto_csp_1 = require("./auto-csp");
 const inline_critical_css_1 = require("./inline-critical-css");
 const inline_fonts_1 = require("./inline-fonts");
 const ngcm_attribute_1 = require("./ngcm-attribute");
@@ -39,6 +40,13 @@ class IndexHtmlGenerator {
             this.csrPlugins.push(addNgcmAttributePlugin());
             this.ssrPlugins.push(addEventDispatchContractPlugin(), addNoncePlugin());
         }
+        // Auto-CSP (as the last step)
+        if (options.autoCsp) {
+            if (options.generateDedicatedSSRContent) {
+                throw new Error('Cannot set both SSR and auto-CSP at the same time.');
+            }
+            this.csrPlugins.push(autoCspPlugin(options.autoCsp.unsafeEval));
+        }
     }
     async process(options) {
         let content = await this.readIndex(this.options.indexPath);
@@ -130,6 +138,9 @@ function inlineCriticalCssPlugin(generator) {
 function addNoncePlugin() {
     return (html) => (0, nonce_1.addNonce)(html);
 }
+function autoCspPlugin(unsafeEval) {
+    return (html) => (0, auto_csp_1.autoCsp)(html, unsafeEval);
+}
 function postTransformPlugin({ options }) {
     return async (html) => (options.postTransform ? options.postTransform(html) : html);
 }

package/src/utils/normalize-cache.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizeCacheOptions = normalizeCacheOptions;
 const node_path_1 = require("node:path");
 /** Version placeholder is replaced during the build process with actual package version */
-const VERSION = '19.0.0-next.11';
+const VERSION = '19.0.0-next.13';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/manifest.d.ts

@@ -7,7 +7,7 @@
  */
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import type { BuildOutputFile } from '../../tools/esbuild/bundler-context';
-import { PrerenderedRoutesRecord } from '../../tools/esbuild/bundler-execution-result';
+import type { PrerenderedRoutesRecord } from '../../tools/esbuild/bundler-execution-result';
 export declare const SERVER_APP_MANIFEST_FILENAME = "angular-app-manifest.mjs";
 export declare const SERVER_APP_ENGINE_MANIFEST_FILENAME = "angular-app-engine-manifest.mjs";
 /**