Run ng test --coverage in a current Angular CLI project to generate a code coverage report in coverage/; open coverage/index.html to browse it. New Angular CLI projects use Vitest by default, while Karma remains supported, so check the project’s test runner before copying runner-specific configuration.
Generate and open an Angular coverage report
-
From the Angular workspace root, run
ng test --coverage. For Vitest, install its coverage provider first if it is not already present:npm install -D @vitest/coverage-v8. Angular documents equivalent installation commands for Yarn, pnpm, and Bun in its code coverage guide.As an Amazon Associate I earn from qualifying purchases.
-
When the test run completes, open
coverage/index.htmlin a browser. The report’s HTML view lets you navigate from summary percentages into file-level coverage details.Free tools Windows power users keep installed
One-click scans. No signup required.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
For routine reporting, set coverage to true in the relevant test target in angular.json. Configuration names and supported options are documented in the ng test reference.
#1 Best Overall
Check which test runner the project uses
Angular’s current testing documentation says new CLI projects use Vitest with jsdom by default; Karma remains supported. The Angular CLI testing overview and ng test reference describe the current setup and runner options. Do not assume a project created earlier has switched runners: its Angular CLI version and test target determine which settings apply.
| Runner | Coverage setup | When it fits |
|---|---|---|
| Vitest | Install @vitest/coverage-v8 as a development dependency for coverage; configure options through the Angular test target. |
Default for new Angular CLI projects; Node with jsdom is the standard environment. |
| Karma | Use Karma’s coverage reporter configuration, including coverageReporter.check.global for minimum thresholds. |
Existing Karma projects or tests that rely on its browser-based workflow. Angular continues to support it. |
Coverage does not require a real browser in every project. Angular’s default Vitest setup uses Node and jsdom; a browser run can be useful for browser-specific APIs or debugging, and Vitest browser mode requires installing a browser provider. For Karma’s documented headless Chrome CI example, see Testing with Karma and Jasmine.
Configure files, formats, and display bands
In angular.json, configure coverage options under the project’s test target. The current CLI option names are coverage, coverage-include, coverage-exclude, and coverage-reporters; Angular’s configuration guide presents the corresponding workspace settings in camel case, such as coverageInclude and coverageReporters.
Recommended Free Tools
-
Included and excluded files: Use
coverageIncludeandcoverageExcludeto control which files appear in the report. Review exclusions with care: removing files changes the measurement denominator, so headline percentages may no longer be comparable between runs or teams. -
Report formats: HTML is useful for browsing locally. LCOV is commonly useful for downstream reporting. The CLI reference also lists LCOV-only, text, text-summary, Cobertura, JSON, and JSON summary reporters.
-
Watermarks:
coverageWatermarkssets low and high display bands that affect the report’s color-coding. Watermarks are visual cues, not pass/fail requirements.
Choose formats based on who or what consumes the output, and keep the included-file policy stable if you want coverage comparisons to mean the same thing over time.
Set coverage thresholds that CI can enforce
Angular’s coverage configuration supports minimum percentages for statements, branches, functions, and lines. Its guide shows 80 for each dimension as an example configuration, not as a universal target or evidence-based quality benchmark. Choose values that match the team’s policy and codebase, then configure them in the test target. A run that falls below a configured threshold fails, allowing CI to block a change according to that policy.
Thresholds answer whether measured coverage clears a numeric floor; they do not show whether tests assert the right outcomes. A line can execute without its behavior being meaningfully checked, so read percentages alongside the tests and the file-level report rather than treating a high score as proof of test quality.
Run coverage in CI
Angular notes that CI environments commonly set CI=true, which enables a single non-interactive test run. If the environment does not set it, use ng test --no-watch --no-progress to avoid watch mode and progress output. Keep the command consistent with the project’s runner and its configured coverage provider.
For Karma, Angular documents this headless-browser example: ng test --no-watch --no-progress --browsers=ChromeHeadless. It is Karma-specific; do not add it to a Vitest workflow by assumption. See Angular’s Karma and Jasmine guide for its context.
Recognize legacy Karma instructions
Older Angular instructions, including the Angular v18 coverage guide, use ng test --no-watch --code-coverage and configure Karma’s check reporter in karma.conf.js. That syntax is useful when maintaining a matching legacy Karma setup, but it should not be pasted into a current Vitest project without checking the Angular CLI version and runner. For current CLI documentation, use ng test --coverage.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
