@angular/build 19.1.1 → 19.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/build",
-  "version": "19.1.1",
+  "version": "19.1.3",
   "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.1901.1",
+    "@angular-devkit/architect": "0.1901.3",
     "@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.1.1",
+    "@angular/ssr": "^19.1.3",
     "less": "^4.2.0",
     "ng-packagr": "^19.0.0",
     "postcss": "^8.4.0",
@@ -104,16 +104,5 @@
   "bugs": {
     "url": "https://github.com/angular/angular-cli/issues"
   },
-  "homepage": "https://github.com/angular/angular-cli",
-  "dependenciesMeta": {
-    "esbuild": {
-      "built": true
-    },
-    "puppeteer": {
-      "built": true
-    }
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": []
-  }
+  "homepage": "https://github.com/angular/angular-cli"
 }

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

@@ -187,28 +187,11 @@ function* emitOutputResults({ outputFiles, assetFiles, errors, warnings, externa
         };
         return;
     }
-    // Template updates only exist if no other JS changes have occurred
-    const hasTemplateUpdates = !!templateUpdates?.size;
-    if (hasTemplateUpdates) {
-        const updateResult = {
-            kind: results_1.ResultKind.ComponentUpdate,
-            updates: Array.from(templateUpdates, ([id, content]) => ({
-                type: 'template',
-                id,
-                content,
-            })),
-        };
-        yield updateResult;
-    }
-    // Use an incremental result if previous output information is available
-    if (rebuildState && changes) {
-        const { previousAssetsInfo, previousOutputInfo } = rebuildState;
-        const incrementalResult = {
-            kind: results_1.ResultKind.Incremental,
+    // Use a full result if there is no rebuild state (no prior build result)
+    if (!rebuildState || !changes) {
+        const result = {
+            kind: results_1.ResultKind.Full,
             warnings: warnings,
-            added: [],
-            removed: [],
-            modified: [],
             files: {},
             detail: {
                 externalMetadata,
@@ -217,69 +200,37 @@ function* emitOutputResults({ outputFiles, assetFiles, errors, warnings, externa
                 outputOptions,
             },
         };
-        // Initially assume all previous output files have been removed
-        const removedOutputFiles = new Map(previousOutputInfo);
-        for (const file of outputFiles) {
-            removedOutputFiles.delete(file.path);
-            // Temporarily ignore JS files until Angular compiler plugin refactor to allow
-            // bypassing application code bundling for template affecting only changes.
-            // TODO: Remove once refactor is complete.
-            if (hasTemplateUpdates && /\.js(?:\.map)?$/.test(file.path)) {
-                continue;
-            }
-            const previousHash = previousOutputInfo.get(file.path)?.hash;
-            let needFile = false;
-            if (previousHash === undefined) {
-                needFile = true;
-                incrementalResult.added.push(file.path);
-            }
-            else if (previousHash !== file.hash) {
-                needFile = true;
-                incrementalResult.modified.push(file.path);
-            }
-            if (needFile) {
-                incrementalResult.files[file.path] = {
-                    type: file.type,
-                    contents: file.contents,
-                    origin: 'memory',
-                    hash: file.hash,
-                };
-            }
-        }
-        // Initially assume all previous assets files have been removed
-        const removedAssetFiles = new Map(previousAssetsInfo);
-        for (const { source, destination } of assetFiles) {
-            removedAssetFiles.delete(source);
-            if (!previousAssetsInfo.has(source)) {
-                incrementalResult.added.push(destination);
-            }
-            else if (changes.modified.has(source)) {
-                incrementalResult.modified.push(destination);
-            }
-            else {
-                continue;
-            }
-            incrementalResult.files[destination] = {
+        for (const file of assetFiles) {
+            result.files[file.destination] = {
                 type: bundler_context_1.BuildOutputFileType.Browser,
-                inputPath: source,
+                inputPath: file.source,
                 origin: 'disk',
             };
         }
-        // Include the removed output and asset files
-        incrementalResult.removed.push(...Array.from(removedOutputFiles, ([file, { type }]) => ({
-            path: file,
-            type,
-        })), ...Array.from(removedAssetFiles.values(), (file) => ({
-            path: file,
-            type: bundler_context_1.BuildOutputFileType.Browser,
-        })));
-        yield incrementalResult;
+        for (const file of outputFiles) {
+            result.files[file.path] = {
+                type: file.type,
+                contents: file.contents,
+                origin: 'memory',
+                hash: file.hash,
+            };
+        }
+        yield result;
         return;
     }
-    // Otherwise, use a full result
-    const result = {
-        kind: results_1.ResultKind.Full,
+    // Template updates only exist if no other JS changes have occurred.
+    // A full page reload may be required based on the following incremental output change analysis.
+    const hasTemplateUpdates = !!templateUpdates?.size;
+    // Use an incremental result if previous output information is available
+    const { previousAssetsInfo, previousOutputInfo } = rebuildState;
+    const incrementalResult = {
+        kind: results_1.ResultKind.Incremental,
         warnings: warnings,
+        // Initially attempt to use a background update of files to support component updates.
+        background: hasTemplateUpdates,
+        added: [],
+        removed: [],
+        modified: [],
         files: {},
         detail: {
             externalMetadata,
@@ -288,20 +239,74 @@ function* emitOutputResults({ outputFiles, assetFiles, errors, warnings, externa
             outputOptions,
         },
     };
-    for (const file of assetFiles) {
-        result.files[file.destination] = {
+    // Initially assume all previous output files have been removed
+    const removedOutputFiles = new Map(previousOutputInfo);
+    for (const file of outputFiles) {
+        removedOutputFiles.delete(file.path);
+        const previousHash = previousOutputInfo.get(file.path)?.hash;
+        let needFile = false;
+        if (previousHash === undefined) {
+            needFile = true;
+            incrementalResult.added.push(file.path);
+        }
+        else if (previousHash !== file.hash) {
+            needFile = true;
+            incrementalResult.modified.push(file.path);
+        }
+        if (needFile) {
+            // Updates to non-JS files must signal an update with the dev server
+            if (!/(?:\.m?js|\.map)$/.test(file.path)) {
+                incrementalResult.background = false;
+            }
+            incrementalResult.files[file.path] = {
+                type: file.type,
+                contents: file.contents,
+                origin: 'memory',
+                hash: file.hash,
+            };
+        }
+    }
+    // Initially assume all previous assets files have been removed
+    const removedAssetFiles = new Map(previousAssetsInfo);
+    for (const { source, destination } of assetFiles) {
+        removedAssetFiles.delete(source);
+        if (!previousAssetsInfo.has(source)) {
+            incrementalResult.added.push(destination);
+            incrementalResult.background = false;
+        }
+        else if (changes.modified.has(source)) {
+            incrementalResult.modified.push(destination);
+            incrementalResult.background = false;
+        }
+        else {
+            continue;
+        }
+        incrementalResult.files[destination] = {
             type: bundler_context_1.BuildOutputFileType.Browser,
-            inputPath: file.source,
+            inputPath: source,
             origin: 'disk',
         };
     }
-    for (const file of outputFiles) {
-        result.files[file.path] = {
-            type: file.type,
-            contents: file.contents,
-            origin: 'memory',
-            hash: file.hash,
+    // Include the removed output and asset files
+    incrementalResult.removed.push(...Array.from(removedOutputFiles, ([file, { type }]) => ({
+        path: file,
+        type,
+    })), ...Array.from(removedAssetFiles.values(), (file) => ({
+        path: file,
+        type: bundler_context_1.BuildOutputFileType.Browser,
+    })));
+    yield incrementalResult;
+    // If there are template updates and the incremental update was background only, a component
+    // update is possible.
+    if (hasTemplateUpdates && incrementalResult.background) {
+        const updateResult = {
+            kind: results_1.ResultKind.ComponentUpdate,
+            updates: Array.from(templateUpdates, ([id, content]) => ({
+                type: 'template',
+                id,
+                content,
+            })),
         };
+        yield updateResult;
     }
-    yield result;
 }

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

@@ -29,6 +29,7 @@ export interface FullResult extends BaseResult {
 }
 export interface IncrementalResult extends BaseResult {
     kind: ResultKind.Incremental;
+    background?: boolean;
     added: string[];
     removed: {
         path: string;

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

@@ -110,6 +110,12 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     // This will also replace file-based/inline styles as code if external runtime styles are not enabled.
     browserOptions.templateUpdates =
         serverOptions.liveReload && serverOptions.hmr && environment_options_1.useComponentTemplateHmr;
+    if (browserOptions.templateUpdates) {
+        context.logger.warn('Component HMR has been enabled.\n' +
+            'If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the' +
+            ' `--no-hmr` command line option.\n' +
+            'Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues\n');
+    }
     browserOptions.incrementalResults = true;
     // Setup the prebundling transformer that will be shared across Vite prebundling requests
     const prebundleTransformer = new internal_1.JavaScriptTransformer(
@@ -166,6 +172,7 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                 updates: [],
             });
         }
+        let needClientUpdate = true;
         switch (result.kind) {
             case results_1.ResultKind.Full:
                 if (result.detail?.['htmlIndexPath']) {
@@ -187,15 +194,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                     // The initial build will not yet have a server setup
                     !server);
                 }
-                // Invalidate SSR module graph to ensure that only new rebuild is used and not stale component updates
-                if (server && browserOptions.ssr && templateUpdates.size > 0) {
-                    server.moduleGraph.invalidateAll();
-                }
                 // Clear stale template updates on code rebuilds
                 templateUpdates.clear();
                 break;
             case results_1.ResultKind.Incremental:
                 (0, node_assert_1.default)(server, 'Builder must provide an initial full build before incremental results.');
+                // Background updates should only update server files/options
+                needClientUpdate = !result.background;
                 for (const removed of result.removed) {
                     const filePath = '/' + normalizePath(removed.path);
                     generatedFiles.delete(filePath);
@@ -211,13 +216,6 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
             case results_1.ResultKind.ComponentUpdate:
                 (0, node_assert_1.default)(serverOptions.hmr, 'Component updates are only supported with HMR enabled.');
                 (0, node_assert_1.default)(server, 'Builder must provide an initial full build before component update results.');
-                // Invalidate SSR module graph to ensure that new component updates are used
-                // TODO: Use fine-grained invalidation of only the component update modules
-                if (browserOptions.ssr) {
-                    server.moduleGraph.invalidateAll();
-                    const { ɵresetCompiledComponents } = (await server.ssrLoadModule('/main.server.mjs'));
-                    ɵresetCompiledComponents();
-                }
                 for (const componentUpdate of result.updates) {
                     if (componentUpdate.type === 'template') {
                         templateUpdates.set(componentUpdate.id, componentUpdate.content);
@@ -262,7 +260,10 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
                     ...[...assetFiles.values()].map(({ source }) => source),
                 ]),
             ];
-            await handleUpdate(normalizePath, generatedFiles, assetFiles, server, serverOptions, context.logger, componentStyles);
+            const updatedFiles = await invalidateUpdatedFiles(normalizePath, generatedFiles, assetFiles, server);
+            if (needClientUpdate) {
+                handleUpdate(server, serverOptions, context.logger, componentStyles, updatedFiles);
+            }
         }
         else {
             const projectName = context.target?.project;
@@ -335,7 +336,13 @@ async function* serveWithVite(serverOptions, builderName, builderAction, context
     }
     await new Promise((resolve) => (deferred = resolve));
 }
-async function handleUpdate(normalizePath, generatedFiles, assetFiles, server, serverOptions, logger, componentStyles) {
+/**
+ * Invalidates any updated asset or generated files and resets their `updated` state.
+ * This function also clears the server application cache when necessary.
+ *
+ * @returns A list of files that were updated and invalidated.
+ */
+async function invalidateUpdatedFiles(normalizePath, generatedFiles, assetFiles, server) {
     const updatedFiles = [];
     // Invalidate any updated asset
     for (const [file, record] of assetFiles) {
@@ -363,13 +370,21 @@ async function handleUpdate(normalizePath, generatedFiles, assetFiles, server, s
         const updatedModules = server.moduleGraph.getModulesByFile(normalizePath((0, node_path_1.join)(server.config.root, file)));
         updatedModules?.forEach((m) => server.moduleGraph.invalidateModule(m));
     }
-    if (!updatedFiles.length) {
-        return;
-    }
     if (destroyAngularServerAppCalled) {
         // Trigger module evaluation before reload to initiate dependency optimization.
         await server.ssrLoadModule('/main.server.mjs');
     }
+    return updatedFiles;
+}
+/**
+ * Handles updates for the client by sending HMR or full page reload commands
+ * based on the updated files. It also ensures proper tracking of component styles and determines if
+ * a full reload is needed.
+ */
+function handleUpdate(server, serverOptions, logger, componentStyles, updatedFiles) {
+    if (!updatedFiles.length) {
+        return;
+    }
     if (serverOptions.hmr) {
         if (updatedFiles.every((f) => f.endsWith('.css'))) {
             let requiresReload = false;
@@ -593,6 +608,7 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 componentStyles,
                 templateUpdates,
                 ssrMode,
+                resetComponentUpdates: () => templateUpdates.clear(),
             }),
             (0, plugins_1.createRemoveIdPrefixPlugin)(externalMetadata.explicitBrowser),
             await (0, plugins_1.createAngularSsrTransformPlugin)(serverOptions.workspaceRoot),

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

@@ -120,7 +120,11 @@ class AotCompilation extends angular_compilation_1.AngularCompilation {
                 relativePath = relativePath.replaceAll('\\', '/');
                 const updateId = encodeURIComponent(`${host.getCanonicalFileName(relativePath)}@${node.name?.text}`);
                 const updateText = angularCompiler.emitHmrUpdateModule(node);
-                if (updateText === null) {
+                // If compiler cannot generate an update for the component, prevent template updates.
+                // Also prevent template updates if $localize is directly present which also currently
+                // prevents a template update at runtime.
+                // TODO: Support localized template update modules and remove this check.
+                if (updateText === null || updateText.includes('$localize')) {
                     // Build is needed if a template cannot be updated
                     templateUpdates = undefined;
                     break;

package/src/tools/vite/middlewares/component-middleware.d.ts

@@ -5,5 +5,5 @@
  * 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 { Connect } from 'vite';
-export declare function createAngularComponentMiddleware(templateUpdates: ReadonlyMap<string, string>): Connect.NextHandleFunction;
+import type { Connect, ViteDevServer } from 'vite';
+export declare function createAngularComponentMiddleware(server: ViteDevServer, templateUpdates: ReadonlyMap<string, string>): Connect.NextHandleFunction;

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

@@ -8,13 +8,15 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAngularComponentMiddleware = createAngularComponentMiddleware;
+const utils_1 = require("../utils");
 const ANGULAR_COMPONENT_PREFIX = '/@ng/component';
-function createAngularComponentMiddleware(templateUpdates) {
+function createAngularComponentMiddleware(server, templateUpdates) {
     return function angularComponentMiddleware(req, res, next) {
         if (req.url === undefined || res.writableEnded) {
             return;
         }
-        if (!req.url.startsWith(ANGULAR_COMPONENT_PREFIX)) {
+        const pathname = (0, utils_1.pathnameWithoutBasePath)(req.url, server.config.base);
+        if (!pathname.includes(ANGULAR_COMPONENT_PREFIX)) {
             next();
             return;
         }

package/src/tools/vite/middlewares/index-html-middleware.d.ts

@@ -7,4 +7,4 @@
  */
 import type { Connect, ViteDevServer } from 'vite';
 import { AngularMemoryOutputFiles } from '../utils';
-export declare function createAngularIndexHtmlMiddleware(server: ViteDevServer, outputFiles: AngularMemoryOutputFiles, indexHtmlTransformer: ((content: string) => Promise<string>) | undefined): Connect.NextHandleFunction;
+export declare function createAngularIndexHtmlMiddleware(server: ViteDevServer, outputFiles: AngularMemoryOutputFiles, resetComponentUpdates: () => void, indexHtmlTransformer: ((content: string) => Promise<string>) | undefined): Connect.NextHandleFunction;

package/src/tools/vite/middlewares/index-html-middleware.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createAngularIndexHtmlMiddleware = createAngularIndexHtmlMiddleware;
 const node_path_1 = require("node:path");
 const utils_1 = require("../utils");
-function createAngularIndexHtmlMiddleware(server, outputFiles, indexHtmlTransformer) {
+function createAngularIndexHtmlMiddleware(server, outputFiles, resetComponentUpdates, indexHtmlTransformer) {
     return function angularIndexHtmlMiddleware(req, res, next) {
         if (!req.url) {
             next();
@@ -29,6 +29,8 @@ function createAngularIndexHtmlMiddleware(server, outputFiles, indexHtmlTransfor
             next();
             return;
         }
+        // A request for the index indicates a full page reload request.
+        resetComponentUpdates();
         server
             .transformIndexHtml(req.url, Buffer.from(rawHtml).toString('utf-8'))
             .then(async (processedHtml) => {

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

@@ -35,8 +35,11 @@ async function createAngularMemoryPlugin(options) {
                 // Vite will resolve these these files example:
                 // `file:///@ng/component?c=src%2Fapp%2Fapp.component.ts%40AppComponent&t=1737017253850`
                 const sourcePath = (0, node_url_1.fileURLToPath)(source);
-                const { root } = (0, node_path_1.parse)(sourcePath);
-                const sourceWithoutRoot = normalizePath('/' + sourcePath.slice(root.length));
+                const sourceWithoutRoot = sourcePath.startsWith(virtualProjectRoot)
+                    ? normalizePath('/' + (0, node_path_1.relative)(virtualProjectRoot, sourcePath))
+                    : // TODO: remove once https://github.com/angular/angular/blob/4e6017a9f5cda389c5fbf4f2c1519ce1bba23e11/packages/compiler/src/render3/r3_hmr_compiler.ts#L57
+                        // is changed from `/@ng` to `./@ng/`
+                        normalizePath('/' + sourcePath.slice((0, node_path_1.parse)(sourcePath).root.length));
                 if (sourceWithoutRoot.startsWith(ANGULAR_PREFIX)) {
                     const [, query] = source.split('?', 2);
                     return `\0${sourceWithoutRoot}?${query}`;

package/src/tools/vite/plugins/setup-middlewares-plugin.d.ts

@@ -38,6 +38,7 @@ interface AngularSetupMiddlewaresPluginOptions {
     componentStyles: Map<string, ComponentStyleRecord>;
     templateUpdates: Map<string, string>;
     ssrMode: ServerSsrMode;
+    resetComponentUpdates: () => void;
 }
 export declare function createAngularSetupMiddlewaresPlugin(options: AngularSetupMiddlewaresPluginOptions): Plugin;
 export {};

package/src/tools/vite/plugins/setup-middlewares-plugin.js

@@ -46,10 +46,10 @@ function createAngularSetupMiddlewaresPlugin(options) {
         name: 'vite:angular-setup-middlewares',
         enforce: 'pre',
         async configureServer(server) {
-            const { indexHtmlTransformer, outputFiles, extensionMiddleware, assets, componentStyles, templateUpdates, ssrMode, } = options;
+            const { indexHtmlTransformer, outputFiles, extensionMiddleware, assets, componentStyles, templateUpdates, ssrMode, resetComponentUpdates, } = options;
             // Headers, assets and resources get handled first
             server.middlewares.use((0, middlewares_1.createAngularHeadersMiddleware)(server));
-            server.middlewares.use((0, middlewares_1.createAngularComponentMiddleware)(templateUpdates));
+            server.middlewares.use((0, middlewares_1.createAngularComponentMiddleware)(server, templateUpdates));
             server.middlewares.use((0, middlewares_1.createAngularAssetsMiddleware)(server, assets, outputFiles, componentStyles, await createEncapsulateStyle()));
             extensionMiddleware?.forEach((middleware) => server.middlewares.use(middleware));
             // Returning a function, installs middleware after the main transform middleware but
@@ -64,7 +64,7 @@ function createAngularSetupMiddlewaresPlugin(options) {
                     server.middlewares.use((0, middlewares_1.createAngularSsrInternalMiddleware)(server, indexHtmlTransformer));
                 }
                 server.middlewares.use(middlewares_1.angularHtmlFallbackMiddleware);
-                server.middlewares.use((0, middlewares_1.createAngularIndexHtmlMiddleware)(server, outputFiles, indexHtmlTransformer));
+                server.middlewares.use((0, middlewares_1.createAngularIndexHtmlMiddleware)(server, outputFiles, resetComponentUpdates, indexHtmlTransformer));
             };
         },
     };

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