fix(angular-rspack): speed up watch-mode rebuilds

Rebuilds transformed ALL Angular-emitted files through JavaScriptTransformer
eagerly in buildAndAnalyze, even when only one file changed. Now transform
lazily in the loader (esbuild's onLoad pattern) so only files Rspack actually
requests are transformed.

Also align component stylesheet bundler with Angular CLI by enabling
incremental caching in watch mode, and move JavaScriptTransformer.close()
from the per-build emit hook to the shutdown hook so worker threads persist
across rebuilds.

Author: leosvelperez

packages/angular-rspack-compiler/src/compilation/build-and-analyze.ts

@@ -4,6 +4,14 @@ import { AngularCompilation } from '../models';
 
 const JS_TS_FILE_PATTERN = /\.[cm]?[jt]sx?$/;
 
+/**
+ * Cache of raw emitted content from Angular compilation.
+ * JS/TS transformation happens lazily in the Rspack loader, matching
+ * esbuild's onLoad architecture where the bundler only transforms
+ * files its dependency graph requires.
+ */
+export const rawEmitCache = new Map<string, string>();
+
 export async function buildAndAnalyze(
   angularCompilation: AngularCompilation,
   typescriptFileCache: Map<string, string | Uint8Array>,
@@ -15,24 +23,25 @@ export async function buildAndAnalyze(
   } of await angularCompilation.emitAffectedFiles()) {
     const normalizedFilename = normalize(filename.replace(/^[A-Z]:/, ''));
 
-    // Skip JavaScript transformation for non-JS/TS files (JSON, CSS, etc.)
-    // Let Rspack handle these through its native module rules
+    const text =
+      typeof contents === 'string'
+        ? contents
+        : Buffer.from(contents).toString();
+
+    // Non-JS/TS files (JSON, CSS, etc.) go directly to the cache.
     if (!JS_TS_FILE_PATTERN.test(normalizedFilename)) {
-      const text =
-        typeof contents === 'string'
-          ? contents
-          : Buffer.from(contents).toString();
       typescriptFileCache.set(normalizedFilename, text);
       continue;
     }
 
-    await javascriptTransformer
-      .transformData(normalizedFilename, contents, true, false)
-      .then((contents) => {
-        typescriptFileCache.set(
-          normalizedFilename,
-          Buffer.from(contents).toString()
-        );
-      });
+    // Store raw emitted content for lazy transformation in the loader.
+    // Invalidate the transformed cache when raw content changes so the
+    // loader re-transforms on next access.
+    const previousRaw = rawEmitCache.get(normalizedFilename);
+    rawEmitCache.set(normalizedFilename, text);
+
+    if (previousRaw !== text) {
+      typescriptFileCache.delete(normalizedFilename);
+    }
   }
 }

packages/angular-rspack-compiler/src/compilation/setup-compilation.ts

@@ -27,6 +27,7 @@ export interface SetupCompilationOptions {
   hasServer?: boolean;
   includePaths?: string[];
   sass?: Sass;
+  watch?: boolean;
 }
 
 export const DEFAULT_NG_COMPILER_OPTIONS: ts.CompilerOptions = {
@@ -113,7 +114,7 @@ export async function setupCompilation(
       tailwindConfiguration,
     },
     options.inlineStyleLanguage,
-    false
+    !!options.watch
   );
 
   return {

packages/angular-rspack-compiler/src/compilation/setup-with-angular-compilation.ts

@@ -25,6 +25,12 @@ export async function setupCompilationWithAngularCompilation(
     options.hasServer,
     false
   );
+
+  // Invalidate stylesheet bundler cache for modified files on rebuilds
+  if (modifiedFiles) {
+    componentStylesheetBundler.invalidate(modifiedFiles);
+  }
+
   modifiedFiles ??= new Set(rootNames);
 
   const fileReplacements: Record<string, string> =

packages/angular-rspack/src/lib/models/augmented-compilation.ts

@@ -10,6 +10,7 @@ export const NG_RSPACK_SYMBOL_NAME = 'NG_RSPACK_BUILD';
 export type NG_RSPACK_COMPILATION_STATE = {
   javascriptTransformer: JavaScriptTransformer;
   typescriptFileCache: SourceFileCache['typeScriptFileCache'];
+  rawEmitCache: Map<string, string>;
   i18n?: I18nOptions;
 };
 export type NgRspackCompilation = Compilation & {

packages/angular-rspack/src/lib/plugins/angular-rspack-plugin.ts

@@ -6,6 +6,7 @@ import {
 } from '@angular/build/private';
 import {
   buildAndAnalyze,
+  rawEmitCache,
   DiagnosticModes,
   JavaScriptTransformer,
   SourceFileCache,
@@ -127,7 +128,8 @@ export class AngularRspackPlugin implements RspackPluginInstance {
                 compiler.options.resolve.tsConfig,
                 watchingModifiedFiles.size > 0
                   ? watchingModifiedFiles
-                  : undefined
+                  : undefined,
+                true
               );
 
               await buildAndAnalyze(
@@ -266,6 +268,13 @@ export class AngularRspackPlugin implements RspackPluginInstance {
         }
       }
 
+      callback();
+    });
+
+    // Clean up worker threads when the compiler shuts down, not on every rebuild.
+    // Angular CLI does the same — JavaScriptTransformer.close() is only called in
+    // esbuild's onDispose, not after each incremental build.
+    compiler.hooks.shutdown.tapAsync(PLUGIN_NAME, async (callback) => {
       await this.#javascriptTransformer.close();
       callback();
     });
@@ -358,6 +367,7 @@ export class AngularRspackPlugin implements RspackPluginInstance {
         javascriptTransformer: this
           .#javascriptTransformer as unknown as JavaScriptTransformer,
         typescriptFileCache: this.#sourceFileCache.typeScriptFileCache,
+        rawEmitCache,
         i18n: this.#i18n,
       });
     });
