search

jscutlery / devkit

Cutleries to help you cook better apps
MIT License
248 stars 15 forks source link

setup-ct failing with Angular 13 and Nx v13 #148

Open chrisstoy opened 2 years ago

chrisstoy commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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:

edbzn commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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

Cabinet20 commented 2 years ago

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 commented 2 years ago

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?