Show how to instrument and get code coverage for Angular application

[bahmutov]

Would be nice to show an application scaffolded using https://nx.dev/angular/guides/modernize-cypress with TypeScript and code coverage from end-to-end tests

[skylock]

In the meantime where I can get the information how to implement this, I'am in exactly this situation, guidance is really appreciated !

I am using angular & cypress & TypeScript with WebPack

[skylock]

Finally succeed !!! You can find here a working example https://github.com/skylock/cypress-angular-coverage-example

[bahmutov]

nice, tried it locally and it works @skylock

[bahmutov]

🎉 This issue has been resolved in version 1.9.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[stahloss]

This this should be revisited, because @skylock implementation uses istanbul-instrumenter-loader, which isn't maintained and has a very old istanbul-lib-instrument dependency.

Maybe there's some way to use babel-plugin-istanbul instead?

EDIT
Just got it working with babel-loader and babel-plugin-istanbul, so you can just replace istanbul-instrumenter-loader and modify the webpack config accordingly.

[skylock]

Can you point to an github repo with an working example ?

[stahloss]

See your example repository issue for details.

[Elif5757]

Finally succeed !!! You can find here a working example https://github.com/skylock/cypress-angular-coverage-example

@skylock it doesn't work with angular version 9.1.4

[LukasKlement]

@Elif5757 I made code coverage work with Angular 9, I wrote up a quick guide on it: https://lukas-klement.medium.com/implementing-code-coverage-with-angular-and-cypress-6ed08ed7e617

[MohamedSahir]

LukasKlement can you update for angular 18 with code coverage in blog or any detail explanation facing issues #893