@@ -410,7 +420,8 @@ export class AngularRspackPlugin implements RspackPluginInstance {
   private async setupCompilation(
     root: string,
     tsConfig: RspackOptionsNormalized['resolve']['tsConfig'],
-    modifiedFiles?: Set<string>
+    modifiedFiles?: Set<string>,
+    watch = false
   ) {
     const tsconfigPath = tsConfig
       ? typeof tsConfig === 'string'
@@ -433,6 +444,7 @@ export class AngularRspackPlugin implements RspackPluginInstance {
         hasServer: this.#_options.hasServer,
         includePaths: this.#_options.stylePreprocessorOptions?.includePaths,
         sass: this.#_options.stylePreprocessorOptions?.sass,
+        watch,
       },
       this.#sourceFileCache,
       this.#angularCompilation,

packages/angular-rspack/src/lib/plugins/loaders/angular-transform.loader.spec.ts

@@ -23,9 +23,15 @@ describe('angular-transform.loader', () => {
   const callback = vi.fn();
   const addDependency = vi.fn();
   const typescriptFileCache = new Map<string, string | Buffer>();
+  const rawEmitCache = new Map<string, string>();
+  const javascriptTransformer = {
+    transformData: vi.fn(),
+  };
   const _compilation = {
     [NG_RSPACK_SYMBOL_NAME]: () => ({
       typescriptFileCache,
+      rawEmitCache,
+      javascriptTransformer,
     }),
   } as unknown as NgRspackCompilation;
   const thisValue = {

packages/angular-rspack/src/lib/plugins/loaders/angular-transform.loader.ts

@@ -28,9 +28,9 @@ export default function loader(
   ) {
     callback(null, content);
   } else {
-    const { typescriptFileCache } = (this._compilation as NgRspackCompilation)[
-      NG_RSPACK_SYMBOL_NAME
-    ]();
+    const { typescriptFileCache, javascriptTransformer, rawEmitCache } = (
+      this._compilation as NgRspackCompilation
+    )[NG_RSPACK_SYMBOL_NAME]();
 
     const request = this.resourcePath.replace(/^[A-Z]:/, '');
     const normalizedRequest = normalize(request);
@@ -48,13 +48,32 @@ export default function loader(
       this.addDependency(absoluteFileUrl);
     }
 
-    const contents = typescriptFileCache.get(normalizedRequest);
-    if (contents === undefined) {
-      callback(null, content);
-    } else if (typeof contents === 'string') {
-      callback(null, contents);
-    } else {
-      callback(null, Buffer.from(contents));
+    // Check transformed cache first (fast path)
+    const cached = typescriptFileCache.get(normalizedRequest);
+    if (cached !== undefined) {
+      if (typeof cached === 'string') {
+        callback(null, cached);
+      } else {
+        callback(null, Buffer.from(cached));
+      }
+      return;
     }
+
+    // Check raw emit cache — transform lazily (like esbuild's onLoad)
+    const raw = rawEmitCache.get(normalizedRequest);
+    if (raw !== undefined) {
+      javascriptTransformer
+        .transformData(normalizedRequest, raw, true, false)
+        .then((transformed: Uint8Array) => {
+          const text = Buffer.from(transformed).toString();
+          typescriptFileCache.set(normalizedRequest, text);
+          callback(null, text);
+        })
+        .catch((err: Error) => callback(err));
+      return;
+    }
+
+    // No Angular compilation output — return original source
+    callback(null, content);
   }
 }