With the latest CLI, inside angular.json

  "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "./karma.conf.js",
            "codeCoverageExclude": ["src/testing/**/*"],
Answer from Greg on Stack Overflow
🌐
Testing-angular
testing-angular.com › measuring-code-coverage
Measuring code coverage – Testing Angular
February 17, 2021 - ng test --code-coverage · After the tests have completed, Istanbul saves the report in the coverage directory located in the Angular project directory. The report is a bunch of HTML files you can open with a browser. Start by opening coverage/index.html in the browser of your choice.
🌐
Angular
angular.dev › guide › testing › code-coverage
Code coverage • Angular
If you want to create code-coverage reports every time you test, you can set the coverage option to true in your angular.json file:
🌐
TutorialsPoint
tutorialspoint.com › angular_cli › angular_cli_code_coverage.htm
Angular CLI - Code Coverage
When the testing is complete, the above command creates a /coverage folder within your project directory. Expand the coverage folder and open the index.html file to see a report with your source code and code coverage values.
🌐
GitHub
github.com › angular › angular-cli › issues › 11227
ng test --code-coverage gives wrong results and do not include all files · Issue #11227 · angular/angular-cli
June 13, 2018 - Code coverage generates a report but its misleading: ... Despite there are just two methods in componentb, coverage is eqal to 80%. If I preview covered area it covered untested file as well! After editing test.ts (replace const context = require.context('./', true, /\.spec\.ts$/); with const context = require.context('./', true, /\/app\/.*\.ts$/); and reruning ng test --code-coverage --watch false ServiceA is visible in report but has some unrealistic values (Statement Coverage at 80%, Branches at 100%, Lines 83%)
Author   zielinskikamil
🌐
Angular
angular.dev › cli › test
ng test • Angular
Enables coverage reporting for tests. If not specified, the coverage configuration from a runner configuration file will be used if present.
🌐
GitHub
github.com › angular › angular-cli › issues › 10695
angular 6 ng test --code-coverage --single-run is not working · Issue #10695 · angular/angular-cli
July 5, 2018 - Use new API on .hooksinstead 07 05 2018 17:19:51.177:INFO [karma]: Karma v2.0.2 server started at http://0.0.0.0:9876/ 07 05 2018 17:19:51.177:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency 07 05 2018 17:19:51.177:ERROR [karma]: Found 1 load error npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! container@1.0.0 test:watch:ng test --code-coverage` npm ERR!
Author   Tataraovoleti
🌐
Angular-book
angular-book.dev › ch04-06-coverage.html
Code Coverage - Angular Book
You can generate a coverage report for your unit tests by adding --code-coverage switch to the test command: ng test --single-run --code-coverage · Under the hood the ng tool performs the following actions: compile the project with webpack, including TypeScript transpilation with source maps ·
Find elsewhere
🌐
Medium
manivelarjunan.medium.com › angular-7-unit-testing-code-coverage-5c7a238315b6
Angular 7 + unit testing + code coverage | by Manivel Arjunan | Medium
December 29, 2018 - Open the app.component.spec.ts test file (Control/Command-P, then start typing the name of the file). Set a breakpoint in the test. Refresh the browser, and it stops at the breakpoint. Below diagram depicts how to debug. ... If you want to create code-coverage reports every time you run the test suite, you can set the following option in the CLI configuration file, angular.json:
Top answer
1 of 7
18

I had the same issue and I found a simple workaround that does the trick for me without any big configuration.

  1. In your app folder, create a file app.module.spec.ts
  2. In this file add an import to your app module.

import './app.module';

That's it ;)

The point is, your app module is most likely the central part of your application which imports any other used files directly or indirectly. Now that you have created the spec file, everything that is included by your module should also be included in the test coverage report.

I am not 100% sure if this works with lazy loaded modules. If not, you can simply import those lazy loaded modules in your app.module.spec.ts as well, or create a spec file per module, where you import the module.

2 of 7
10

Here is the way to do this:

  1. Add client section to your karma.conf.js like this:

    plugins: [
        ...
    ],
    client: {
        codeCoverage: config.angularCli.codeCoverage
    },
    files: [
        ...
    ],
    
  2. Change your test.ts to require files according to codeCoverage parameter:

    let context; 
    
    if (__karma__.config.codeCoverage) {
        context = require.context('./app/', true, /\.ts/);
    } else {
        context = require.context('./app/', true, /\.spec\.ts/);
    }
    
    context.keys().map(context);
    

UPDATE:

Since Angular CLI 1.5.0 additional steps are required:

  1. Next to tsconfig.spec.json add tsconfig-cc.spec.json file with the following content:

    {
      "extends": "./tsconfig.spec.json",
      "include": [
        "**/*.ts"
      ]
    }
    
  2. In your angular-cli.json add the following to apps array:

    {
      "root": "src/",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "testTsconfig": "tsconfig-cc.spec.json"
    }
    
  3. In your karma.conf.js add the following to angularCli section:

    app: config.angularCli.codeCoverage ? '1' : '0'  
    

    eventually it should look something like this:

    angularCli: {
        environment: 'dev',
        app: config.angularCli.codeCoverage ? '1' : '0'
    },
    

So what's happening here?

Apparently they have fixed Angular compiler plugin and it takes the file globs from tsconfig.spec.json now. As long as we include only **/*.spec.ts in tsconfig.spec.json these are the only files that will be included in coverage.

The obvious solution is making tsconfig.spec.json include all the files (in addition to require.context). However, this will slow down all the tests even when running without coverage (which we don't want to).

One of the solutions is using the ability of angular-cli to work with multiple apps.
By adding another entry into apps array, we're adding another configuration for "another" (which is actually the same one) app.
We strip out all the irrelevant information in this config, leaving just the test configuration, and put another tsconfig which includes all the ts files.
Finally, we're telling angular-cli karma plugin to run the tests with the configuration of the second app (index 1) in case it is running with code coverage and run with the configuration of the first app (index 0) if it is running without code coverage.

Important note: in this configuration I assume you have only one application in .angular-cli.json. In case you have more you have to adjust indexes accordingly.

🌐
Angular
v17.angular.io › cli › test
ng test
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
🌐
Angular
v17.angular.io › guide › testing-code-coverage
Code coverage
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
🌐
GitHub
github.com › angular › angular-cli › issues › 5685
"ng test" - no code coverage report if --code-coverage and --reporters options used together · Issue #5685 · angular/angular-cli
March 27, 2017 - Try again with no reporter: ng test --single-run --code-coverage - works as expected and generates a coverage report.
Author   alistairmgreen
🌐
GitHub
github.com › angular › angular-cli › issues › 7291
ng test --code-coverage do not generate coverage dicretory · Issue #7291 · angular/angular-cli
August 7, 2017 - module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular/cli/plugins/karma') ], client:{ clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { reports: [ 'html', 'lcovonly' ], fixWebpackSourcePaths: true }, angularCli: { environment: 'dev' }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); };
Author   hucheng91
🌐
Microsoft Community Hub
techcommunity.microsoft.com › microsoft community hub › communities › products › azure › azure infrastructure blog
Enforcing Angular Unit Test Coverage in Azure DevOps Pipelines: A Step-by-Step Guide | Microsoft Community Hub
August 21, 2025 - coverageReporter: { dir: require('path').join(__dirname, 'coverage'), reporters: [ { type: 'html' }, { type: 'lcov' }, { type: 'cobertura', file: 'code-coverage.xml' }, { type: 'text-summary' } ] }, junitReporter: { outputDir: 'reports/junit', outputFile: 'unit-test-results.xml', useBrowserName: false } Why it matters: Enables Cobertura and JUnit reporting for CI pipelines. ... "scripts": { "test:ci": "ng test --watch=false --browsers=ChromeHeadless --code-coverage" }, "devDependencies": { "karma-coverage": "^2.0.3", "karma-junit-reporter": "^2.0.1", "chrome-launcher": "^0.14.0" }