setup-ct failing with Angular 13 and Nx v13

[chrisstoy]

I'm trying to configure cypress-angular but am running into this issue: Cannot set property 'demo' of undefined

1. create a new nx workspace named demo-app and an Angular app named demo

~/dev/temp % npx create-nx-workspace@latest
✔ Workspace name (e.g., org name)     · demo-app
✔ What to create in the new workspace · angular
✔ Application name                    · demo
✔ Default stylesheet format           · scss
✔ Use Nx Cloud? (It's free and doesn't require registration.) · No

2. follow setup instructions for nx from here: https://github.com/jscutlery/devkit/tree/main/packages/cypress-angular#-setup

~/dev/temp/demo-app(main|✔) % npm i -D @jscutlery/cypress-angular
~/dev/temp/demo-app(main|✚2) % nx g @jscutlery/cypress-angular:setup-ct --project demo
Cannot set property 'demo' of undefined

Running with --verbose I get the following stack trace:

TypeError: Cannot set property 'demo' of undefined
    at addProjectToNxJson (/Users/chris.stoy/dev/temp/demo-app/node_modules/@jscutlery/cypress-angular/node_modules/@nrwl/devkit/src/generators/project-configuration.js:260:42)
    at setProjectConfiguration (/Users/chris.stoy/dev/temp/demo-app/node_modules/@jscutlery/cypress-angular/node_modules/@nrwl/devkit/src/generators/project-configuration.js:216:9)
    at updateProjectConfiguration (/Users/chris.stoy/dev/temp/demo-app/node_modules/@jscutlery/cypress-angular/node_modules/@nrwl/devkit/src/generators/project-configuration.js:36:5)
    at _updateWorkspaceDefinition (/Users/chris.stoy/dev/temp/demo-app/node_modules/@jscutlery/cypress-angular/src/generators/setup-ct/setup-ct.js:104:45)
    at /Users/chris.stoy/dev/temp/demo-app/node_modules/@jscutlery/cypress-angular/src/generators/setup-ct/setup-ct.js:21:9
    at Generator.next (<anonymous>)
    at /Users/chris.stoy/dev/temp/demo-app/node_modules/tslib/tslib.js:117:75
    at new Promise (<anonymous>)
    at __awaiter (/Users/chris.stoy/dev/temp/demo-app/node_modules/tslib/tslib.js:113:16)
    at setupCtGenerator (/Users/chris.stoy/dev/temp/demo-app/node_modules/@jscutlery/cypress-angular/src/generators/setup-ct/setup-ct.js:8:34)

It appears that this is failing because it is trying to read nx.json to modify the projects, but projects are not defined there in Nx v13. Trying to manually add projects to nx.json yields:

 ERROR  As of Nx 13, project configuration should be moved from nx.json to workspace.json/project.json. Please run "nx format" to fix this.

What is interesting is that, if I create an empty workspace first, and THEN add the angular application, this process seems to work.

[dgrbrady]

Is there a workaround at this time? I have an Angular 13 app in Nx 13 monorepo and even running the default Angular CLI generator fails with the same issue (ng g @jscutlery/cypress-angular:setup-ct --project <app name> vs nx g @jscutlery/cypress-angular:setup-ct --project <app name>)

[edbzn]

I would need to investigate the installation generator, but the repo itself is using Angular 13 and Nx 13 so you can configure it by hand as a workaround.

[dgrbrady]

Thanks for looking into this! If you have the time, could you explain a bit more what you meant by "configure it by hand"? What would need to be configured as a workaround? I could even go off of a general starting point if I knew where to look.

[maxfriedmann]

I guess the issue is related to the NX 13 migration of "moving the projects array from nx.json to workspace.json".

@ maintainers: You probably want to update your @nrwl/devkit dependency so that it will detect if users already did that migration or not.

Workaround working for me:

• open your package.lock file
• search for node_modules/@jscutlery/cypress-angular
• change the dependency version of @nrwl/devkit to e.g. 13.7.3
• remove the entry for "node_modules/@jscutlery/cypress-angular/node_modules/@nrwl/devkit" completely
• npm i again

[edbzn]

The dependency@nrwl/devkit is up to date. I don't reproduce this. Can you confirm it does not occur with the last version?

[maxfriedmann]

@edbzn I was talking about this one: https://github.com/jscutlery/devkit/blob/main/packages/cypress-angular/package.json, I can confirm that the setup-ct step works. I did not get it to run yet though.

[yjaaidi]

Hi @maxfriedmannm, sorry for responding so late. So setu-ct works? What kind of trouble are you getting afterwards?

[Cabinet20]

I have a project on Nx and Angular on v14 and I get the same error. Our mono-repo uses angular.json as the root project file. I manually edited the references in your node_modules folder to change nx.json to angular.json and it "worked" feels hacky though and not sure it won't cause issues down the road.

Any way support can be added for Nx monorepos not using the nx.json file?

[Cabinet20]

I would need to investigate the installation generator, but the repo itself is using Angular 13 and Nx 13 so you can configure it by hand as a workaround.

Is there a guide to manually configuring this? Is it similar to the way it was done on the old GitHub?