refactor(@angular-devkit/build-angular): move TypeScript diagnostic conversion into compilation base

When using the esbuild-based browser application builder, TypeScript diagnostics are now converted
into esbuild messages within the compilation base class instead of the plugin. This helps further
isolate the TypeScript details within the compilation classes. Additionally, this provides diagnostic
objects that can be more easily serialized earlier in the build process.

Author: clydin

packages/angular_devkit/build_angular/src/tools/esbuild/angular/compilation/angular-compilation.ts

@@ -7,10 +7,12 @@
  */
 
 import type ng from '@angular/compiler-cli';
-import type ts from 'typescript';
+import type { PartialMessage } from 'esbuild';
+import ts from 'typescript';
 import { loadEsmModule } from '../../../../utils/load-esm';
 import { profileSync } from '../../profiling';
 import type { AngularHostOptions } from '../angular-host';
+import { convertTypeScriptDiagnostic } from '../diagnostics';
 
 export interface EmitFileResult {
   filename: string;
@@ -61,7 +63,24 @@ export abstract class AngularCompilation {
     referencedFiles: readonly string[];
   }>;
 
-  abstract collectDiagnostics(): Iterable<ts.Diagnostic>;
-
   abstract emitAffectedFiles(): Iterable<EmitFileResult>;
+
+  protected abstract collectDiagnostics(): Iterable<ts.Diagnostic>;
+
+  async diagnoseFiles(): Promise<{ errors?: PartialMessage[]; warnings?: PartialMessage[] }> {
+    const result: { errors?: PartialMessage[]; warnings?: PartialMessage[] } = {};
+
+    profileSync('NG_DIAGNOSTICS_TOTAL', () => {
+      for (const diagnostic of this.collectDiagnostics()) {
+        const message = convertTypeScriptDiagnostic(diagnostic);
+        if (diagnostic.category === ts.DiagnosticCategory.Error) {
+          (result.errors ??= []).push(message);
+        } else {
+          (result.warnings ??= []).push(message);
+        }
+      }
+    });
+
+    return result;
+  }
 }

packages/angular_devkit/build_angular/src/tools/esbuild/angular/compiler-plugin.ts

@@ -31,7 +31,6 @@ import {
 import { BundleStylesheetOptions, bundleComponentStylesheet } from '../stylesheets/bundle-options';
 import { AngularHostOptions } from './angular-host';
 import { AngularCompilation, AotCompilation, JitCompilation, NoopCompilation } from './compilation';
-import { convertTypeScriptDiagnostic } from './diagnostics';
 import { setupJitPluginCallbacks } from './jit-plugin-callbacks';
 
 const USING_WINDOWS = platform() === 'win32';
@@ -258,16 +257,13 @@ export function createCompilerPlugin(
           return result;
         }
 
-        profileSync('NG_DIAGNOSTICS_TOTAL', () => {
-          for (const diagnostic of compilation.collectDiagnostics()) {
-            const message = convertTypeScriptDiagnostic(diagnostic);
-            if (diagnostic.category === ts.DiagnosticCategory.Error) {
-              (result.errors ??= []).push(message);
-            } else {
-              (result.warnings ??= []).push(message);
-            }
-          }
-        });
+        const diagnostics = await compilation.diagnoseFiles();
+        if (diagnostics.errors) {
+          (result.errors ??= []).push(...diagnostics.errors);
+        }
+        if (diagnostics.warnings) {
+          (result.warnings ??= []).push(...diagnostics.warnings);
+        }
 
         // Update TypeScript file output cache for all affected files
         profileSync('NG_EMIT_TS', () => {