Publish your Angular application coverage

If you want to show the code coverage of your Angular project, this tutorial is the way to go.


In this tutorial we’ll be using Travis-CI & codecov. So create the corespondent accounts & add your project.


For this example, I’ll start by creating a new angular application. Following that, let’s add codecov as a dev-dependency:

$ ng new angular-app-codecov
$ cd angular-app-codecov
$ npm i -D codecov

Next, let’s setup Karma. Remember we need to run the test coverage on Travis-CI. So, we need to run Chrome in Headless Mode. Let’s edit Karma.conf.js which is located in the root of the project. Add these new lines to your config:

Create a file .travis.yml which contains the CI script to run in the build.

Add the following script:

language: node_js
- "12"
chrome: stable
- npm install
- stage: Test coverage
- ng test --browsers=ChromeHeadlessNoSandbox --codeCoverage=true --watch=false
- if [[ "$TRAVIS_TEST_RESULT" == 0 ]]; then ./node_modules/.bin/codecov; fi

Connect to your codecov account, search for your repository & add it. You’ll see a token ( see image below), that’s the token Travis will use to upload your code coverage report to codecov.

Next, let’s add that token to Travis-CI. So, connect to your Travis-CI account, add the repository & go to settings. Let’s add an environment variable CODECOV_TOKEN to the build & let’s give it the value of the codecov token.

And that’s it, all that’s left is to trigger the build manually or add a commit to see the coverage report of your project.


The last thing you probably want to to is to add the badge on your project:

On codecov, go to your project settings. Under ‘badge’ copy the markdown snippet & paste it in your

And That’s it. If you face any issue leave a comment or open an issue in the Github repository.

Web/Mobile Developer.