Unable to load template plugin matching 'apollo-angular'

[bmayen]

Describe the bug

Using the following codegen.ts I get the following error in my Angular 17 project.

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: '../shared/__generated__/schema.graphql',
  generates: {
    'frontend/src/app/shared/__generated__': {
      plugins: ['apollo-angular'],
      config: {
        apolloAngularVersion: 6
      },
    },
  },
};
export default config;

graphql-codegen --require tsconfig-paths/register --config ./codegen.ts

✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate to frontend/src/app/shared/__generated__
    ✔ Load GraphQL schemas
    ✔ Load GraphQL documents
    ✖
      Unable to load template plugin matching 'apollo-angular'.
      Reason:
      require() of ES Module ....node_modules/apollo-angular/fesm2022/ngApollo.mjs not supported.
      Instead change the require of ....node_modules/apollo-angular/fesm2022/ngApollo.mjs to a dynamic import() which is available in all CommonJS modules.

Environment:

  ├── @angular/cli@17.0.7
  ├── @angular/core@17.0.7
  ├── @apollo/client@3.8.8
  ├── apollo-angular@6.0.0
  ├── graphql@16.8.1
  └── typescript@5.2.2

Additional context

tsconfig:

"forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "emitDecoratorMetadata": true,
    "useDefineForClassFields": false,
    "module": "ES2022",
    "target": "ES2022",
    "lib": [
      "ES2022",
      "dom",
      "esnext.asynciterable"
    ],