fix(@angular/build): Ensure disposal of close-javascript-transformer

[Aukevanoost]

The onDispose callback doesn't close the javascriptTransformer correctly yet. This ensures that all worker pools are cleaned after a disposal.

PR Checklist

Please check to confirm your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular-cli/blob/main/CONTRIBUTING.md#-commit-message-guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Currently the javascriptTransformer is not closed explicitly.

Issue Number: N/A

What is the new behavior?

Like all other parts (compilation and cache), the javascriptTransformer is now closed explicitly.

Does this PR introduce a breaking change?

• Yes
• No

Other information

[alan-agius4]

LGTM, just one NIT

[Aukevanoost]

on it!

[alan-agius4]

LGTM, thanks for this.

[hybrist]

This PR was merged into the repository. The changes were merged into the following branches:

• main: 2e7227b
• 21.0.x: 9b02ab2

[Aukevanoost]

Quick question to @hybrist and @alan-agius4

Would it be possible to also publish this fix in ng v20.3.x?

[alan-agius4]

Version 20 is in LTS and only security fixes are applied.

[judsonmusic]

I have created a patch that works for angular 19, 20 etc.

create a file called angular-patch-compiler.js in the project root

/**
 * Angular 19 esbuild cleanup patch
 *
 * Fixes a known issue where JavaScriptTransformer and related
 * resources are not always disposed during ng serve shutdowns,
 * especially in Native Federation + Windows environments.
 *
 * Safe to remove once Angular fixes this upstream.
 */

const path = require('path');

try {
  const compilerPath = path.join(
    process.cwd(),
    'node_modules',
    '@angular',
    'build',
    'src',
    'tools',
    'esbuild',
    'angular',
    'compiler-plugin.js',
  );

  const compilerModule = require(compilerPath);
  const originalCreate = compilerModule.createCompilerPlugin;

  compilerModule.createCompilerPlugin = function (...args) {
    const plugin = originalCreate(...args);
    const originalSetup = plugin.setup;

    plugin.setup = function (build) {
      originalSetup.call(this, build);

      build.onDispose(() => {
        try {
          const { javascriptTransformer, cacheStore, compilation, sharedTSCompilationState } = compilerModule;

          javascriptTransformer?.close?.();
          cacheStore?.close?.();
          compilation?.close?.();
          sharedTSCompilationState?.dispose?.();
        } catch (e) {
          console.error('[Angular Cleanup Patch] dispose failed:', e);
        }
      });
    };

    return plugin;
  };

  console.log('✔ Angular compiler cleanup patch applied');
} catch (e) {
  console.warn('⚠ Angular cleanup patch skipped:', e?.message ?? e);
}

Then use a start command like:
"start": "node patch-angular-compiler.js && npx ng run <mfe-name>:serve-original:local",

Angular.json

make sure you have serve and serve-original with targets:

"serve": {
          "builder": "@angular-architects/native-federation:build",
          "options": {
            "rebuildDelay": 100,
            "dev": true
          },
          "configurations": {
            "local": {
              "target": "<mfe-name>:serve-original:local"
            },
            "deployed": {
              "target": "<mfe-name>:serve-original:deployed"
            }
          },
          "defaultConfiguration": "local"
        },
        "serve-original": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "deployed": {
              "buildTarget": "<mfe-name>:esbuild:deployed"
            },
            "local": {
              "buildTarget": "<mfe-name>:esbuild:local"
            }
          },
          "defaultConfiguration": "local",
          "options": {
            "port": 4210,
            "open": true
          }
        },

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}