refactor(@angular-devkit/build-angular): isolate typescript usage to compilation worker thread in application builder

To improve initialization type for the application builder, loading of the typescript package as been removed from the
main thread. The parallel TS/NG compilation will instead load typescript during its worker thread startup. The typescript
package is currently large and can take several hundred milliseconds to load.

Author: clydin

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

@@ -8,7 +8,7 @@
 
 import type ng from '@angular/compiler-cli';
 import type { PartialMessage } from 'esbuild';
-import ts from 'typescript';
+import type ts from 'typescript';
 import { loadEsmModule } from '../../../../utils/load-esm';
 import { profileAsync, profileSync } from '../../profiling';
 import type { AngularHostOptions } from '../angular-host';
@@ -22,6 +22,7 @@ export interface EmitFileResult {
 
 export abstract class AngularCompilation {
   static #angularCompilerCliModule?: typeof ng;
+  static #typescriptModule?: typeof ts;
 
   static async loadCompilerCli(): Promise<typeof ng> {
     // This uses a wrapped dynamic import to load `@angular/compiler-cli` which is ESM.
@@ -32,6 +33,12 @@ export abstract class AngularCompilation {
     return AngularCompilation.#angularCompilerCliModule;
   }
 
+  static async loadTypescript(): Promise<typeof ts> {
+    AngularCompilation.#typescriptModule ??= await import('typescript');
+
+    return AngularCompilation.#typescriptModule;
+  }
+
   protected async loadConfiguration(tsconfig: string): Promise<ng.CompilerOptions> {
     const { readConfiguration } = await AngularCompilation.loadCompilerCli();
 
@@ -71,10 +78,14 @@ export abstract class AngularCompilation {
   async diagnoseFiles(): Promise<{ errors?: PartialMessage[]; warnings?: PartialMessage[] }> {
     const result: { errors?: PartialMessage[]; warnings?: PartialMessage[] } = {};
 
+    // Avoid loading typescript until actually needed.
+    // This allows for avoiding the load of typescript in the main thread when using the parallel compilation.
+    const typescript = await AngularCompilation.loadTypescript();
+
     await profileAsync('NG_DIAGNOSTICS_TOTAL', async () => {
       for (const diagnostic of await this.collectDiagnostics()) {
-        const message = convertTypeScriptDiagnostic(diagnostic);
-        if (diagnostic.category === ts.DiagnosticCategory.Error) {
+        const message = convertTypeScriptDiagnostic(typescript, diagnostic);
+        if (diagnostic.category === typescript.DiagnosticCategory.Error) {
           (result.errors ??= []).push(message);
         } else {
           (result.warnings ??= []).push(message);

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

@@ -7,7 +7,7 @@
  */
 
 import type ng from '@angular/compiler-cli';
-import ts from 'typescript';
+import type ts from 'typescript';
 import { AngularHostOptions } from '../angular-host';
 import { AngularCompilation } from './angular-compilation';
 

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

@@ -19,7 +19,6 @@ import assert from 'node:assert';
 import { realpath } from 'node:fs/promises';
 import * as path from 'node:path';
 import { pathToFileURL } from 'node:url';
-import ts from 'typescript';
 import { maxWorkers } from '../../../utils/environment-options';
 import { JavaScriptTransformer } from '../javascript-transformer';
 import { LoadResultCache } from '../load-result-cache';
@@ -234,14 +233,12 @@ export function createCompilerPlugin(
           compilerOptions: { allowJs },
           referencedFiles,
         } = await compilation.initialize(tsconfigPath, hostOptions, (compilerOptions) => {
-          if (
-            compilerOptions.target === undefined ||
-            compilerOptions.target < ts.ScriptTarget.ES2022
-          ) {
+          // target of 9 is ES2022 (using the number avoids an expensive import of typescript just for an enum)
+          if (compilerOptions.target === undefined || compilerOptions.target < 9) {
             // If 'useDefineForClassFields' is already defined in the users project leave the value as is.
             // Otherwise fallback to false due to https://github.com/microsoft/TypeScript/issues/45995
             // which breaks the deprecated `@Effects` NGRX decorator and potentially other existing code as well.
-            compilerOptions.target = ts.ScriptTarget.ES2022;
+            compilerOptions.target = 9;
             compilerOptions.useDefineForClassFields ??= false;
 
             // Only add the warning on the initial build

packages/angular_devkit/build_angular/src/tools/esbuild/angular/diagnostics.ts

@@ -8,13 +8,7 @@
 
 import type { PartialMessage, PartialNote } from 'esbuild';
 import { platform } from 'node:os';
-import {
-  Diagnostic,
-  DiagnosticRelatedInformation,
-  flattenDiagnosticMessageText,
-  getLineAndCharacterOfPosition,
-  getPositionOfLineAndCharacter,
-} from 'typescript';
+import type ts from 'typescript';
 
 /**
  * Converts TypeScript Diagnostic related information into an esbuild compatible note object.
@@ -24,11 +18,12 @@ import {
  * @returns An esbuild diagnostic message as a PartialMessage object
  */
 function convertTypeScriptDiagnosticInfo(
-  info: DiagnosticRelatedInformation,
+  typescript: typeof ts,
+  info: ts.DiagnosticRelatedInformation,
   textPrefix?: string,
 ): PartialNote {
   const newLine = platform() === 'win32' ? '\r\n' : '\n';
-  let text = flattenDiagnosticMessageText(info.messageText, newLine);
+  let text = typescript.flattenDiagnosticMessageText(info.messageText, newLine);
   if (textPrefix) {
     text = textPrefix + text;
   }
@@ -43,23 +38,23 @@ function convertTypeScriptDiagnosticInfo(
 
     // Calculate the line/column location and extract the full line text that has the diagnostic
     if (info.start) {
-      const { line, character } = getLineAndCharacterOfPosition(info.file, info.start);
+      const { line, character } = typescript.getLineAndCharacterOfPosition(info.file, info.start);
       note.location.line = line + 1;
       note.location.column = character;
 
       // The start position for the slice is the first character of the error line
-      const lineStartPosition = getPositionOfLineAndCharacter(info.file, line, 0);
+      const lineStartPosition = typescript.getPositionOfLineAndCharacter(info.file, line, 0);
 
       // The end position for the slice is the first character of the next line or the length of
       // the entire file if the line is the last line of the file (getPositionOfLineAndCharacter
       // will error if a nonexistent line is passed).
-      const { line: lastLineOfFile } = getLineAndCharacterOfPosition(
+      const { line: lastLineOfFile } = typescript.getLineAndCharacterOfPosition(
         info.file,
         info.file.text.length - 1,
       );
       const lineEndPosition =
         line < lastLineOfFile
-          ? getPositionOfLineAndCharacter(info.file, line + 1, 0)
+          ? typescript.getPositionOfLineAndCharacter(info.file, line + 1, 0)
           : info.file.text.length;
 
       note.location.lineText = info.file.text.slice(lineStartPosition, lineEndPosition).trimEnd();
@@ -74,7 +69,10 @@ function convertTypeScriptDiagnosticInfo(
  * @param diagnostic The TypeScript diagnostic to convert.
  * @returns An esbuild diagnostic message as a PartialMessage object
  */
-export function convertTypeScriptDiagnostic(diagnostic: Diagnostic): PartialMessage {
+export function convertTypeScriptDiagnostic(
+  typescript: typeof ts,
+  diagnostic: ts.Diagnostic,
+): PartialMessage {
   let codePrefix = 'TS';
   let code = `${diagnostic.code}`;
   if (diagnostic.source === 'ngtsc') {
@@ -84,13 +82,14 @@ export function convertTypeScriptDiagnostic(diagnostic: Diagnostic): PartialMess
   }
 
   const message: PartialMessage = convertTypeScriptDiagnosticInfo(
+    typescript,
     diagnostic,
     `${codePrefix}${code}: `,
   );
 
   if (diagnostic.relatedInformation?.length) {
     message.notes = diagnostic.relatedInformation.map((info) =>
-      convertTypeScriptDiagnosticInfo(info),
+      convertTypeScriptDiagnosticInfo(typescript, info),
     );
   }
 

packages/angular_devkit/build_angular/src/tools/esbuild/angular/source-file-cache.ts

@@ -9,7 +9,7 @@
 import { platform } from 'node:os';
 import * as path from 'node:path';
 import { pathToFileURL } from 'node:url';
-import ts from 'typescript';
+import type ts from 'typescript';
 import { MemoryLoadResultCache } from '../load-result-cache';
 
 const USING_WINDOWS = platform() === 'win32';