title: Angular + Cypress code coverage reporting not working
body: <p>I have been trying to get Cypress code coverage working with my Angular production project to no avail.</p>
  <p>To try and help diagnose it, I have created a minimal implementation project to make sure I wasn't introducing anything weird in the production version, which I don't think I am as the same issue is still happening. It's starting to drive me mad!</p>
  <p>I have used a few references and as far as I can see I have the things in place I need to:</p>
  <ul>
  <li><a href="https://docs.cypress.io/guides/tooling/code-coverage.html#Introduction" rel="nofollow noreferrer">Cypress Coverage Documentation</a></li>
  <li><a href="https://dev.to/cssoldiervoif/code-coverage-with-cypress-angular-45pb" rel="nofollow noreferrer">Article 1</a></li>
  <li><a href="https://github.com/skylock/cypress-angular-coverage-example" rel="nofollow noreferrer">Code Example (older dependencies)</a></li>
  </ul>
  <p>As far as I can tell the Angular and Cypress side is all hooked up and am getting output in the .nyc_output folder and a coverage report. However the report is not indicating typescript line coverage or including those stats.</p>
  <p><a href="https://i.stack.imgur.com/fAwPV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fAwPV.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/CpkY6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CpkY6.png" alt="enter image description here" /></a></p>
  <p>I have seen <a href="https://stackoverflow.com/questions/57876922/cannot-get-code-coverage-with-cypress-istanbul">this</a> but didn't seem to help.</p>
  <p>Code Instrumentation (webpack extension + angular.json):</p>
  <pre><code>module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|ts)$/,
          loader: &quot;istanbul-instrumenter-loader&quot;,
          options: { esModules: true },
          enforce: &quot;post&quot;,
          include: require(&quot;path&quot;).join(__dirname, &quot;..&quot;, &quot;src&quot;),
          exclude: [
            /\.(e2e|spec)\.ts$/,
            /node_modules/,
            /(ngfactory|ngstyle)\.js/,
          ],
        },
      ],
    },
  };
  </code></pre>
  <pre><code>&quot;serve&quot;: {
    &quot;builder&quot;: &quot;ngx-build-plus:dev-server&quot;,
    &quot;options&quot;: {
      &quot;browserTarget&quot;: &quot;architecture-testing:build&quot;,
      &quot;extraWebpackConfig&quot;: &quot;./cypress/coverage.webpack.js&quot;,
      &quot;sourceMap&quot;: true
    },
    &quot;configurations&quot;: {
      &quot;production&quot;: {
        &quot;browserTarget&quot;: &quot;architecture-testing:build:production&quot;
      }
    }
  }
  </code></pre>
  <p>Cypress appears to be recording and saving coverage:</p>
  <pre><code>const registerCodeCoverageTasks = require(&quot;@cypress/code-coverage/task&quot;);
  
  module.exports = (on, config) =&gt; {
    registerCodeCoverageTasks(on, config);
  
    return config;
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Sl1Xb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sl1Xb.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/bf0FB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bf0FB.png" alt="enter image description here" /></a></p>
  <p>out.json appears to have the correct file and code mapping:</p>
  <p><a href="https://i.stack.imgur.com/hFNaJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hFNaJ.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/DDtv2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DDtv2.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/bKNwM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bKNwM.png" alt="enter image description here" /></a>:</p>
  <p>package.json (nyc config + deps):</p>
  <pre><code>{
    &quot;name&quot;: &quot;architecture-testing&quot;,
    &quot;version&quot;: &quot;0.0.0&quot;,
    &quot;scripts&quot;: {
      &quot;postinstall&quot;: &quot;ngcc&quot;,
      &quot;ng&quot;: &quot;ng&quot;,
      &quot;start&quot;: &quot;ng serve&quot;,
      &quot;build&quot;: &quot;ng build&quot;,
      &quot;test&quot;: &quot;ng test&quot;,
      &quot;lint&quot;: &quot;ng lint&quot;,
      &quot;e2e&quot;: &quot;ng e2e&quot;,
      &quot;precypress&quot;: &quot;rimraf .nyc_output coverage&quot;,
      &quot;cypress&quot;: &quot;ng run architecture-testing:cypress-run&quot;,
      &quot;cypress:open&quot;: &quot;cypress open&quot;,
      &quot;cypress:run&quot;: &quot;cypress run&quot;
    },
    &quot;nyc&quot;: {
      &quot;extends&quot;: &quot;@istanbuljs/nyc-config-typescript&quot;,
      &quot;all&quot;: true,
      &quot;exclude&quot;: [
        &quot;coverage/**&quot;,
        &quot;cypress/**&quot;,
        &quot;**/*.spec.ts&quot;
      ]
    },
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@angular/animations&quot;: &quot;~9.1.9&quot;,
      &quot;@angular/common&quot;: &quot;~9.1.9&quot;,
      &quot;@angular/compiler&quot;: &quot;~9.1.9&quot;,
      &quot;@angular/core&quot;: &quot;~9.1.9&quot;,
      &quot;@angular/forms&quot;: &quot;~9.1.9&quot;,
      &quot;@angular/platform-browser&quot;: &quot;~9.1.9&quot;,
      &quot;@angular/platform-browser-dynamic&quot;: &quot;~9.1.9&quot;,
      &quot;@angular/router&quot;: &quot;~9.1.9&quot;,
      &quot;rxjs&quot;: &quot;~6.5.4&quot;,
      &quot;tslib&quot;: &quot;^1.10.0&quot;,
      &quot;zone.js&quot;: &quot;~0.10.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@angular-devkit/build-angular&quot;: &quot;~0.901.7&quot;,
      &quot;@angular/cli&quot;: &quot;~9.1.7&quot;,
      &quot;@angular/compiler-cli&quot;: &quot;~9.1.9&quot;,
      &quot;@briebug/cypress-schematic&quot;: &quot;^3.3.0&quot;,
      &quot;@cypress/code-coverage&quot;: &quot;^3.8.1&quot;,
      &quot;@cypress/webpack-preprocessor&quot;: &quot;5.4.1&quot;,
      &quot;@istanbuljs/nyc-config-typescript&quot;: &quot;^1.0.1&quot;,
      &quot;@types/node&quot;: &quot;^12.11.1&quot;,
      &quot;codelyzer&quot;: &quot;^5.1.2&quot;,
      &quot;cypress&quot;: &quot;^4.8.0&quot;,
      &quot;istanbul-instrumenter-loader&quot;: &quot;^3.0.1&quot;,
      &quot;istanbul-lib-coverage&quot;: &quot;^3.0.0&quot;,
      &quot;ngx-build-plus&quot;: &quot;^9.0.6&quot;,
      &quot;nyc&quot;: &quot;^15.1.0&quot;,
      &quot;rimraf&quot;: &quot;^3.0.2&quot;,
      &quot;source-map-support&quot;: &quot;^0.5.19&quot;,
      &quot;ts-loader&quot;: &quot;7.0.5&quot;,
      &quot;ts-node&quot;: &quot;^8.3.0&quot;,
      &quot;tslint&quot;: &quot;~6.1.0&quot;,
      &quot;typescript&quot;: &quot;~3.8.3&quot;
    }
  }
  </code></pre>
  <p>Spec file:</p>
  <pre><code>it('does something', () =&gt; {
    cy.visit('http://localhost:4200');
    cy.get('[data-cy=button-one]').click();
    cy.get('[data-cy=button-output]').should('have.text', 'you clicked button 1');
  });
  </code></pre>
  <p>Sorry it's so long but I am stuck as to where to go next. Many thanks if you can point me in any direction.</p>
  <p><strong>Update based on answer investigation:</strong></p>
  <p>Looking at the past versions of the @cypress/code-coverage it appears the issue for me was introduced in v3.3.0 of the plugin. All the versions for v3.2.* were working for me when downgrading my minimal project. After looking at the documentation changes for v3.3.0 the key bit of information in the readme was:</p>
  <pre><code>**Note:** if you have `all: true` NYC option set, this plugin will check the produced `.nyc_output/out.json` before generating the final report. If the `out.json` file does not have information for some files that should be there according to `include` list, then an empty placeholder will be included, see [PR 208](https://github.com/cypress-io/code-coverage/pull/208).
  </code></pre>
  <p>My original nyc config was:</p>
  <pre><code>&quot;nyc&quot;: {
    &quot;extends&quot;: &quot;@istanbuljs/nyc-config-typescript&quot;,
    &quot;all&quot;: true,
    &quot;exclude&quot;: [
      &quot;coverage/**&quot;,
      &quot;cypress/**&quot;,
      &quot;**/*.spec.ts&quot;
    ]
  }
  </code></pre>
  <p>So for some reason even though I have metrics for the files that were being tested in out.json a second &quot;empty placeholder&quot; node was being created and overriding the subsequent report generation. I am guessing that this is potentially a bug or a problem with my setup again so will ask the creators.</p>
  <p>I can now see coverage if I change my nyc config to:</p>
  <pre><code>&quot;nyc&quot;: {
    &quot;extends&quot;: &quot;@istanbuljs/nyc-config-typescript&quot;,
    &quot;all&quot;: true,
    &quot;include&quot;: [
      &quot;src/**/*.ts&quot;
    ],
    &quot;exclude&quot;: [
      &quot;coverage/**&quot;,
      &quot;cypress/**&quot;,
      &quot;**/*.spec.ts&quot;
    ]
  }
  </code></pre>
  <p>This does mean that if I don't hit a file with testing it won't be included as an empty placeholder as &quot;all&quot;: true is no longer present.</p>
  <p>Looking at @briebug/cypress-schematic@3.3.0 this doesn't appear to be causing any issues (same happens without using their builder) but has been raised as one <a href="https://github.com/briebug/cypress-schematic/issues/44" rel="nofollow noreferrer">here</a> and <a href="https://github.com/briebug/cypress-schematic/issues/42" rel="nofollow noreferrer">here</a>.</p>