@angular/build 19.0.4 → 19.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.0.4",
+  "version": "19.0.5",
   "description": "Official build system for Angular",
   "keywords": [
     "Angular CLI",
@@ -23,7 +23,7 @@
   "builders": "builders.json",
   "dependencies": {
     "@ampproject/remapping": "2.3.0",
-    "@angular-devkit/architect": "0.1900.4",
+    "@angular-devkit/architect": "0.1900.5",
     "@babel/core": "7.26.0",
     "@babel/helper-annotate-as-pure": "7.25.9",
     "@babel/helper-split-export-declaration": "7.24.7",
@@ -57,7 +57,7 @@
     "@angular/localize": "^19.0.0",
     "@angular/platform-server": "^19.0.0",
     "@angular/service-worker": "^19.0.0",
-    "@angular/ssr": "^19.0.4",
+    "@angular/ssr": "^19.0.5",
     "less": "^4.2.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^2.0.0 || ^3.0.0",

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

@@ -7,9 +7,10 @@
  */
 import type { BuilderContext } from '@angular-devkit/architect';
 import type { Plugin } from 'esbuild';
-import type { Connect, DepOptimizationConfig, InlineConfig } from 'vite';
+import type { Connect, InlineConfig } from 'vite';
 import type { ComponentStyleRecord } from '../../tools/vite/middlewares';
 import { ServerSsrMode } from '../../tools/vite/plugins';
+import { EsbuildLoaderOption } from '../../tools/vite/utils';
 import { Result } from '../application/results';
 import { type ApplicationBuilderInternalOptions, BuildOutputFileType, type ExternalResultMetadata, JavaScriptTransformer } from './internal';
 import type { NormalizedDevServerOptions } from './options';
@@ -34,5 +35,4 @@ export declare function serveWithVite(serverOptions: NormalizedDevServerOptions,
     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, componentStyles: Map<string, ComponentStyleRecord>, 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

@@ -40,7 +40,8 @@ const promises_1 = require("node:fs/promises");
 const node_module_1 = require("node:module");
 const node_path_1 = require("node:path");
 const plugins_1 = require("../../tools/vite/plugins");
-const utils_1 = require("../../utils");
+const utils_1 = require("../../tools/vite/utils");
+const utils_2 = require("../../utils");
 const environment_options_1 = require("../../utils/environment-options");
 const load_esm_1 = require("../../utils/load-esm");
 const results_1 = require("../application/results");
@@ -87,7 +88,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
         // When localization is enabled with a single locale, force a flat path to maintain behavior with the existing Webpack-based dev server.
         browserOptions.forceI18nFlatOutput = true;
     }
-    const { vendor: thirdPartySourcemaps, scripts: scriptsSourcemaps } = (0, utils_1.normalizeSourceMaps)(browserOptions.sourceMap ?? false);
+    const { vendor: thirdPartySourcemaps, scripts: scriptsSourcemaps } = (0, utils_2.normalizeSourceMaps)(browserOptions.sourceMap ?? false);
     if (scriptsSourcemaps && browserOptions.server) {
         // https://nodejs.org/api/process.html#processsetsourcemapsenabledval
         process.setSourceMapsEnabled(true);
@@ -459,7 +460,7 @@ function analyzeResultFiles(normalizePath, htmlIndexPath, resultFiles, generated
     }
 }
 async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks, externalMetadata, ssrMode, prebundleTransformer, target, zoneless, componentStyles, templateUpdates, prebundleLoaderExtensions, extensionMiddleware, indexHtmlTransformer, thirdPartySourcemaps = false) {
-    const proxy = await (0, utils_1.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig);
+    const proxy = await (0, utils_2.loadProxyConfiguration)(serverOptions.workspaceRoot, serverOptions.proxyConfig);
     // dynamically import Vite for ESM compatibility
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
     // Path will not exist on disk and only used to provide separate path for Vite requests
@@ -530,7 +531,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             noExternal: /.*/,
             // Exclude any Node.js built in module and provided dependencies (currently build defined externals)
             external: externalMetadata.explicitServer,
-            optimizeDeps: getDepOptimizationConfig({
+            optimizeDeps: (0, utils_1.getDepOptimizationConfig)({
                 // Only enable with caching since it causes prebundle dependencies to be cached
                 disabled: serverOptions.prebundle === false,
                 // Exclude any explicitly defined dependencies (currently build defined externals and node.js built-ins)
@@ -561,12 +562,13 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
             await (0, plugins_1.createAngularMemoryPlugin)({
                 virtualProjectRoot,
                 outputFiles,
+                templateUpdates,
                 external: externalMetadata.explicitBrowser,
                 skipViteClient: serverOptions.liveReload === false && serverOptions.hmr === false,
             }),
         ],
         // Browser only optimizeDeps. (This does not run for SSR dependencies).
-        optimizeDeps: getDepOptimizationConfig({
+        optimizeDeps: (0, utils_1.getDepOptimizationConfig)({
             // Only enable with caching since it causes prebundle dependencies to be cached
             disabled: serverOptions.prebundle === false,
             // Exclude any explicitly defined dependencies (currently build defined externals)
@@ -599,60 +601,6 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
     }
     return configuration;
 }
-function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless, prebundleTransformer, ssr, loader, thirdPartySourcemaps, }) {
-    const plugins = [
-        {
-            name: 'angular-browser-node-built-in',
-            setup(build) {
-                // This namespace is configured by vite.
-                // @see: https://github.com/vitejs/vite/blob/a1dd396da856401a12c921d0cd2c4e97cb63f1b5/packages/vite/src/node/optimizer/esbuildDepPlugin.ts#L109
-                build.onLoad({ filter: /.*/, namespace: 'browser-external' }, (args) => {
-                    if (!(0, node_module_1.isBuiltin)(args.path)) {
-                        return;
-                    }
-                    return {
-                        errors: [
-                            {
-                                text: `The package "${args.path}" wasn't found on the file system but is built into node.`,
-                            },
-                        ],
-                    };
-                });
-            },
-        },
-        {
-            name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${thirdPartySourcemaps ? '-vendor-sourcemap' : ''}`,
-            setup(build) {
-                build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
-                    return {
-                        contents: await prebundleTransformer.transformFile(args.path),
-                        loader: 'js',
-                    };
-                });
-            },
-        },
-    ];
-    return {
-        // Exclude any explicitly defined dependencies (currently build defined externals)
-        exclude,
-        // NB: to disable the deps optimizer, set optimizeDeps.noDiscovery to true and optimizeDeps.include as undefined.
-        // Include all implict dependencies from the external packages internal option
-        include: disabled ? undefined : include,
-        noDiscovery: disabled,
-        // Add an esbuild plugin to run the Angular linker on dependencies
-        esbuildOptions: {
-            // Set esbuild supported targets.
-            target,
-            supported: (0, internal_1.getFeatureSupport)(target, zoneless),
-            plugins,
-            loader,
-            define: {
-                'ngServerMode': `${ssr}`,
-            },
-            resolveExtensions: ['.mjs', '.js', '.cjs'],
-        },
-    };
-}
 /**
  * Checks if the given value is an absolute URL.
  *

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

@@ -102,6 +102,7 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
                 if (relativePath.startsWith('..')) {
                     relativePath = componentFilename;
                 }
+                relativePath = relativePath.replaceAll('\\', '/');
                 const updateId = encodeURIComponent(`${host.getCanonicalFileName(relativePath)}@${node.name?.text}`);
                 const updateText = angularCompiler.emitHmrUpdateModule(node);
                 if (updateText === null) {

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

@@ -136,6 +136,15 @@ function createServerPolyfillBundleOptions(options, target, loadResultCache) {
     if (!polyfillBundleOptions) {
         return;
     }
+    const jsBanner = [];
+    if (polyfillBundleOptions.external?.length) {
+        jsBanner.push(`globalThis['ngServerMode'] = true;`);
+    }
+    if (isNodePlatform) {
+        // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
+        // See: https://github.com/evanw/esbuild/issues/1921.
+        jsBanner.push(`import { createRequire } from 'node:module';`, `globalThis['require'] ??= createRequire(import.meta.url);`);
+    }
     const buildOptions = {
         ...polyfillBundleOptions,
         platform: isNodePlatform ? 'node' : 'neutral',
@@ -146,16 +155,9 @@ function createServerPolyfillBundleOptions(options, target, loadResultCache) {
         // More details: https://github.com/angular/angular-cli/issues/25405.
         mainFields: ['es2020', 'es2015', 'module', 'main'],
         entryNames: '[name]',
-        banner: isNodePlatform
-            ? {
-                js: [
-                    // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
-                    // See: https://github.com/evanw/esbuild/issues/1921.
-                    `import { createRequire } from 'node:module';`,
-                    `globalThis['require'] ??= createRequire(import.meta.url);`,
-                ].join('\n'),
-            }
-            : undefined,
+        banner: {
+            js: jsBanner.join('\n'),
+        },
         target,
         entryPoints: {
             'polyfills.server': namespace,
@@ -274,19 +276,21 @@ function createSsrEntryCodeBundleOptions(options, target, sourceFileCache, style
         const ssrEntryNamespace = 'angular:ssr-entry';
         const ssrInjectManifestNamespace = 'angular:ssr-entry-inject-manifest';
         const isNodePlatform = options.ssrOptions?.platform !== schema_1.ExperimentalPlatform.Neutral;
+        const jsBanner = [];
+        if (options.externalDependencies?.length) {
+            jsBanner.push(`globalThis['ngServerMode'] = true;`);
+        }
+        if (isNodePlatform) {
+            // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
+            // See: https://github.com/evanw/esbuild/issues/1921.
+            jsBanner.push(`import { createRequire } from 'node:module';`, `globalThis['require'] ??= createRequire(import.meta.url);`);
+        }
         const buildOptions = {
             ...getEsBuildServerCommonOptions(options),
             target,
-            banner: isNodePlatform
-                ? {
-                    js: [
-                        // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
-                        // See: https://github.com/evanw/esbuild/issues/1921.
-                        `import { createRequire } from 'node:module';`,
-                        `globalThis['require'] ??= createRequire(import.meta.url);`,
-                    ].join('\n'),
-                }
-                : undefined,
+            banner: {
+                js: jsBanner.join('\n'),
+            },
             entryPoints: {
                 'server': ssrEntryNamespace,
             },

package/src/tools/vite/plugins/angular-memory-plugin.d.ts

@@ -10,6 +10,7 @@ import { AngularMemoryOutputFiles } from '../utils';
 interface AngularMemoryPluginOptions {
     virtualProjectRoot: string;
     outputFiles: AngularMemoryOutputFiles;
+    templateUpdates?: ReadonlyMap<string, string>;
     external?: string[];
     skipViteClient?: boolean;
 }

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

@@ -15,6 +15,7 @@ const node_assert_1 = __importDefault(require("node:assert"));
 const promises_1 = require("node:fs/promises");
 const node_path_1 = require("node:path");
 const load_esm_1 = require("../../../utils/load-esm");
+const ANGULAR_PREFIX = '/@ng/';
 async function createAngularMemoryPlugin(options) {
     const { virtualProjectRoot, outputFiles, external } = options;
     const { normalizePath } = await (0, load_esm_1.loadEsmModule)('vite');
@@ -22,7 +23,11 @@ async function createAngularMemoryPlugin(options) {
         name: 'vite:angular-memory',
         // Ensures plugin hooks run before built-in Vite hooks
         enforce: 'pre',
-        async resolveId(source, importer) {
+        async resolveId(source, importer, { ssr }) {
+            // For SSR with component HMR, pass through as a virtual module
+            if (ssr && source.startsWith(ANGULAR_PREFIX)) {
+                return '\0' + source;
+            }
             // Prevent vite from resolving an explicit external dependency (`externalDependencies` option)
             if (external?.includes(source)) {
                 // This is still not ideal since Vite will still transform the import specifier to
@@ -41,7 +46,14 @@ async function createAngularMemoryPlugin(options) {
                 return (0, node_path_1.join)(virtualProjectRoot, source);
             }
         },
-        load(id) {
+        load(id, loadOptions) {
+            // For SSR component updates, return the component update module or empty if none
+            if (loadOptions?.ssr && id.startsWith(`\0${ANGULAR_PREFIX}`)) {
+                // Extract component identifier (first character is rollup virtual module null)
+                const requestUrl = new URL(id.slice(1), 'http://localhost');
+                const componentId = requestUrl.searchParams.get('c');
+                return (componentId && options.templateUpdates?.get(componentId)) ?? '';
+            }
             const [file] = id.split('?', 1);
             const relativeFile = '/' + normalizePath((0, node_path_1.relative)(virtualProjectRoot, file));
             const codeContents = outputFiles.get(relativeFile)?.contents;

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

@@ -5,6 +5,8 @@
  * 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 { DepOptimizationConfig } from 'vite';
+import { JavaScriptTransformer } from '../esbuild/javascript-transformer';
 export type AngularMemoryOutputFiles = Map<string, {
     contents: Uint8Array;
     hash: string;
@@ -12,3 +14,15 @@ export type AngularMemoryOutputFiles = Map<string, {
 }>;
 export declare function pathnameWithoutBasePath(url: string, basePath: string): string;
 export declare function lookupMimeTypeFromRequest(url: string): string | undefined;
+export type EsbuildLoaderOption = Exclude<DepOptimizationConfig['esbuildOptions'], undefined>['loader'];
+export declare function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless, prebundleTransformer, ssr, loader, thirdPartySourcemaps, }: {
+    disabled: boolean;
+    exclude: string[];
+    include: string[];
+    target: string[];
+    prebundleTransformer: JavaScriptTransformer;
+    ssr: boolean;
+    zoneless: boolean;
+    loader?: EsbuildLoaderOption;
+    thirdPartySourcemaps: boolean;
+}): DepOptimizationConfig;

package/src/tools/vite/utils.js

@@ -9,8 +9,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pathnameWithoutBasePath = pathnameWithoutBasePath;
 exports.lookupMimeTypeFromRequest = lookupMimeTypeFromRequest;
+exports.getDepOptimizationConfig = getDepOptimizationConfig;
 const mrmime_1 = require("mrmime");
 const node_path_1 = require("node:path");
+const utils_1 = require("../esbuild/utils");
 function pathnameWithoutBasePath(url, basePath) {
     const parsedUrl = new URL(url, 'http://localhost');
     const pathname = decodeURIComponent(parsedUrl.pathname);
@@ -26,3 +28,38 @@ function lookupMimeTypeFromRequest(url) {
     }
     return extension && (0, mrmime_1.lookup)(extension);
 }
+function getDepOptimizationConfig({ disabled, exclude, include, target, zoneless, prebundleTransformer, ssr, loader, thirdPartySourcemaps, }) {
+    const plugins = [
+        {
+            name: `angular-vite-optimize-deps${ssr ? '-ssr' : ''}${thirdPartySourcemaps ? '-vendor-sourcemap' : ''}`,
+            setup(build) {
+                build.onLoad({ filter: /\.[cm]?js$/ }, async (args) => {
+                    return {
+                        contents: await prebundleTransformer.transformFile(args.path),
+                        loader: 'js',
+                    };
+                });
+            },
+        },
+    ];
+    return {
+        // Exclude any explicitly defined dependencies (currently build defined externals)
+        exclude,
+        // NB: to disable the deps optimizer, set optimizeDeps.noDiscovery to true and optimizeDeps.include as undefined.
+        // Include all implict dependencies from the external packages internal option
+        include: disabled ? undefined : include,
+        noDiscovery: disabled,
+        // Add an esbuild plugin to run the Angular linker on dependencies
+        esbuildOptions: {
+            // Set esbuild supported targets.
+            target,
+            supported: (0, utils_1.getFeatureSupport)(target, zoneless),
+            plugins,
+            loader,
+            define: {
+                'ngServerMode': `${ssr}`,
+            },
+            resolveExtensions: ['.mjs', '.js', '.cjs'],
+        },
+    };
+}

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

@@ -97,7 +97,7 @@ async function autoCsp(html, unsafeEval = false) {
      * loader script to the collection of hashes to add to the <meta> tag CSP.
      */
     function emitLoaderScript() {
-        const loaderScript = createLoaderScript(scriptContent);
+        const loaderScript = createLoaderScript(scriptContent, /* enableTrustedTypes = */ false);
         hashes.push(hashTextContent(loaderScript));
         rewriter.emitRaw(`<script>${loaderScript}</script>`);
         scriptContent = [];
@@ -151,7 +151,7 @@ async function autoCsp(html, unsafeEval = false) {
                 return;
             }
         }
-        if (tag.tagName === 'body' || tag.tagName === 'html') {
+        if (tag.tagName === 'head' || 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();
@@ -249,7 +249,7 @@ function createLoaderScript(srcList, enableTrustedTypes = false) {
         // 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 typeAttr = s.type ? "'" + s.type + "'" : "''";
         const asyncAttr = s.async ? 'true' : 'false';
         const deferAttr = s.defer ? 'true' : 'false';
         return `['${srcAttr}', ${typeAttr}, ${asyncAttr}, ${deferAttr}]`;
@@ -268,7 +268,7 @@ function createLoaderScript(srcList, enableTrustedTypes = false) {
     s.type = scriptUrl[1];
     s.async = !!scriptUrl[2];
     s.defer = !!scriptUrl[3];
-    document.body.appendChild(s);
+    document.lastElementChild.appendChild(s);
   });\n`
         : `
   var scripts = [${srcListFormatted}];
@@ -278,6 +278,6 @@ function createLoaderScript(srcList, enableTrustedTypes = false) {
     s.type = scriptUrl[1];
     s.async = !!scriptUrl[2];
     s.defer = !!scriptUrl[3];
-    document.body.appendChild(s);
+    document.lastElementChild.appendChild(s);
   });\n`;
 }

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.4';
+const VERSION = '19.0.5';
 function hasCacheMetadata(value) {
     return (!!value &&
         typeof value === 'object' &&

package/src/utils/server-rendering/esm-in-memory-loader/loader-hooks.js

@@ -19,6 +19,10 @@ const node_path_1 = require("node:path");
 const node_url_1 = require("node:url");
 const url_1 = require("url");
 const javascript_transformer_1 = require("../../../tools/esbuild/javascript-transformer");
+/**
+ * @note For some unknown reason, setting `globalThis.ngServerMode = true` does not work when using ESM loader hooks.
+ */
+const NG_SERVER_MODE_INIT_BYTES = new TextEncoder().encode('var ngServerMode=true;');
 /**
  * Node.js ESM loader to redirect imports to in memory files.
  * @see: https://nodejs.org/api/esm.html#loaders for more information about loaders.
@@ -107,7 +111,11 @@ async function load(url, context, nextLoad) {
     // need linking are ESM only.
     if (format === 'module' && isFileProtocol(url)) {
         const filePath = (0, url_1.fileURLToPath)(url);
-        const source = await javascriptTransformer.transformFile(filePath);
+        let source = await javascriptTransformer.transformFile(filePath);
+        if (filePath.includes('@angular/')) {
+            // Prepend 'var ngServerMode=true;' to the source.
+            source = Buffer.concat([NG_SERVER_MODE_INIT_BYTES, source]);
+        }
         return {
             format,
             shortCircuit: true,