Define, webpack transforms and esbuild plugins are not supported in v19 Karma Buillder

[chihab]

Command

test

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

v18

Description

There is no way to pass in webpack transforms or esbuild plugins or define to the internal Angular builders used in Karma.

Browser builder

When using webpack (browser) builder, webpack transforms are ignored:
https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/karma/browser_builder.ts#L37

I guess they should be passed in as a third parameter to initializeBrowser

as it used to be passed in in v18 here https://github.com/angular/angular-cli/blob/18.2.x/packages/angular_devkit/build_angular/src/builders/karma/index.ts#L87

Application builder

When using the newly supported esbuild builder in Karma, esbuild plugins and define are not supported
Define option is not supported in Karma builder (neither exposed in the builder schema nor in the builder api)
https://github.com/angular/angular-cli/blob/main/packages/angular_devkit/build_angular/src/builders/karma/application_builder.ts#L354

Regarding the application builder, I am not sure whether it is a feature request or a bug as the application builder support is new.

Question: why are we using an internal builder with a closed configuration rather than using the one defined in angular.json by the user?

Minimal Reproduction

Browser builder

return executeKarmaBuilder(options, context, {
  webpackConfiguration: (webpackConfig) => {
    console.log("webpackConfig", webpackConfig);
    return webpackConfig;
  },
});

Application builder

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "polyfills": ["zone.js", "zone.js/testing"],
    "tsConfig": "tsconfig.spec.json",
    "assets": [
      {
        "glob": "**/*",
        "input": "public"
      }
    ],
    "define": {
      "ENV_MESSAGE": "'Hello from Angular 19'"
    },
    "styles": ["src/styles.css"],
    "scripts": []
  }
}

> ng-app19@0.0.0 test
> ng test

Error: Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(define).

Your Environment

Angular CLI: 19.0.0
Node: 20.13.1
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 19.0.0
... animations, build, cli, common, compiler, compiler-cli, core
... forms, localize, platform-browser, platform-browser-dynamic
... platform-server, router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.0
@angular-devkit/build-angular   19.0.0
@angular-devkit/core            19.0.0
@angular-devkit/schematics      19.0.0
@schematics/angular             19.0.0
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

[jkrems]

Thanks! Clearly broke during the refactor and there was no test to catch it. I have a fix for the regression (webpack config). Once that lands, this likely turns into a duplicate of #28809 which is also about the lack of esbuild config options in the Karma builder.

[alan-agius4]

Closing as per above.

[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.}