Issue with Instrumentation of Code Coverage for my Angular V17 Project

[AndrewTran03]

Link to bug demonstration repository

https://github.com/AndrewTran03/MEAN-Stack-Application-Config.git

Expected Behavior

• I may be new to using Angular with Cypress, but I should expect the .nyc_output or coverage directories to generate so that I may generate an HTML report with percentages.

Observed Behavior

• On the left, I keep getting the instrumentation error under After Each.
  
• As of right now, I was successfully able to get Cypress and nyc installed. But, I cannot see any of the .nyc_output or coverage directories to generate a report. A lot of other solutions online are outdated, using a variation of webpack or using 3rd-party libraries, which I believe no longer work with the more recent Angular v17 after testing it. It's strange because React + TS + Vite works pretty much out of the box as there are millions of modern & working tutorials for it, but there are little to no modern Angular tutorials on how to get this configured properly.

Troubleshooting steps

• still occurring when I put cache: false in my nyc config

• To recreate this issue, I have wrote a Linux bash script located at ./client/cypress/run_e2e_cypress_tests.sh.

• The script can be invoked on the CLI using the NPM alias npm run test:e2e-script anywhere in the client directory.

• I have two other aliases which sing the NPM aliases npm run cypress:code-cov-report (generates the HTML report) and npm run test:e2e-code-cov (displays the HTML page on the browser).

• Please help me out if possible as I have struggled for days trying to find modern Angular solutions (less than <1-2 years old) for setting this functionality up. Any suggestions or direction would be greatly appreciated! Thank you in advance.

Environment Information