fix(@angular-devkit/build-angular): show diagnostic messages after build stats

To improve the readability and discoverability of any warnings or errors present
during build, the diagnostic messages will be shown after the build stats are
displayed. For large projects the amount of generated files previously could cause
warnings to scroll off the screen and potentially be missed.

(cherry picked from commit 4813586)

Author: clydin

packages/angular_devkit/build_angular/src/builders/application/execute-build.ts

@@ -208,20 +208,12 @@ export async function executeBuild(
   if (options.budgets) {
     const compatStats = generateBudgetStats(metafile, initialFiles);
     budgetFailures = [...checkBudgets(options.budgets, compatStats, true)];
-    if (budgetFailures.length > 0) {
-      const errors = budgetFailures
-        .filter((failure) => failure.severity === 'error')
-        .map(({ message }) => message);
-      const warnings = budgetFailures
-        .filter((failure) => failure.severity !== 'error')
-        .map(({ message }) => message);
-
-      await printWarningsAndErrorsToConsoleAndAddToResult(
-        context,
-        executionResult,
-        warnings,
-        errors,
-      );
+    for (const { message, severity } of budgetFailures) {
+      if (severity === 'error') {
+        executionResult.addError(message);
+      } else {
+        executionResult.addWarning(message);
+      }
     }
   }
 
@@ -234,7 +226,7 @@ export async function executeBuild(
   // Check metafile for CommonJS module usage if optimizing scripts
   if (optimizationOptions.scripts) {
     const messages = checkCommonJSModules(metafile, options.allowedCommonJsDependencies);
-    await logMessages(context, { warnings: messages });
+    executionResult.addWarnings(messages);
   }
 
   // Copy assets
@@ -255,12 +247,10 @@ export async function executeBuild(
 
   // Perform i18n translation inlining if enabled
   let prerenderedRoutes: string[];
-  let errors: string[];
-  let warnings: string[];
   if (i18nOptions.shouldInline) {
     const result = await inlineI18n(options, executionResult, initialFiles);
-    errors = result.errors;
-    warnings = result.warnings;
+    executionResult.addErrors(result.errors);
+    executionResult.addWarnings(result.warnings);
     prerenderedRoutes = result.prerenderedRoutes;
   } else {
     const result = await executePostBundleSteps(
@@ -272,15 +262,13 @@ export async function executeBuild(
       i18nOptions.hasDefinedSourceLocale ? i18nOptions.sourceLocale : undefined,
     );
 
-    errors = result.errors;
-    warnings = result.warnings;
+    executionResult.addErrors(result.errors);
+    executionResult.addWarnings(result.warnings);
     prerenderedRoutes = result.prerenderedRoutes;
     executionResult.outputFiles.push(...result.additionalOutputFiles);
     executionResult.assetFiles.push(...result.additionalAssets);
   }
 
-  await printWarningsAndErrorsToConsoleAndAddToResult(context, executionResult, warnings, errors);
-
   if (prerenderOptions) {
     executionResult.addOutputFile(
       'prerendered-routes.json',
@@ -307,6 +295,8 @@ export async function executeBuild(
     estimatedTransferSizes,
   );
 
+  await logMessages(context, executionResult);
+
   // Write metafile if stats option is enabled
   if (options.stats) {
     executionResult.addOutputFile(
@@ -318,20 +308,3 @@ export async function executeBuild(
 
   return executionResult;
 }
-
-async function printWarningsAndErrorsToConsoleAndAddToResult(
-  context: BuilderContext,
-  executionResult: ExecutionResult,
-  warnings: string[],
-  errors: string[],
-): Promise<void> {
-  const errorMessages = errors.map((text) => ({ text, location: null }));
-  if (errorMessages.length) {
-    executionResult.addErrors(errorMessages);
-  }
-
-  await logMessages(context, {
-    errors: errorMessages,
-    warnings: warnings.map((text) => ({ text, location: null })),
-  });
-}

packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts

@@ -38,6 +38,7 @@ export class ExecutionResult {
   outputFiles: BuildOutputFile[] = [];
   assetFiles: BuildOutputAsset[] = [];
   errors: (Message | PartialMessage)[] = [];
+  warnings: (Message | PartialMessage)[] = [];
   externalMetadata?: ExternalResultMetadata;
 
   constructor(
@@ -53,8 +54,32 @@ export class ExecutionResult {
     this.assetFiles.push(...assets);
   }
 
-  addErrors(errors: (Message | PartialMessage)[]): void {
-    this.errors.push(...errors);
+  addError(error: PartialMessage | string): void {
+    if (typeof error === 'string') {
+      this.errors.push({ text: error, location: null });
+    } else {
+      this.errors.push(error);
+    }
+  }
+
+  addErrors(errors: (PartialMessage | string)[]): void {
+    for (const error of errors) {
+      this.addError(error);
+    }
+  }
+
+  addWarning(error: PartialMessage | string): void {
+    if (typeof error === 'string') {
+      this.warnings.push({ text: error, location: null });
+    } else {
+      this.warnings.push(error);
+    }
+  }
+
+  addWarnings(errors: (PartialMessage | string)[]): void {
+    for (const error of errors) {
+      this.addWarning(error);
+    }
   }
 
   /**