Angular CT in Nx monorepo fails when interpreting `angular.json`

[Sjeiti]

Current behavior

When trying to implement component testing in our monorepo I get the error:

TypeError
Your configFile threw an error from: cypress.config.ts

We stopped running your tests because your config file crashed.

..\..\..\..\Users\me\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-dev-server\dist\helpers\angularHandler.js:27:61
  25 |         root,
  26 |         sourceRoot,
> 27 |         buildOptions: Object.assign(Object.assign({}, build.options), ((_a = build.configurations) === null || _a === void 0 ? void 0 : _a.development) || {}),
     |                                                             ^
  28 |     };
  29 | }
  30 | exports.getProjectConfig = getProjectConfig;
  31 | function getAngularBuildOptions(buildOptions, tsConfig) {

We use Nx (14.6.3) to manage our Angular (14.0.1) repo and test with Cypress (10.10.0) through Storybook. The angular.json config the error originates from is generated by the @nrwl/cypress@14.6.3 generator. This means any apps/foo-e2e is configured in angular.json without the foo-e2e/architect/build object (which is what is being destructured in angularHandler.js:23).

Desired behavior

I presume we should be able to use both component testing and regular e2e testing.

Test code to reproduce

Generate an application through Nx with Cypress tests and try to run component testing.

Cypress Version

10.10.0

Node version

16.17.0

Operating System

Windows

Debug Logs

No response

Other

No response

[marktnoonan]

Hi, thanks for this report. It looks like the code around this has changed slightly in Cypress 11+ as component testing has reached GA, but I'm not certain you won't still have this problem. I'm going to route this to the CT team to take a closer look, in the meantime if you get a chance to test the latest version of Cypress it would be helpful to know for sure.

[baus]

Hey team! Please add your planning poker estimate with Zenhub @amehta265 @astone123 @lmiller1990 @marktnoonan @mike-plummer @rockindahizzy @warrensplayer @ZachJW34

[ZachJW34]

Hey @Sjeiti, have you tried using the official Nx schematics for Angular CT testing?

https://nx.dev/packages/angular/generators/cypress-component-configuration

[Sjeiti]

@marktnoonan Good to know... I'll try and see if I have time this week to upgrade and test.

@ZachJW34 I think we did, I'll doublecheck when I test v11

[ChristofFritz]

This exact error appears for us when I tried to add component testing. We don't have an NX monorepo though.

[ChristofFritz]

But what we have is: Multiple angular projects in one. So I set the sourceRoot in the devServer options in the cypress.config.ts to the "newProjectRoot" of the angular.json and now it seems to work.

[ZachJW34]

@ChristofFritz could you post of a code snippet of what you did for reference? We have https://github.com/cypress-io/cypress/pull/25002 so wondering if a fix there will fix what you ran into. Looks like you've found how to customize the projectConfig you can pass into the dev-server, but would like to better know your project structure to see if there is something we can improve. We would at the minimum improve our error message in situations like this.

@Sjeiti were you able to double check? Not sure if your issue falls on our side or Nx.

[ChristofFritz]

Ok I'll try.

Our angular.json looks somewhat like this:

"newProjectRoot": "projects",
"projects": {
  "all": { ... },
  "project1": { ... },
  "project2": { ... },
  "project3": { ... },
  "project4": { ... },
  "project5": { ... }
}

Important here is the "newProjectRoot" key. This defines the directory where our angular projects are relative to the angular.json

Our component test config in the cypress.config.ts looks like this:

  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      options: {
        projectConfig: {
          root: './',
          sourceRoot: './projects',
          buildOptions: {}
        }
      }
    }
  }

Note the sourceRoot being equal to the newProjectRoot.

But this sadly hadn't been the end of our problems. The component tests still wouldn't run.

My next step was updating to Angular 15 and after that the component tests worked flawlessly.

So Cypress 11 only works with Angular 15 for us.

[Sjeiti]

@ZachJW34 I did try a couple of hours but ran in to issues trying to run the Nx generator. So I tried updating Cypress and configuring component testing manually, but kept failing. It could be that we're still on Nx 14, so I was planning to test everything in a clean install. Didn't get around to that yet; too much end-of-year work.

[lmiller1990]

Is there a minimal example for this issue @Sjeiti @ChristofFritz? If the bug is occurring when using an Nx generator, we can't fix that directly here. Is anyone able to provide a reproduction outside of an Nx configured monorepo?

It looks like there might actually be two separate issues here (one in Nx configuration, one outside of it). In the OP, it looks like I need to setup Nx and I'll see it; is there a specific docs/guide to follow? There's quite a few ways to get Nx + Angular setup (eg, create Angular project, and Nx after; create Nx repo, add Angular, etc).

A minimal reproduction would go a long way in moving this issue forward towards a resolution.

[ChristofFritz]

I’ll assemble a minimal example tomorrow