angular/angular-cli · error · Error

Only the "application" and "browser-esbuild" builders suppor

Error message

Only the "application" and "browser-esbuild" builders support plugins.

What it means

Build plugins (extensions.buildPlugins) are only supported by the esbuild-based builders (application, browser-esbuild). When the resolved builder is webpack-based, the dev-server throws to make clear the plugins would never be applied rather than silently dropping them.

Source

Thrown at packages/angular_devkit/build_angular/src/builders/dev-server/builder.ts:132

                  : buildApplicationInternal(options, context, { codePlugins });
              },
              context,
              transforms,
              extensions,
            ),
          ),
        );
      }

      // Warn if the initial options provided by the user enable prebundling with Webpack-based builders
      if (options.prebundle) {
        context.logger.warn(
          `Prebundling has been configured but will not be used because it is not supported by the "${builderName}" builder.`,
        );
      }

      if (extensions?.buildPlugins?.length) {
        throw new Error('Only the "application" and "browser-esbuild" builders support plugins.');
      }
      if (extensions?.middleware?.length) {
        throw new Error(
          'Only the "application" and "browser-esbuild" builders support middleware.',
        );
      }

      // Webpack based build systems default to false for hmr option
      normalizedOptions.hmr ??= false;

      // Use Webpack for all other browser targets
      return defer(() => import('./webpack-server')).pipe(
        switchMap(({ serveWebpackBrowser }) =>
          serveWebpackBrowser(normalizedOptions, builderName, context, transforms),
        ),
      );
    }),
  );

View on GitHub (pinned to bb72145f9a)

Solutions

  1. Migrate the build target to '@angular/build:application' or 'browser-esbuild' so plugins are supported.
  2. Remove buildPlugins from the extensions passed to the dev-server.
  3. If plugins are conditionally added, guard them with isEsbuildBased(builderName) before passing.
  4. Check which builder the build target resolves to (options.builderType / angular.json) and align tooling accordingly.

Example fix

// before
execute(opts, { builderSelector }, { buildPlugins: [myPlugin()] })
// after
if (isEsbuildBased(builderName)) { extensions.buildPlugins = [myPlugin()]; }
Defensive patterns

Strategy: validation

Validate before calling

const ESBUILD_BASED = new Set(['@angular/build:application', '@angular-devkit/build-angular:application', '@angular-devkit/build-angular:browser-esbuild']);
if (extensions?.buildPlugins?.length && !ESBUILD_BASED.has(builderName)) {
  throw new Error(`buildPlugins require an esbuild-based builder, got ${builderName}`);
}

Type guard

const supportsPlugins = (builderName: string): boolean =>
  /application|browser-esbuild/.test(builderName);

Try / catch

try {
  await startDevServer(options, extensions);
} catch (e) {
  if (String(e.message).includes('support plugins')) {
    // drop plugins or migrate build target to application builder
  }
  throw e;
}

Prevention

When it happens

Trigger: Passing extensions: { buildPlugins: [...] } into the dev-server execute() while the project's build target resolves to a webpack builder (browser); scheduling the dev-server programmatically with build plugins against a webpack-based project; a builderSelector that selects the webpack builder despite plugins being supplied.

Common situations: Using Angular build plugins (e.g. custom esbuild plugins for env injection) in a project that still uses the legacy browser builder; shared internal tooling that always attaches plugins regardless of builder; partial migration where tests use webpack builder but dev tooling assumes esbuild.

Related errors


AI-assisted analysis of angular/angular-cli@bb72145f9a (2026-08-30). Data as JSON: /api/errors/560087469122c7ea. Report an issue: GitHub.