feat: support `@angular/build` as an optional replacement for `@angular-devkit/build-angular` in Angular 19 Component Testing

[jcompagner]

Current behavior

Angular 19 doesn't use devkit (webpack) anymore by default. In Cypress 14 I get this error:

Error: Could not resolve "@angular-devkit/build-angular/src/utils/webpack-browser-config.js". Do you have "@angular-devkit/build-angular" and "@angular-devkit/core" installed?
    at C:\Users\jcomp\AppData\Local\Cypress\Cache\14.0.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:106:19
    at Array.map (<anonymous>)
    at getAngularCliModules (C:\Users\jcomp\AppData\Local\Cypress\Cache\14.0.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:100:151)
    at async getAngularCliWebpackConfig (C:\Users\jcomp\AppData\Local\Cypress\Cache\14.0.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:159:101)
    at async angularHandler (C:\Users\jcomp\AppData\Local\Cypress\Cache\14.0.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:205:27)
    at async getPreset (C:\Users\jcomp\AppData\Local\Cypress\Cache\14.0.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:62:20)
    at async Function.devServer.create (C:\Users\jcomp\AppData\Local\Cypress\Cache\14.0.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:79:61)
    at async C:\Users\jcomp\AppData\Local\Cypress\Cache\14.0.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:22:24

because we don't use the webpack builder anymore, we use purely the @angular/build:application builder.

Also the schematics of the angular upgrade from 18 to 19 will remove the npm package: "@angular-devkit/build-angular" and adds the package:
"@angular/build"

Is cypress able to run with the new builder and not webpack?

Desired behavior

cypress should run with the new application builder (esbuild) instead of webpack which is not used anymore by angular itself

Test code to reproduce

here is our component test:
https://github.com/Servoy/servoy-extra-components

here is the angular.json that has the applicaiton builder (of the dummy project used by cypress)

https://github.com/Servoy/servoy-extra-components/blob/master/angular.json#L37

Cypress Version

14

Node version

v22.11.0

Operating System

windows 11

Debug Logs

Other

No response

[AtofStryker]

Hi @jcompagner. Thank you for opening an issue. Unfortunately right now Cypress is still dependent on the @angular-devkit/build-angular package. I believe this is still the default since @angular-devkit/build-angular is scaffolded when invoking an ng new project with the CLI.

I am going to mark this issue as a feature request to support the newer esbuild @angular/build package.

[jfahrenkrug]

@AtofStryker Thank you for looking into this. Actually, the new "application" builder is now the default in any new Angular project, see https://angular.dev/tools/cli/build-system-migration#for-new-applications

[k290]

Can confirm, we fully migrated our systems over to the current best practise. Cypress tests started breaking.

To fix the issue we have re-installed angular-devkit/build-angular for cypress and are running it side-by-side with the new @angular/build

We then also needed to modify the cypress config with this workaround to resolve a path issue:

#28997 (comment)

as suggested here: https://stackoverflow.com/questions/79343057/cypress-and-angular-typeerror-the-paths1-argument-must-be-of-type-string

All is working for us with these workarounds. We are on angular 18 though, not sure if same is true for 19

[kussmaul]

I just updated to angular@19.2 and cypress@14.2 and found Cypress errors similar to @jcompagner and @k290. (E2E tests ran, but component tests crashed). I installed @angular-devkit/core@19 as suggested by #30175 and @k290, and Cypress component tests work again. Thank you!

I have not yet migrated from @angular-devkit/build-angular to @angular/build, but want to (as described in https://angular.dev/tools/cli/build-system-migration#for-existing-applications).

@k290, could you please give more detail (or an example) of how you run them "side-by-side"? Did you edit or add builders in angular.json? Did you change package.json and/or cypress.config.ts?

[jymukendi]

We are having the same issue and we are using @angular/build

[k290]

@k290, could you please give more detail (or an example) of how you run them "side-by-side"? Did you edit or add builders in angular.json? Did you change package.json and/or cypress.config.ts?

@kussmaul I left angular.json alone still using the new build system. package.json has both @angular/build and @angular-devkit/build-angular. cypress.config.ts got the below options added:

   options: {
        projectConfig: {
          root: './',
          sourceRoot: 'src',
          buildOptions: {
            outputPath: 'dist/browser'
          }
        }
      }

[jcompagner]

any progress on this because with Angular 20 this is really now the default

[AtofStryker]

@jcompagner no progress as of recent. Hopefully we get to spike into this soon and see what is involved