Cypress code coverage not instrumenting in angular18

[MohamedSahir]

I am writing a e2e test case with cypress for angular application, i am not able to find proper documentation for cypress code coverage for angular, i can able to do with react, but facing issues in angular18. any additional configuration need to do ,

enable source map in angular json.

versions:
[email protected]
node version:18.20.2
"@cypress/code-coverage": "^3.12.48",
angular 17 ,18 tested

could you please update cypress code coverage much more clearer for technology wise in the documentation,

here is cypress config.ts

import { defineConfig } from 'cypress';
import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
import createBundler from '@bahmutov/cypress-esbuild-preprocessor';
import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
import codeCoverageTask from '@cypress/code-coverage/task';
import registerCodeCoverageTasks from '@cypress/code-coverage/task';

export default defineConfig({
  e2e: {
    specPattern: 'cypress/e2e/**/*.feature',
    supportFile: 'cypress/support/e2e.ts',
    
    async setupNodeEvents(
      on: Cypress.PluginEvents,
      config: Cypress.PluginConfigOptions
    ) {
      await addCucumberPreprocessorPlugin(on, config);
      
      on('file:preprocessor', createBundler({
        plugins: [createEsbuildPlugin(config)],
      }));

       // Register code coverage task
       codeCoverageTask(on, config);

       // Ensure coverage is enabled
       config.env.coverage = true;
       config.instrument = true;
       config.experimentalSourceRewriting = true;
 
       return config;
     // require('@cypress/code-coverage/task')(on, config)
    //  registerCodeCoverageTasks(on, config);
    //  return config;
      // codeCoverageTask(on, config);
      
      // Use type assertion for config.env
      // (config.env as any).coverage = true;
      // (config.env as any).codeCoverage = true;
      // (config.env as any).codeCoverageTasksRegistered = true;
    
      
      // return config;
    },
    baseUrl: 'http://localhost:4700',
    
  },
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    specPattern: '**/*.ts',
  },
  env: {
    coverage: true,
    disableGpu: true,
    codeCoverage: true,
    codeCoverageTasksRegistered: true,
  },
  experimentalSourceRewriting: true,
});

tried both

and babel.config.json or .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
   "plugins": ["babel-plugin-istanbul"]
  //"plugins": ["istanbul"]
}

i can able to generate cucumber report but cypress not instrumenting

added in plugin index.ts file
const codeCoverageTask = require('@cypress/code-coverage/task');

module.exports = (on:any, config:any) => {
  codeCoverageTask(on, config);
  return config;
};

nycrc

{
  "extends": "@istanbuljs/nyc-config-typescript",
    "all": true,
    "check-coverage": true,
    "excludeAfterRemap": false,
  
    "include": [
      "src/**/*.ts"
  
    ],
    "exclude": [
      "**/*.spec.ts",
      "**/*.d.ts",
      "cypress/**/*",
      "src/test.ts",
      "src/environments/*"
    ],
    "extension": [
      ".ts"
    ],
    "require": [
      "ts-node/register"
    ],
    "reporter": [
      "html",
      "lcov",
      "text-summary"
    ],
    "report-dir": "./coverage-e2e"
  }

nothing working could you please help me on this ,struggling here for two weeks.

code coverage report generated with no coverage.

i want both reports cucumber and cypress .cucumber can able to generate , but cypress not instrumenting