fix(@angular-devkit/build-angular): log modified and removed files when using the verbose option

With this change we print out the modified and removed files when running a build in verbose mode. This can be useful to debug builds that rebuilds multiple times without an apparent file change.

(cherry picked from commit f0a0b08)

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/browser/tests/options/verbose_spec.ts

@@ -0,0 +1,106 @@
+/**
+ * @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.io/license
+ */
+
+import { logging } from '@angular-devkit/core';
+import { concatMap, count, take, timeout } from 'rxjs/operators';
+import { BUILD_TIMEOUT, buildWebpackBrowser } from '../../index';
+import { BASE_OPTIONS, BROWSER_BUILDER_INFO, describeBuilder } from '../setup';
+
+// The below plugin is only enabled when verbose option is set to true.
+const VERBOSE_LOG_TEXT = 'LOG from webpack.';
+
+describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
+  describe('Option: "verbose"', () => {
+    beforeEach(async () => {
+      // Application code is not needed for verbose output
+      await harness.writeFile('src/main.ts', '');
+    });
+
+    it('should include verbose logs when true', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        verbose: true,
+      });
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      expect(logs).toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching(VERBOSE_LOG_TEXT),
+        }),
+      );
+    });
+
+    it('should not include verbose logs when undefined', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        verbose: undefined,
+      });
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      expect(logs).not.toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching(VERBOSE_LOG_TEXT),
+        }),
+      );
+    });
+
+    it('should not include verbose logs when false', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        verbose: false,
+      });
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      expect(logs).not.toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          message: jasmine.stringMatching(VERBOSE_LOG_TEXT),
+        }),
+      );
+    });
+
+    it('should list modified files when verbose is set to true', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        verbose: true,
+        watch: true,
+      });
+
+      await harness
+        .execute()
+        .pipe(
+          timeout(BUILD_TIMEOUT),
+          concatMap(async ({ result, logs }, index) => {
+            expect(result?.success).toBeTrue();
+
+            switch (index) {
+              case 0:
+                // Amend file
+                await harness.appendToFile('/src/main.ts', ' ');
+                break;
+              case 1:
+                expect(logs).toContain(
+                  jasmine.objectContaining<logging.LogEntry>({
+                    message: jasmine.stringMatching(
+                      /angular\.watch-files-logs-plugin\n\s+Modified files:\n.+main\.ts/,
+                    ),
+                  }),
+                );
+
+                break;
+            }
+          }),
+          take(2),
+          count(),
+        )
+        .toPromise();
+    });
+  });
+});

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -33,6 +33,7 @@ import { NamedChunksPlugin } from '../plugins/named-chunks-plugin';
 import { ProgressPlugin } from '../plugins/progress-plugin';
 import { TransferSizePlugin } from '../plugins/transfer-size-plugin';
 import { createIvyPlugin } from '../plugins/typescript';
+import { WatchFilesLogsPlugin } from '../plugins/watch-files-logs-plugin';
 import {
   assetPatterns,
   externalizePackages,
@@ -204,6 +205,10 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
     );
   }
 
+  if (verbose) {
+    extraPlugins.push(new WatchFilesLogsPlugin());
+  }
+
   if (buildOptions.statsJson) {
     extraPlugins.push(
       new JsonStatsPlugin(path.resolve(root, buildOptions.outputPath, 'stats.json')),

packages/angular_devkit/build_angular/src/webpack/plugins/watch-files-logs-plugin.ts

@@ -0,0 +1,28 @@
+/**
+ * @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.io/license
+ */
+
+import type { Compiler } from 'webpack';
+
+const PLUGIN_NAME = 'angular.watch-files-logs-plugin';
+
+export class WatchFilesLogsPlugin {
+  apply(compiler: Compiler) {
+    compiler.hooks.watchRun.tap(PLUGIN_NAME, ({ modifiedFiles, removedFiles }) => {
+      compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+        const logger = compilation.getLogger(PLUGIN_NAME);
+        if (modifiedFiles?.size) {
+          logger.log(`Modified files:\n${[...modifiedFiles].join('\n')}\n`);
+        }
+
+        if (removedFiles?.size) {
+          logger.log(`Removed files:\n${[...removedFiles].join('\n')}\n`);
+        }
+      });
+    });
+  }
+}