getting cypress code coverage to work with angular and typescript

Question

I'm trying to get cypress code coverage working with my angular/typescript project but am stuck on the instrumentation step.

I've tried to follow a few guides, like this one, but nothing seems to have worked - every time I run my cypress tests, I get the notification Did you forget to instrument your code?

Here's my current set-up:

coverage.webpack.ts:

import * as path from 'path';

export default {
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        loader: 'istanbul-instrumenter-loader',
        options: { esModules: true },
        enforce: 'post',
        include: path.join(__dirname, '..', 'src'),
        exclude: [
          /\.(e2e|spec)\.ts$/,
          /node_modules/,
          /(ngfactory|ngstyle)\.js/,
        ],
      },
    ],
  },
}

I added the following to my angular.json:

under architect.build.configurations:

"e2e": {
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true,
  "vendorChunk": true,
  "customWebpackConfig": {
    "path": "./cypress/coverage.webpack.ts"
  }
}

under architect.build:

"serve-coverage": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "browserTarget": "$PROJECT:build:e2e"
  }
},
"e2e": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "devServerTarget": "$PROJECT:serve-coverage",
    "watch": true,
    "headless": false
  },
  "configurations": {
    "production": {
      "devServerTarget": "$PROJECT:serve-coverage:production"
    }
  }
},
"e2e-ci": {
  "builder": "@cypress/schematic:cypress",
  "options": {
    "browser": "chrome",
    "devServerTarget": "$PROJECT:serve-coverage",
    "headless": true,
    "watch": false
  },
  "configurations": {
    "production": {
      "devServerTarget": "$PROJECT:serve-coverage:production"
    }
  }

Then I added the following to cypress.config.ts:

const registerCodeCoverageTasks = require("@cypress/code-coverage/task");

async function setupNodeEvents(
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
  registerCodeCoverageTasks(on, config);
  return config;
}

export default defineConfig({
  e2e: {
    baseUrl: '$LOCALPORT',
    specPattern: 'cypress/e2e/**/*.feature',
    supportFile: 'cypress/support/e2e.ts',
    setupNodeEvents,
  },
});

Apologies for the length, but would appreciate if anyone can provide a direction! Stuck on where to go from here.