refactor(@angular-devkit/build-angular): format post-bundle diagnostic messages for esbuild builders

Any errors or warnings generated from post-bundling steps of the build will now be formatted and displayed
in a similar manner to the bundling errors and warnings. This should be most noticeable with bundle budgets.

(cherry picked from commit f4aebf5)

Author: clydin

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

@@ -206,12 +206,15 @@ export async function executeBuild(
   if (options.budgets) {
     const compatStats = generateBudgetStats(metafile, initialFiles);
     budgetFailures = [...checkBudgets(options.budgets, compatStats, true)];
-    for (const { severity, message } of budgetFailures) {
-      if (severity === 'error') {
-        context.logger.error(message);
-      } else {
-        context.logger.warn(message);
-      }
+    if (budgetFailures.length > 0) {
+      await logMessages(context, {
+        errors: budgetFailures
+          .filter((failure) => failure.severity === 'error')
+          .map((failure) => ({ text: failure.message, location: null })),
+        warnings: budgetFailures
+          .filter((failure) => failure.severity !== 'error')
+          .map((failure) => ({ text: failure.message, location: null })),
+      });
     }
   }
 
@@ -255,7 +258,7 @@ export async function executeBuild(
     );
   }
 
-  printWarningsAndErrorsToConsole(context, warnings, errors);
+  await printWarningsAndErrorsToConsole(context, warnings, errors);
   const changedFiles =
     rebuildState && executionResult.findChangedFiles(rebuildState.previousOutputHashes);
   logBuildStats(
@@ -279,15 +282,13 @@ export async function executeBuild(
   return executionResult;
 }
 
-function printWarningsAndErrorsToConsole(
+async function printWarningsAndErrorsToConsole(
   context: BuilderContext,
   warnings: string[],
   errors: string[],
-): void {
-  for (const error of errors) {
-    context.logger.error(error);
-  }
-  for (const warning of warnings) {
-    context.logger.warn(warning);
-  }
+): Promise<void> {
+  await logMessages(context, {
+    errors: errors.map((text) => ({ text, location: null })),
+    warnings: warnings.map((text) => ({ text, location: null })),
+  });
 }

packages/angular_devkit/build_angular/src/builders/extract-i18n/application-extraction.ts

@@ -37,6 +37,7 @@ export async function extractMessages(
   buildOptions.optimization = false;
   buildOptions.sourceMap = { scripts: true, vendor: true };
   buildOptions.localize = false;
+  buildOptions.budgets = undefined;
 
   let build;
   if (builderName === '@angular-devkit/build-angular:application') {

tests/legacy-cli/e2e/tests/i18n/extract-ivy.ts

@@ -43,7 +43,7 @@ export default async function () {
   // Should not show any warnings when extracting
   const { stderr: message5 } = await ng('extract-i18n');
   if (message5.includes('WARNING')) {
-    throw new Error('Expected no warnings to be shown');
+    throw new Error('Expected no warnings to be shown. STDERR:\n' + message5);
   }
 
   await expectFileToMatch('messages.xlf', 'Hello world');