fix(@angular/build): remove deleted assets from output during watch mode

This commit ensures that assets deleted from the source are also removed from the output directory while in watch mode. Previously, deleted assets could persist in the output folder, potentially causing inconsistencies or outdated files to be served. This fix improves the accuracy of the build output by maintaining synchronization between the source and the output directory during development.

Author: alan-agius4

packages/angular/build/src/builders/application/build-action.ts

@@ -13,6 +13,7 @@ import { BuildOutputFileType } from '../../tools/esbuild/bundler-context';
 import { ExecutionResult, RebuildState } from '../../tools/esbuild/bundler-execution-result';
 import { shutdownSassWorkerPool } from '../../tools/esbuild/stylesheets/sass-language';
 import { logMessages, withNoProgress, withSpinner } from '../../tools/esbuild/utils';
+import { ChangedFiles } from '../../tools/esbuild/watcher';
 import { shouldWatchRoot } from '../../utils/environment-options';
 import { NormalizedCachedOptions } from '../../utils/normalize-cache';
 import { NormalizedApplicationBuildOptions, NormalizedOutputOptions } from './options';
@@ -199,7 +200,8 @@ export async function* runEsBuildBuildAction(
       yield emitOutputResult(
         result,
         outputOptions,
-        incrementalResults ? rebuildState.previousOutputInfo : undefined,
+        changes,
+        incrementalResults ? rebuildState : undefined,
       );
     }
   } finally {
@@ -222,7 +224,8 @@ function emitOutputResult(
     templateUpdates,
   }: ExecutionResult,
   outputOptions: NormalizedApplicationBuildOptions['outputOptions'],
-  previousOutputInfo?: ReadonlyMap<string, { hash: string; type: BuildOutputFileType }>,
+  changes?: ChangedFiles,
+  rebuildState?: RebuildState,
 ): Result {
   if (errors.length > 0) {
     return {
@@ -251,7 +254,9 @@ function emitOutputResult(
   }
 
   // Use an incremental result if previous output information is available
-  if (previousOutputInfo) {
+  if (rebuildState && changes) {
+    const { previousAssetsInfo, previousOutputInfo } = rebuildState;
+
     const incrementalResult: IncrementalResult = {
       kind: ResultKind.Incremental,
       warnings: warnings as ResultMessage[],
@@ -269,7 +274,6 @@ function emitOutputResult(
 
     // Initially assume all previous output files have been removed
     const removedOutputFiles = new Map(previousOutputInfo);
-
     for (const file of outputFiles) {
       removedOutputFiles.delete(file.path);
 
@@ -293,24 +297,37 @@ function emitOutputResult(
       }
     }
 
-    // Include the removed output files
+    // Initially assume all previous assets files have been removed
+    const removedAssetFiles = new Map(previousAssetsInfo);
+    for (const { source, destination } of assetFiles) {
+      removedAssetFiles.delete(source);
+
+      if (changes.modified.has(source)) {
+        incrementalResult.modified.push(destination);
+      } else if (!previousAssetsInfo.has(source)) {
+        incrementalResult.added.push(destination);
+      } else {
+        continue;
+      }
+
+      incrementalResult.files[destination] = {
+        type: BuildOutputFileType.Browser,
+        inputPath: source,
+        origin: 'disk',
+      };
+    }
+
+    // Include the removed output and asset files
     incrementalResult.removed.push(
       ...Array.from(removedOutputFiles, ([file, { type }]) => ({
         path: file,
         type,
       })),
-    );
-
-    // Always consider asset files as added to ensure new/modified assets are available.
-    // TODO: Consider more comprehensive asset analysis.
-    for (const file of assetFiles) {
-      incrementalResult.added.push(file.destination);
-      incrementalResult.files[file.destination] = {
+      ...Array.from(removedAssetFiles.values(), (file) => ({
+        path: file,
         type: BuildOutputFileType.Browser,
-        inputPath: file.source,
-        origin: 'disk',
-      };
-    }
+      })),
+    );
 
     return incrementalResult;
   }

packages/angular/build/src/builders/application/tests/behavior/rebuild-assets_spec.ts

@@ -61,5 +61,50 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
 
       expect(buildCount).toBe(2);
     });
+
+    it('remove deleted asset from output', async () => {
+      await Promise.all([
+        harness.writeFile('public/asset-two.txt', 'bar'),
+        harness.writeFile('public/asset-one.txt', 'foo'),
+      ]);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        assets: [
+          {
+            glob: '**/*',
+            input: 'public',
+          },
+        ],
+        watch: true,
+      });
+
+      const buildCount = await harness
+        .execute({ outputLogsOnFailure: false })
+        .pipe(
+          timeout(BUILD_TIMEOUT),
+          concatMap(async ({ result }, index) => {
+            switch (index) {
+              case 0:
+                expect(result?.success).toBeTrue();
+                harness.expectFile('dist/browser/asset-one.txt').toExist();
+                harness.expectFile('dist/browser/asset-two.txt').toExist();
+
+                await harness.removeFile('public/asset-two.txt');
+                break;
+              case 1:
+                expect(result?.success).toBeTrue();
+                harness.expectFile('dist/browser/asset-one.txt').toExist();
+                harness.expectFile('dist/browser/asset-two.txt').toNotExist();
+                break;
+            }
+          }),
+          take(2),
+          count(),
+        )
+        .toPromise();
+
+      expect(buildCount).toBe(2);
+    });
   });
 });

packages/angular/build/src/tools/esbuild/bundler-execution-result.ts

@@ -27,7 +27,8 @@ export interface RebuildState {
   componentStyleBundler: ComponentStylesheetBundler;
   codeBundleCache?: SourceFileCache;
   fileChanges: ChangedFiles;
-  previousOutputInfo: Map<string, { hash: string; type: BuildOutputFileType }>;
+  previousOutputInfo: ReadonlyMap<string, { hash: string; type: BuildOutputFileType }>;
+  previousAssetsInfo: ReadonlyMap<string, string>;
   templateUpdates?: Map<string, string>;
 }
 
@@ -172,12 +173,15 @@ export class ExecutionResult {
       previousOutputInfo: new Map(
         this.outputFiles.map(({ path, hash, type }) => [path, { hash, type }]),
       ),
+      previousAssetsInfo: new Map(
+        this.assetFiles.map(({ source, destination }) => [source, destination]),
+      ),
       templateUpdates: this.templateUpdates,
     };
   }
 
   findChangedFiles(
-    previousOutputHashes: Map<string, { hash: string; type: BuildOutputFileType }>,
+    previousOutputHashes: ReadonlyMap<string, { hash: string; type: BuildOutputFileType }>,
   ): Set<string> {
     const changed = new Set<string>();
     for (const file of this.outputFiles) {