angular/angular-cli · error · Error

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

Error message

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

What it means

Dev-server middleware (extensions.middleware) is implemented by the esbuild/vite-based pipeline only. When middleware is supplied but the resolved builder is webpack-based, the dev-server throws rather than silently ignoring the middleware functions.

Source

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

              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),
        ),
      );
    }),
  );
}

async function initialize(

View on GitHub (pinned to bb72145f9a)

Solutions

1. Switch the build target to '@angular/build:application' or 'browser-esbuild' so middleware is supported.
2. Remove middleware from extensions for webpack-based dev-server runs.
3. Gate middleware injection on the builder being esbuild-based.
4. Move webpack dev-server customization to webpackDevServerConfig options (proxy, headers) which the webpack backend does support.

Example fix

// before
execute(opts, { builderSelector }, { middleware: [(req,res,next)=>next()] })
// after
if (isEsbuildBased(builderName)) { extensions.middleware = [(req,res,next)=>next()]; }

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

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

try {
  await startDevServer(options, extensions);
} catch (e) {
  if (String(e.message).includes('support middleware')) {
    // remove middleware or use webpack devServer proxy/options instead
  }
  throw e;
}

When it happens

Trigger: Passing extensions: { middleware: [fn] } to the dev-server execute() while the build target uses a webpack builder (browser); programmatic scheduling of the dev-server with middleware against a webpack-based project; internal tooling that injects mock/proxy middleware unconditionally.

Common situations: Projects migrating from webpack to the application builder where middleware was added but legacy CI configs still select the browser builder; shared dev tooling attaching auth/mock middleware for all projects; mismatch between angular.json builder and custom scheduling code.

Related errors

• The "application" and "browser-esbuild" builders do not supp
• Only the "application" and "browser-esbuild" builders suppor
• Webpack Dev Server configuration was not set.
• Webpack stats build result is required.
• This build is using the application builder but transforms.w

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