Cypress 12.4.0 does not work with @angular-devkit/build-angular 16.1.0

[blazekv]

Current behavior

When running pnpx cypress run --component --headless on Angular 16.1.0 project fails with error message

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Desired behavior

It should run without error.

Test code to reproduce

Package.json devDepenencies:

"devDependencies": {
    "@angular-devkit/build-angular": "^16.1.0",
    "@angular-devkit/core": "^16.1.0",
    "@angular-eslint/builder": "16.0.3",
    "@angular-eslint/eslint-plugin": "16.0.3",
    "@angular-eslint/eslint-plugin-template": "16.0.3",
    "@angular-eslint/schematics": "16.0.3",
    "@angular-eslint/template-parser": "16.0.3",
    "@angular/cli": "~16.1.0",
    "@angular/compiler-cli": "^16.1.0",
    "@angular/localize": "16.1.0",
    "@cypress/schematic": "^2.5.0",
    "@ngrx/eslint-plugin": "^16.0.1",
    "@ngrx/schematics": "^16.0.1",
    "@types/jasmine": "~4.3.1",
    "@types/luxon": "^3.3.0",
    "@typescript-eslint/eslint-plugin": "^5.59.2",
    "@typescript-eslint/parser": "^5.59.2",
    "cypress": "^12.14.0",
    "eslint": "^8.39.0",
    "husky": "^8.0.3",
    "jasmine-core": "~4.5.0",
    "json-server": "^0.17.3",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "lint-staged": "^13.2.2",
    "prettier": "2.8.1",
    "pretty-quick": "^3.1.3",
    "typescript": "~5.1.3",
    "webpack-bundle-analyzer": "^4.8.0"
  }

Cypress Version

12.14.0

Node version

v18.13.0

Operating System

Windows 10.0.22621

Debug Logs

> pnpx cypress run --component --headless --quiet

.../Local/pnpm/store/v3/tmp/dlx-30612    | +174 +++++++++++++++++
.../Local/pnpm/store/v3/tmp/dlx-30612    | Progress: resolved 174, reused 174, downloaded 0, added 174, done


DevTools listening on ws://127.0.0.1:57002/devtools/browser/990da04b-a8cb-4b38-a17e-0ebb7e09fe0c
Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Error: Could not resolve "@angular-devkit/build-angular/src/webpack/configs/common.js". Do you have "@angular-devkit/build-angular" and "@angular-devkit/core" installed?
    at Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:92:19
    at Array.map (<anonymous>)
    at getAngularCliModules (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:86:151)
    at getAngularCliWebpackConfig (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:140:107)
    at angularHandler (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:186:33)
    at getPreset (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:91:62)
    at Function.devServer.create (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:108:67)
    at Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:25:40
    at new Promise (<anonymous>)
    at devServer (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\devServer.js:24:12)
    at Object.handler (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:166:24)
    at invoke (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_plugins.js:183:18)
    at Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\util.js:59:14
    at tryCatcher (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\bluebird\js\release\util.js:16:23)
    at Function.Promise.attempt.Promise.try (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\bluebird\js\release\method.js:39:29)
    at Object.wrapChildPromise (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\util.js:58:23)
    at Object.wrap (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\dev-server.js:18:8)
    at RunPlugins.execute (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_plugins.js:155:26)
    at EventEmitter.<anonymous> (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_plugins.js:56:12)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:489:12)
    at process.<anonymous> (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\util.js:33:22)
    at process.emit (node:events:513:28)
    at process.emit (node:domain:489:12)
    at process.emit.sharedData.processEmitHook.installedValue [as emit] (Local\Cypress\Cache\12.14.0\Cypress\resources\app\node_modules\@cspotcode\source-map-support\source-map-support.js:745:40)
    at emit (node:internal/child_process:937:14)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
 ERROR  Command failed with exit code 1: cypress run --component --headless --quiet

pnpm: Command failed with exit code 1: cypress run --component --headless --quiet
    at makeError (Local\pnpm\global\5\.pnpm\pnpm@8.5.0\node_modules\pnpm\dist\pnpm.cjs:24242:17)
    at handlePromise (Local\pnpm\global\5\.pnpm\pnpm@8.5.0\node_modules\pnpm\dist\pnpm.cjs:24813:33)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.handler [as dlx] (Local\pnpm\global\5\.pnpm\pnpm@8.5.0\node_modules\pnpm\dist\pnpm.cjs:223291:7)
    at async Local\pnpm\global\5\.pnpm\pnpm@8.5.0\node_modules\pnpm\dist\pnpm.cjs:232627:21
    at async main (Local\pnpm\global\5\.pnpm\pnpm@8.5.0\node_modules\pnpm\dist\pnpm.cjs:232594:34)
    at async runPnpm (Local\pnpm\global\5\.pnpm\pnpm@8.5.0\node_modules\pnpm\dist\pnpm.cjs:232849:5)
    at async Local\pnpm\global\5\.pnpm\pnpm@8.5.0\node_modules\pnpm\dist\pnpm.cjs:232841:7
 ELIFECYCLE  Command failed with exit code 1.

Process finished with exit code 1

Other

Problem is that in version @angular-devkit/build-angular 16.1.0 was migrated these two files

'@angular-devkit/build-angular/src/webpack/configs/common.js',
'@angular-devkit/build-angular/src/webpack/configs/styles.js',

and paths are hardcoded here https://github.com/cypress-io/cypress/blob/develop/npm/webpack-dev-server/src/helpers/angularHandler.ts#L170

Files were moved into different directory - see link on compared version 16.1.0 and 16.0.6 angular/angular-cli@16.0.6...16.1.0#diff-eaf54d87b3a94fb3d67e4a84c02d46e4c70d67bc0c37baa80957c7cd0637c029

[blazekv]

I found out, there is already prepared PR for this 🤦 #27030

[cypress-bot]

Released in 12.16.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.16.0, please open a new issue.