fix(@angular/build): support incremental asset updates and output cleanup in library watch mode

Ensure the library builder properly handles created, modified, and deleted assets during watch mode rebuilds, and removes stale bundle and manifest output files when entry points or exports change.

Author: alan-agius4

packages/angular/build/src/builders/library/builder.ts

@@ -127,7 +127,10 @@ export async function* executeLibraryBuilder(
         poll,
         preserveSymlinks,
         signal,
-        watchFiles: watchedCompilationFiles,
+        watchFiles: [
+          ...watchedCompilationFiles,
+          ...normalizedOptions.assets.map((asset) => asset.input),
+        ],
       });
 
       context.addTeardown?.(() => void watcher?.close());
@@ -224,9 +227,9 @@ async function executeBuild(
     if (watcher) {
       watcher.add(Array.from(watchedCompilationFiles));
 
-      const { assetsToEmit } = actionContext;
-      if (assetsToEmit?.length) {
-        watcher.add(assetsToEmit.map((asset) => asset.source));
+      const { collectedAssets } = actionContext;
+      if (collectedAssets?.filesToEmit.length) {
+        watcher.add(collectedAssets.filesToEmit.map((asset) => asset.source));
       }
     }
   }
@@ -337,13 +340,19 @@ async function* runWatchLoop(
       buildState.hasEntryPointsChanges ||
       hasModifiedWatchedFile(changedFiles, watchedCompilationFiles, packageJsonPath);
 
-    const assetsToEmit = await collectAssetsToEmit(
+    const collectedAssets = await collectAssetsToEmit(
       assets,
       workspaceRoot,
       buildState.hasEmittedAssets ? changedFiles : undefined,
+      buildState.emittedAssets,
     );
 
-    if (!hasSourceChanges && !hasPackageJsonChanges && assetsToEmit.length === 0) {
+    if (
+      !hasSourceChanges &&
+      !hasPackageJsonChanges &&
+      collectedAssets.filesToEmit.length === 0 &&
+      collectedAssets.filesToDelete.length === 0
+    ) {
       continue;
     }
 
@@ -357,7 +366,7 @@ async function* runWatchLoop(
         context,
         buildState,
         modifiedFiles: changedFiles,
-        assetsToEmit,
+        collectedAssets,
       },
       withProgress,
       watcher,

packages/angular/build/src/builders/library/pipeline/assets.ts

@@ -14,58 +14,110 @@ import type { NormalizedLibraryOptions } from '../types';
 import { type DiskOutputFile, createDiskOutputFile } from './utils';
 
 /**
- * Resolves and collects configured library assets to be emitted to disk.
+ * Result of resolving and collecting library assets for a build iteration.
+ */
+export interface CollectedAssets {
+  /** Asset files to emit to disk, with POSIX source and destination paths. */
+  filesToEmit: DiskOutputFile[];
+
+  /** Previously emitted asset files whose source files were deleted and should be removed from output. */
+  filesToDelete: DiskOutputFile[];
+}
+
+interface AssetMatcher {
+  asset: NormalizedLibraryOptions['assets'][number];
+  posixInputPrefix: string;
+  isMatch: picomatch.Matcher;
+}
+
+const assetMatcherCache = new WeakMap<NormalizedLibraryOptions['assets'], AssetMatcher[]>();
+
+/**
+ * Resolves and collects configured library assets to be emitted to or deleted from disk.
  *
- * @param assets The normalized asset patterns with POSIX paths.
- * @param workspaceRoot The normalized POSIX workspace root directory path.
+ * @param assets The normalized asset patterns with POSIX input and output paths.
+ * @param workspaceRoot The workspace root POSIX directory path.
  * @param modifiedFiles Optional set of modified POSIX file paths for incremental copying in watch mode.
- * @returns An array of disk file emission descriptors.
+ * @param emittedAssets Optional map of previously emitted POSIX source file paths to relative POSIX output paths.
+ * @returns The collected asset files to emit and delete.
  */
 export async function collectAssetsToEmit(
   assets: NormalizedLibraryOptions['assets'],
   workspaceRoot: string,
   modifiedFiles?: ReadonlySet<string>,
-): Promise<DiskOutputFile[]> {
+  emittedAssets?: ReadonlyMap<string, string>,
+): Promise<CollectedAssets> {
   if (assets.length === 0 || modifiedFiles?.size === 0) {
-    return [];
+    return { filesToEmit: [], filesToDelete: [] };
   }
 
   if (modifiedFiles) {
-    const matchers = createAssetMatchers(assets);
+    const matchers = getAssetMatchers(assets);
     const filesToEmit: DiskOutputFile[] = [];
+    const filesToDelete: DiskOutputFile[] = [];
 
     for (const file of modifiedFiles) {
-      for (const { asset, isMatch } of matchers) {
-        const relative = path.posix.relative(asset.input, file);
-        if (!relative || relative.startsWith('..') || path.posix.isAbsolute(relative)) {
+      let isFile: boolean | undefined;
+
+      const previousOutput = emittedAssets?.get(file);
+      if (previousOutput !== undefined) {
+        isFile = statSync(file, { throwIfNoEntry: false })?.isFile() ?? false;
+        if (!isFile) {
+          filesToDelete.push(createDiskOutputFile(file, previousOutput));
           continue;
         }
+      }
 
+      for (const { asset, posixInputPrefix, isMatch } of matchers) {
+        if (!file.startsWith(posixInputPrefix)) {
+          continue;
+        }
+
+        const relative = file.slice(posixInputPrefix.length);
         if (!isMatch(relative)) {
           continue;
         }
 
-        if (statSync(file, { throwIfNoEntry: false })?.isFile()) {
+        isFile ??= statSync(file, { throwIfNoEntry: false })?.isFile() ?? false;
+        if (isFile) {
           filesToEmit.push(createDiskOutputFile(file, path.posix.join(asset.output, relative)));
         }
       }
     }
 
-    return filesToEmit;
+    return { filesToEmit, filesToDelete };
   }
 
   const resolvedAssets = await resolveAssets(assets, workspaceRoot);
 
-  return resolvedAssets.map(({ source, destination }) => createDiskOutputFile(source, destination));
+  return {
+    filesToEmit: resolvedAssets.map(({ source, destination }) =>
+      createDiskOutputFile(source, destination),
+    ),
+    filesToDelete: [],
+  };
 }
 
-function createAssetMatchers(assets: NormalizedLibraryOptions['assets']) {
-  return assets.map((asset) => {
-    const isMatch = picomatch(asset.glob, {
-      dot: true,
-      ignore: [...DEFAULT_ASSET_IGNORE, ...(asset.ignore ?? [])],
+/**
+ * Returns cached or newly compiled picomatch matchers and POSIX input prefixes for each asset configuration.
+ *
+ * @param assets The normalized asset patterns with POSIX input and output paths.
+ * @returns An array of asset matcher descriptors.
+ */
+function getAssetMatchers(assets: NormalizedLibraryOptions['assets']): AssetMatcher[] {
+  let matchers = assetMatcherCache.get(assets);
+  if (!matchers) {
+    matchers = assets.map((asset) => {
+      const posixInput = asset.input.replace(/\/+$/, '');
+      const isMatch = picomatch(asset.glob, {
+        dot: true,
+        ignore: [...DEFAULT_ASSET_IGNORE, ...(asset.ignore ?? [])],
+      });
+
+      return { asset, posixInputPrefix: `${posixInput}/`, isMatch };
     });
+    assetMatcherCache.set(assets, matchers);
+  }
 
-    return { asset, isMatch };
-  });
+  return matchers;
 }